Get boba!
boba Version 1.7.2
  • Introduction
  • Installation
  • Customize
  • Compatibility
  • Changelog
  • Breakpoints
  • Colors
  • Typography
  • Containers
  • Grid
  • Navbar
  • Sections
  • Sidebar
  • Banners
  • Breadcrumbs
  • Cards
  • Collapsible
  • Messages
  • Notifications
  • Pagination
  • Tabs
  • Tables
  • Blockquotes
  • Buttons
  • Code
  • Counters
  • Descriptions
  • Dividers
  • Labels
  • Lists
  • Progress
  • Checkboxes
  • Inputs
  • Radios
  • Selects
  • Switches
  • Textareas
  • Animations
  • Background
  • Borders
  • Display
  • Flex
  • Images
  • Shadows
  • Shapes
  • Sizing
  • Spacing
  • Text

Utilities

Learn how to build your website with boba!

Spacing

Hassle-free spacing classes to make pixel perfect positioning painless.
Margin
.m-0 Applies margin: 0em;
.m-1 Applies margin: 0.5em;
.m-2 Applies margin: 1em;
.m-3 Applies margin: 1.5em;
.m-4 Applies margin: 2em;
 
Margin Top
.mt-0 Applies margin-top: 0em;
.mt-1 Applies margin-top: 0.5em;
.mt-2 Applies margin-top: 1em;
.mt-3 Applies margin-top: 1.5em;
.mt-4 Applies margin-top: 2em;
 
Margin Bottom
.mb-0 Applies margin-bottom: 0em;
.mb-1 Applies margin-bottom: 0.5em;
.mb-2 Applies margin-bottom: 1em;
.mb-3 Applies margin-bottom: 1.5em;
.mb-4 Applies margin-bottom: 2em;
 
Margin Left
.ml-0 Applies margin-left: 0em;
.ml-1 Applies margin-left: 0.5em;
.ml-2 Applies margin-left: 1em;
.ml-3 Applies margin-left: 1.5em;
.ml-4 Applies margin-left: 2em;
 
Margin Right
.mr-0 Applies margin-right: 0em;
.mr-1 Applies margin-right: 0.5em;
.mr-2 Applies margin-right: 1em;
.mr-3 Applies margin-right: 1.5em;
.mr-4 Applies margin-right: 2em;
 
Margin Vertical
.mv-0 Applies margin: 0em 0;
.mv-1 Applies margin: 0.5em 0;
.mv-2 Applies margin: 1em 0;
.mv-3 Applies margin: 1.5em 0;
.mv-4 Applies margin: 2em 0;
 
Margin Horizontal
.mh-0 Applies margin: 0 0em;
.mh-1 Applies margin: 0 0.5em;
.mh-2 Applies margin: 0 1em;
.mh-3 Applies margin: 0 1.5em;
.mh-4 Applies margin: 0 2em;
Padding
.p-0 Applies padding: 0em;
.p-1 Applies padding: 0.5em;
.p-2 Applies padding: 1em;
.p-3 Applies padding: 1.5em;
.p-4 Applies padding: 2em;
 
Padding Top
.pt-0 Applies padding-top: 0em;
.pt-1 Applies padding-top: 0.5em;
.pt-2 Applies padding-top: 1em;
.pt-3 Applies padding-top: 1.5em;
.pt-4 Applies padding-top: 2em;
 
Padding Bottom
.pb-0 Applies padding-bottom: 0em;
.pb-1 Applies padding-bottom: 0.5em;
.pb-2 Applies padding-bottom: 1em;
.pb-3 Applies padding-bottom: 1.5em;
.pb-4 Applies padding-bottom: 2em;
 
Padding Left
.pl-0 Applies padding-left: 0em;
.pl-1 Applies padding-left: 0.5em;
.pl-2 Applies padding-left: 1em;
.pl-3 Applies padding-left: 1.5em;
.pl-4 Applies padding-left: 2em;
 
Padding Right
.pr-0 Applies padding-right: 0em;
.pr-1 Applies padding-right: 0.5em;
.pr-2 Applies padding-right: 1em;
.pr-3 Applies padding-right: 1.5em;
.pr-4 Applies padding-right: 2em;
 
Padding Vertical
.pv-0 Applies padding: 0em 0;
.pv-1 Applies padding: 0.5em 0;
.pv-2 Applies padding: 1em 0;
.pv-3 Applies padding: 1.5em 0;
.pv-4 Applies padding: 2em 0;
 
Padding Horizontal
.ph-0 Applies padding: 0 0em;
.ph-1 Applies padding: 0 0.5em;
.ph-2 Applies padding: 0 1em;
.ph-3 Applies padding: 0 1.5em;
.ph-4 Applies padding: 0 2em;