Home Web Programming Tutorials Learn About Spacings and Responsive Utility Classes in Boostrap v4

Learn About Spacings and Responsive Utility Classes in Boostrap v4

0
1607
utility-classes

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.

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.

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

Output: – When we execute the html code above, we will obtain the following output.

capture

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

Print

.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.

NO COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Shares
Share This