CoreUI for Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

🤖 Looking for the LLM-optimized version?View llm.md

Margin and padding

Assign responsive-friendlymargin orpadding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from.25rem to3rem.

Notation

Spacing utilities that apply to all breakpoints, fromxs toxxl, have no breakpoint abbreviation in them. This is because those classes are applied frommin-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format{property}{sides}-{size} forxs and{property}{sides}-{breakpoint}-{size} forsm,md,lg,xl, andxxl.

Whereproperty is one of:

• m - for classes that setmargin
• p - for classes that setpadding

Wheresides is one of:

• t - for classes that setmargin-top orpadding-top
• b - for classes that setmargin-bottom orpadding-bottom
• s - (start) for classes that setmargin-left orpadding-left in LTR,margin-right orpadding-right in RTL
• e - (end) for classes that setmargin-right orpadding-right in LTR,margin-left orpadding-left in RTL
• x - for classes that set both*-left and*-right
• y - for classes that set both*-top and*-bottom
• blank - for classes that set amargin orpadding on all 4 sides of the element

Wheresize is one of:

• 0 - for classes that eliminate themargin orpadding by setting it to0
• 1 - (by default) for classes that set themargin orpadding to$spacer * .25
• 2 - (by default) for classes that set themargin orpadding to$spacer * .5
• 3 - (by default) for classes that set themargin orpadding to$spacer
• 4 - (by default) for classes that set themargin orpadding to$spacer * 1.5
• 5 - (by default) for classes that set themargin orpadding to$spacer * 3
• auto - for classes that set themargin to auto

(You can add more sizes by adding entries to the$spacers Sass map variable.)

Examples

Here are some representative examples of these classes:

.mt-0{margin-top:0!important;}.ms-1{margin-left:($spacer*.25)!important;}.px-2{padding-left:($spacer*.5)!important;padding-right:($spacer*.5)!important;}.p-3{padding:$spacer!important;}

Horizontal centering

Additionally, CoreUI for Bootstrap also includes an.mx-auto class for horizontally centering fixed-width block level content—that is, content that hasdisplay: block and awidth set—by setting the horizontal margins toauto.

<divclass="mx-auto"style="width: 200px;">  Centered element</div>

Negative margin

In CSS,margin properties can utilize negative values (padding cannot). These negative margins aredisabled by default, but can be enabled in Sass by setting$enable-negative-margins: true.

The syntax is nearly the same as the default, positive margin utilities, but with the addition ofn before the requested size. Here’s an example class that’s the opposite of.mt-1:

.mt-n1{margin-top:-0.25rem!important;}

Gap

When usingdisplay: grid ordisplay: flex, you can make use ofgap utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the$spacers Sass map.

<divstyle="grid-template-columns: 1fr 1fr;"class="d-grid gap-3"><divclass="p-2">Grid item 1</div><divclass="p-2">Grid item 2</div><divclass="p-2">Grid item 3</div><divclass="p-2">Grid item 4</div></div>

Support includes responsive options for all of CoreUI’s grid breakpoints, as well as six sizes from the$spacers map (0–5). There is no.gap-auto utility class as it’s effectively the same as.gap-0.

row-gap

row-gap sets the vertical space between children items in the specified container.

<divstyle="grid-template-columns: 1fr 1fr;"class="d-grid gap-0 row-gap-3"><divclass="p-2">Grid item 1</div><divclass="p-2">Grid item 2</div><divclass="p-2">Grid item 3</div><divclass="p-2">Grid item 4</div></div>

column-gap

column-gap sets the horizontal space between children items in the specified container.

<divstyle="grid-template-columns: 1fr 1fr;"class="d-grid gap-0 column-gap-3"><divclass="p-2">Grid item 1</div><divclass="p-2">Grid item 2</div><divclass="p-2">Grid item 3</div><divclass="p-2">Grid item 4</div></div>

Sass

Maps

Spacing utilities are declared via Sass map and then generated with our utilities API.

$spacer:1rem;$spacers:(0:0,1:$spacer*.25,2:$spacer*.5,3:$spacer,4:$spacer*1.5,5:$spacer*3,);

Utilities API

Spacing utilities are declared in our utilities API inscss/_utilities.scss.Learn how to use the utilities API.

"margin":(responsive:true,property:margin,class:m,values:map.merge($spacers,(auto:auto))),"margin-x":(responsive:true,property:margin-rightmargin-left,class:mx,values:map.merge($spacers,(auto:auto))),"margin-y":(responsive:true,property:margin-topmargin-bottom,class:my,values:map.merge($spacers,(auto:auto))),"margin-top":(responsive:true,property:margin-top,class:mt,values:map.merge($spacers,(auto:auto))),"margin-end":(responsive:true,property:margin-inline-end,class:me,values:map.merge($spacers,(auto:auto)),),"margin-bottom":(responsive:true,property:margin-bottom,class:mb,values:map.merge($spacers,(auto:auto))),"margin-start":(responsive:true,property:margin-inline-start,class:ms,values:map.merge($spacers,(auto:auto)),),//Negativemarginutilities"negative-margin":(responsive:true,property:margin,class:m,values:$negative-spacers),"negative-margin-x":(responsive:true,property:margin-rightmargin-left,class:mx,values:$negative-spacers),"negative-margin-y":(responsive:true,property:margin-topmargin-bottom,class:my,values:$negative-spacers),"negative-margin-top":(responsive:true,property:margin-top,class:mt,values:$negative-spacers),"negative-margin-end":(responsive:true,property:margin-inline-end,class:me,values:$negative-spacers),"negative-margin-bottom":(responsive:true,property:margin-bottom,class:mb,values:$negative-spacers),"negative-margin-start":(responsive:true,property:margin-inline-start,class:ms,values:$negative-spacers),//Paddingutilities"padding":(responsive:true,property:padding,class:p,values:$spacers),"padding-x":(responsive:true,property:padding-rightpadding-left,class:px,values:$spacers),"padding-y":(responsive:true,property:padding-toppadding-bottom,class:py,values:$spacers),"padding-top":(responsive:true,property:padding-top,class:pt,values:$spacers),"padding-end":(responsive:true,property:padding-inline-end,class:pe,values:$spacers),"padding-bottom":(responsive:true,property:padding-bottom,class:pb,values:$spacers),"padding-start":(responsive:true,property:padding-inline-start,class:ps,values:$spacers),//Gaputility"gap":(responsive:true,property:gap,class:gap,values:$spacers),"row-gap":(responsive:true,property:row-gap,class:row-gap,values:$spacers),"column-gap":(responsive:true,property:column-gap,class:column-gap,values:$spacers),