In this post I collected a list of useful Snippets for Bootstrap 4 which I use regularly. Among these are:
- Detecting the current view port and screen size (xs, sm, md, lg or xl)
- Showing or hiding elements depending on the current viewport and screen size
Detect the display screen size and viewport
For debugging purposes during develop it can be very helpful to detect on which screen size or Bootstrap 4 view port (xs, sm, md, lg or xl) you currently are.
To detect it use the following code snippet on your website. It will automatically show you on which screen size you currently are.
<div class="text-center font-weight-bold"> <div class="d-block d-sm-none" style="background:lightcoral"> xs (up to 575px) </div> <div class="d-none d-sm-block d-md-none" style="background:lightgray"> sm (576px - 767px) </div> <div class="d-none d-md-block d-lg-none" style="background:plum"> md (768px - 991px) </div> <div class="d-none d-lg-block d-xl-none" style="background:khaki"> lg (992px - 1199px) </div> <div class="d-none d-xl-block" style="background:lightblue"> xl (1200px and up) </div> </div>
Hide and Show Bootstap Elements on Different Screen Size
Sometimes you want to only show or hide elements like buttons, links, or icons based on the screen size. The following 4 tables will help you select the right Bootstrap class to achieve your goal. You can read more on hiding elements in the Bootstrap documentation.
Hide Elements on a Specific Screen Size
Hidden | Visible | Code |
---|---|---|
xs | * |
|
sm | * |
|
md | * |
|
lg | * |
|
xl | * |
|
Show Elements on a Specific Screen Size
Hidden | Visible | Code |
---|---|---|
* | xs |
|
* | sm |
|
* | md |
|
* | lg |
|
* | xl |
|
Hide Elements Small Screens, Show on Big Screens
Hidden | Visible | Code |
---|---|---|
xs | >=sm |
|
<=sm | >=md |
|
<=md | >=lg |
|
<=lg | xl |
|
Hide Elements Big Screens, Show on Small Screens
Hidden | Visible | Code |
---|---|---|
>=sm | xs |
|
>=md | <=sm |
|
>=lg | <=md |
|
xl | <=lg |
|
Change CSS Class Depending on Screen Size
Sometimes you might need to change a css class depending on the size of the users screen. You might for example change or lower the font size of h1 tags on smaller screens such that the heading does not take as much space.
To do this you can use the @media query. First lets define a css class with properties that shall always hold.
/* CSS style which is always applied */ .size-depending-class { text-decoration:underline; }
On smaller screens we want to change the color to red and make the font size small
/* CSS style only for screen size <=sm */ @media (max-width: 767px) { .size-depending-class { color:red; font-size:10px; } }
On medium screens we want to increase the font size and change the color.
/* CSS style only for screen size md */ @media (min-width: 768px) and (max-width: 991px) { .size-depending-class { color:blue; font-size:30px; } }
On bigger screens we want to show the full font size
/* CSS style only for screen size >=lg */ @media (min-width: 992px) { .size-depending-class { color:green; font-size:50px; } }
By changing the min-width and max-width property you can define on which screen size the CSS properties should be valid. For Bootstrap 4 you can use the following breakpoints:
/* xs screens */ @media (max-width: 575px) { /*...*/ } /* sm screens */ @media (min-width: 576px) and (max-width: 767px) { /*...*/ } /* md screens */ @media (min-width: 768px) and (max-width: 991px) { /*...*/ } /* lg screens */ @media (min-width: 992px) and (max-width: 1199px) { /*...*/ } /* xl screens */ @media (min-width: 1200px) { /*...*/ } /* <=md screens */ @media (max-width: 991px) { /*...*/ } /* >=lg screens */ @media (min-width: 992px) { /*...*/ }
https://smartlazycoding.com/wp-content/uploads/2020/05/useful-bootstrap-code-snippets.html