In this chapter, we are going to discuss the Bootstrap v4 spacing, horizontal centering, responsive utility classes and print classes.
Bootstrap v4 Spacing
In Bootstrap v4 with the help of shorthand classes, we can assign margin or padding to a web element or a subdivision of its sides. It also includes support for the individual properties, and all properties (i.e. vertical and horizontal properties). Here, all the classes are the multiples on the global default value of 1rem. As we know that in Bootstrap 4.0.0, the pixel based units have moved to relative em/rem based units which has the base font-size of 16 pixels. Also, the grid in v4 has been broken down into further sub-divisions.
The table below shows the translation of em/rem to pixels.
|
Grid Breakpoint |
Container Max Width |
|||
|
em |
px |
em |
px |
|
|
xs |
0 |
0 |
– |
– |
|
sm |
34em |
544px |
34rem |
544px |
|
md |
48em |
768px |
45rem |
720px |
|
lg |
62em |
992px |
60rem |
960px |
|
xl |
75em |
1200px |
72.25rem |
1156px |
Format for shorthand classes
The shorthand classes are named with the following format.
{property}{sides}-{size}
Where {property} could be one of the following.
|
S No. |
Property |
Description |
|
1. |
m |
It can be used for classes that set margin. |
|
2. |
p |
It can be used for classes that set padding. |
Where {sides} could be one of the following.
|
S No. |
Sides |
Description |
|
1. |
t |
It can be used for classes that set margin-top or padding-top. |
|
2. |
b |
It can be used for classes that set margin-bottom or padding-bottom. |
|
3. |
l |
It can be used for classes that set margin-left or padding-left. |
|
4. |
r |
It can be used for classes that set margin-right or padding-right. |
|
5. |
x |
It can be used for classes that set both *-left and *-right. |
|
6 |
y |
It can be used for classes that set both *-top and *-bottom. |
|
7. |
a |
It can be used for classes that set a margin or padding on all 4 sides of the element. |
Where {size} could be one of the following.
|
S No. |
Size |
Description |
|
1. |
0 |
It can be used for the classes that eliminate the margin or padding by setting it to 0. |
|
2. |
1 |
By default, It can be used for the classes that set the margin or padding to $spacer-x or $spacer-y. |
|
3. |
2 |
By default, It can be used for the classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5. |
|
4. |
3 |
By default, It can be used for the classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3. |
Note: – Bootstrap v4 provides more flexibility than before, where we can add more sizes by adding entries to the $spacers Sass map variable.
Example: – The following is an examples of shorthand classes for spacing.
.mt-0 {
margin-top: 0 !important;
}
.mr-1 {
margin-right: $spacer-x !important;
}
.ml-2 {
margin-left: $spacer-x !important;
}
.py-2 {
padding-top: ($spacer-y * 1.5) !important;
padding-bottom: ($spacer-y * 1.5) !important;
}
.px-2 {
padding-left: ($spacer-x * 1.5) !important;
padding-right: ($spacer-x * 1.5) !important;
}
.pa-2 {
padding-left: ($spacer-x * 1.5) !important;
padding-right: ($spacer-x * 1.5) !important;
padding-top: ($spacer-y * 1.5) !important;
padding-bottom: ($spacer-y * 1.5) !important;
}
.p-2 {
padding: ($spacer-y * 2) ($spacer-x * 2) !important;
}
Horizontal centering (.mx-auto class)
Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content by setting the horizontal margins to auto
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap CSS --> <!-- Bootstrap 4 alpha CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"> <title>Spacing Classes</title> </head> <body> <br> <br> <div class="mx-auto" style="width: 500px;">Horizontal Element Centering</div> <br> <br> <!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> </body> </html>
Output: – When we execute the html code above, we will obtain the following output.
Responsive utility classes
Bootstrap v4 has various utility classes which display or hide the content on the viewport of the device via media query. These utility classes help in faster mobile-friendly development. Bootstrap 4.0.0 also includes other utility classes which help to toggle content when they are printed. Such utility classes are recommended to use on need basis in order to mitigate the creation of a different version of the same website. The following are the available Utility classes in Bootstrap v4 that interact via Media queries.
- The .hidden-*-up classes are used to hide the element when the viewport is at the given breakpoint or wider than that. E.g., .hidden-md-up will hide an element on medium, large, and extra-large viewports on various devices.
- The .hidden-*-down classes are used to hide the element when the viewport is at the given breakpoint or smaller than that. E.g., .hidden-md-down will hide an element on extra-small, small, and medium viewports on various devices.
- This is to be noted that there are no explicit “visible”/”show” responsive utility classes and we can make an element visible if we don’t hide it at that breakpoint size.
- We can use the combination of one .hidden-*-up class with one .hidden-*-down class in order to show an element only on a given interval of screen sizes. E.g., .hidden-sm-down.hidden-xl-up shows the element only on medium and large viewports on various devices.
- Lastly, we should use our custom CSS when these utility classes fail to accommodate any less common case where an element’s visibility can’t be expressed as a single contiguous range of viewport breakpoint sizes.
The following is the summary of Utility classes in Bootstrap v4 for Media Queries.
|
Utility Classes |
Extra Small Devices |
Small Devices |
Medium Devices |
Large Devices |
Extra-large Devices |
|
.hidden-xs-down |
Hidden |
Visible |
Visible |
Visible |
Visible |
|
.hidden-sm-down |
Hidden |
Hidden |
Visible |
Visible |
Visible |
|
.hidden-md-down |
Hidden |
Hidden |
Hidden |
Visible |
Visible |
|
.hidden-lg-down |
Hidden |
Hidden |
Hidden |
Hidden |
Visible |
|
.hidden-xl-down |
Hidden |
Hidden |
Hidden |
Hidden |
Hidden |
|
.hidden-xs-up |
Hidden |
Hidden |
Hidden |
Hidden |
Hidden |
|
.hidden-sm-up |
Visible |
Hidden |
Hidden |
Hidden |
Hidden |
|
.hidden-md-up |
Visible |
Visible |
Hidden |
Hidden |
Hidden |
|
.hidden-lg-up |
Visible |
Visible |
Visible |
Hidden |
Hidden |
|
.hidden-xl-up |
Visible |
Visible |
Visible |
Visible |
Hidden |
Print Classes
In addition to the regular utility classes, we may also use the following print classes for toggling the content for print.
|
Print Class |
Browser |
|
|
.visible-print-block |
Hidden |
Visible (as display: block) |
|
.visible-print-inline |
Hidden |
Visible (as display: inline) |
|
.visible-print-inline-block |
Hidden |
Visible (as display: inline-block) |
|
.hidden-print |
Visible |
Hidden |
Source Code for About Spacings and Responsive
Conclusion
In this chapter, first we discussed the spacing shorthand classes and how they work along with an example. Next, we discussed about the horizontal centering (.mx-auto class) along with an example. Lastly, we summarized various responsive utility and print classes which are introduced in Bootstrap v4.
