loading...

Bootstrap 4 – Margins and padding

Bootstrap also provides handy classes for centering and floating elements.

Bootstrap 3 had a center-block class, which used margins to align an element centrally and set the display property to block . This has been removed from Bootstrap 4 in favor of two other classes: d-block and mx-auto . As already noted earlier, the  d-block class is responsible for setting the element’s display property to block , while the mx-auto class sets the margin properties to auto . Similarly, the mt-auto, mr-auto, ml-auto, and mb-auto classes set the margin-top, margin-right, margin-left, and margin-bottom properties to auto respectively (the classes are defined in _spacing.scss):

.m-auto {
     margin: auto !important;
}

.mt-auto {
     margin-top: auto !important;
}

.mr-auto {
     margin-right: auto !important;
}

.mb-auto {
     margin-bottom: auto !important;
}

.ml-auto {
     margin-left: auto !important;
}

.mx-auto {
     margin-right: auto !important;
     margin-left: auto !important;
}

.my-auto {
     margin-top: auto !important;
     margin-bottom: auto !important;
}

As you can observe, margin helper class names take the form of <first letter of property name><direction>-<value>. By adhering to this naming convention, we can either clear or increase the margins of an element. For example, m-o sets the value of the margin property to 0, mt-0 sets margin-top to 0, mr-0 sets margin-right to 0, m-1 sets the margin to 0.25rem, and so on and so forth (refer to Table 8.1—note that there exist responsive equivalents for each of the listed classes that take the form of m*-*-*. For example, to set the margin property to 0, we use the m-0 class. To set the margin property to 0 for small viewports however, you can use the m-sm-0 class):

Class name Property Value
m-0 margin 0
mt-o margin-top 0
mr-0 margin-right 0
mb-0 margin-bottom 0
ml-0 margin-left 0
mx-0 margin-right, margin-left 0
my-0 margin-top, margin-bottom
m-1 margin 0.25rem
mt-1 margin-top 0.25rem
mr-1 margin-right 0.25rem
mb-1 margin-bottom 0.25rem
ml-1 margin-left 0.25rem
mx-1 margin-right, margin-left 0.25rem
my-1 margin-top, margin-bottom 0.25rem
m-2 margin 0.5rem
mt-2 margin-top 0.5rem
mr-2 margin-right 0.5rem
mb-2 margin-bottom 0.5rem
ml-2 margin-left 0.5rem
mx-2 margin-right, margin-left 0.5rem
my-2 margin-top, margin-bottom 0.5rem
m-3 margin 1rem
mt-3 margin-top 1rem
mr-3 margin-right 1rem
mb-3 margin-bottom 1rem
ml-3 margin-left 1rem
mx-3 margin-right, margin-left 1rem
my-3 margin-top, margin-bottom 1rem
m-4 margin 1.5rem
mt-4 margin-top 1.5rem
mr-4 margin-right 1.5rem
mb-4 margin-bottom 1.5rem
ml-4 margin-left 1.5rem
mx-4 margin-right, margin-left 1.5rem
my-4 margin-top, margin-bottom 1.5rem
m-5 margin 3rem
mt-5 margin-top 3rem
mr-5 margin-right 3rem
mb-5 margin-bottom 3rem
ml-5 margin-left 3rem
mx-5 margin-right, margin-left 3rem
my-5 margin-top, margin-bottom 3rem
Table 8.1: The available margin helper classes at a glance

Similar to the margin helper classes, Bootstrap offers padding helper classes to set the padding of an element. The class names take the form of p*-*; take a look at table 8.2 (note that there exist responsive equivalents for each of the listed classes that take the form of p*-*-*. For example, to set the padding property to 0, you use the p-0 class.

To set the padding property to 0 for small viewports however, you can use the p-sm-0 class):

Class name Property Value
p-0 padding 0
pt-o padding-top 0
pr-0 padding-right 0
pb-0 padding-bottom 0
pl-0 padding-left 0
px-0 padding-right, padding-left 0
py-0 padding-top, padding-bottom
p-1 padding 0.25rem
pt-1 padding-top 0.25rem
pr-1 padding-right 0.25rem
pb-1 padding-bottom 0.25rem
pl-1 padding-left 0.25rem
px-1 padding-right, padding-left 0.25rem
py-1 padding-top, padding-bottom 0.25rem
p-2 padding 0.5rem
pt-2 padding-top 0.5rem
pr-2 padding-right 0.5rem
pb-2 padding-bottom 0.5rem
pl-2 padding-left 0.5rem
px-2 padding-right, padding-left 0.5rem
py-2 padding-top, padding-bottom 0.5rem
p-3 padding 1rem
pt-3 padding-top 1rem
pr-3 padding-right 1rem
pb-3 padding-bottom 1rem
pl-3 padding-left 1rem
px-3 padding-right, padding-left 1rem
py-3 padding-top, padding-bottom 1rem
p-4 padding 1.5rem
pt-4 padding-top 1.5rem
pr-4 padding-right 1.5rem
pb-4 padding-bottom 1.5rem
pl-4 padding-left 1.5rem
px-4 padding-right, padding-left 1.5rem
py-4 padding-top, padding-bottom 1.5rem
p-5 padding 3rem
pt-5 padding-top 3rem
pr-5 padding-right 3rem
pb-5 padding-bottom 3rem
pl-5 padding-left 3rem
px-5 padding-right, padding-left 3rem
py-5 padding-top, padding-bottom 3rem
Table 8.2: The available padding helper classes at a glance

Comments are closed.

loading...