Useful Bootstrap 4 Code Snippets

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	*	xs hidden
sm	*	sm hidden
md	*	md hidden
lg	*	lg hidden
xl	*	xl hidden

Show Elements on a Specific Screen Size

Hidden	Visible	Code
*	xs	xs visible
*	sm	sm visible
*	md	md visible
*	lg	lg visible
*	xl	xl visible

Hide Elements Small Screens, Show on Big Screens

Hidden	Visible	Code
xs	>=sm	h: xs, v: >=sm
<=sm	>=md	h: <=sm, v: >=md
<=md	>=lg	h: <=md, v: >=lg
<=lg	xl	h: <=lg, v: xl

Hide Elements Big Screens, Show on Small Screens

Hidden	Visible	Code
>=sm	xs	v: xs, h: >=sm
>=md	<=sm	v: <=sm, h: >=md
>=lg	<=md	v: <=md, h: >=lg
xl	<=lg	v: <=lg, h: xl

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