Learn How to Use Media Queries in Bootstrap v4

1
10902
Learn-How-to-Use-Media-Queries-in-Bootstrap-v4-740X296

Learn-How-to-Use-Media-Queries-in-Bootstrap-v4-740X296

Media Query
Media Query is a CSS technique that was introduced in CSS3, which allows application of the stylesheet properties on the web component based on the size of the viewport. In other words, it first detects the size of the screen of the device (smart phones, tablets, laptop, etc.) and based on that, it applies the stylesheet properties (component display features on web browser) to the web components present on the webpage.

CSS syntax is the @media rule that includes a block of CSS properties when the viewport size condition becomes true. Let’s understand this concept better with the help of following examples.

Output: It is bit tricky here. I would suggest using Google Chrome, where you can resize the browser window easily with the help of resize button present at its top right corner as shown below.
Case 1: When the size of the viewport (here browser) is greater than 400 pixels then the background color visible is yellow.
Case 2: Use the browser’s resize button and reduce the width of the viewport to less than 400 pixels. There we may notice the background color will get changed to green.

The following are viewport screenshots for both the case.

Screenshot for the case 1, when the size of the viewport is greater than 400 pixels.

MediaQueries2

Screenshot for the case 2, when the size of the viewport is less than 400 pixels.
MediaQueries1

Adding a breakpoint to Media Queries
Breakpoint is a method where we define the maximum or minimum width of the viewport of screen that triggers the change of CSS properties. The following are the media queries that could be used in our CSS files in order to create the key breakpoints in the grid system of the Bootstrap. In Bootstrap, any viewport which is less than the size of 768 pixels (i.e. extra small devices such as phones, etc.), no media queries are required as this is the default in Bootstrap.

Bootstrap v4 with SAAS
When using Bootstrap with SAAS, we are writing our source CSS in SASS therefore, all of our media queries are available via SASS mixins as shown below.

Difference between Bootstrap 3.3.6 vs Bootstrap 4.0.0 Breakpoints
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.
We need to first understand the grid breakpoints within Bootstrap v4 before we move on to our work with Sass files for media queries. The following is the neat table that show 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

When we are using Bootstrap 3.3.6 with SAAS, our media queries will have the min-width or max-width width specified in pixels as shown below.

When we are using Bootstrap 4.0.0 with SAAS, our media queries will have the min-width or max-width width specified in relative em/rem based units as shown below.

This is to be noted that extra-large devices greater than 75em of size does not require media query since the extra-large breakpoint has no upper bound on its width.

Example on Media Queries using Bootstrap v4.0.0
In the following example, when we change the size of the view port (here browser), we will observe the changing background color depending on the size of the viewport or screen.

Bootstrap Utility classes using media Queries
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 be used on the 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 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 Media Queries in Bootstrap v4

Conclusion
In this chapter, we have gone over the media queries and how they work along with examples. Following this, we discussed the differences between the breakpoint units for Bootstrap 3.3.6 vs 4.0.0 that could be used with SAAS media queries. Lastly, we summarized various utility and print class that are introduced in Bootstrap v4.

1 COMMENT

Leave a Reply to Malik Ahmed Cancel reply

Please enter your comment!
Please enter your name here