Responsive Utility Classes

Introduction

Bootstrap contains a lot of helper classes that make the life of a front-end developer a lot less tedious by cutting down a lot of redundant CSS and JS. Similarly, the bootstrap utility class helps the developer make the website more responsive with just one utility class. With the help of these classes, the developer can save the hassle of writing multiple codes for different screen aspect ratios.

Visibility and Invisibility

This section will discuss utility classes that restrict displaying certain blocks based on the screen aspect ratio and classes that hide particular blocks.

CLASSES

EXTRA SMALL DEVICES

(<786 pixels)

SMALL DEVICES

(>= 786 pixels)

MEDIUM DEVICES

(>=992 pixels)

LARGE DEVICES

(>=1200 pixels)

.visible-xsVisibleHiddenHiddenHidden
.visible-smHiddenVisibleHiddenHidden
.visible-mdHiddenHiddenVisibleHidden
.visible-lgHiddenHiddenHiddenVisible
.hidden-xsHiddenVisibleVisibleVisible
.hidden-smVisibleHiddenVisibleVisible
.hidden-mdVisibleVisibleHiddenVisible
.hidden-lgVisibleVisibleVisibleHidden

 

 

 

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>CodingNinjas</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style media="screen">
    body{
      padding : 20px;
    }
  </style>
</head>
<body>
  <h1 class="visible-xs bg-danger">This text is shown only on an EXTRA SMALL screen.</h1>
  <h1 class="visible-sm bg-info">This text is shown only on a SMALL screen.</h1>
  <h1 class="visible-md bg-warning">This text is shown only on a MEDIUM screen.</h1>
  <h1 class="visible-lg bg-success">This text is shown only on a LARGE screen.</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>CodingNinjas</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style media="screen">
    body{
      padding : 20px;
    }
  </style>
</head>
<body>
  <h1 class="hidden-xs bg-danger">This text is hidden on an EXTRA SMALL screen.</h1>
  <h1 class="hidden-sm bg-info">This text is hidden on a SMALL screen.</h1>
  <h1 class="hidden-md bg-warning">This text is hidden on a MEDIUM screen.</h1>
  <h1 class="hidden-lg bg-success">This text is hidden on a LARGE screen.</h1>
</body>
</html>

Display Type Using Utility Class

Using the Bootstrap utility class, we can alter the display type depending upon the screen aspect ratio.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>CodingNinjas</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style media="screen">
    body {
      padding: 20px;
    }
    .padd{
      padding:20px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="visible-lg-inline-block visible-md-block bg-info padd">
    <h1>Block 1</h1>
    <h3>Hi, Ninja this is block 1</h3>
    <p>The display type is <b>inline-block</b> for large screen and <b>block</b> for medium screen sizes.</p>
  </div>
  <div class="visible-lg-inline-block visible-md-block bg-info padd">
    <h1>Block 2</h1>
    <h3>Hi, Ninja this is block 2</h3>
    <p>The display type is <b>inline-block</b> for large screen and <b>block</b> for medium screen sizes.</p>
  </div>
</body>
</html>

FAQ’s

  1. What are utility classes?
    These are classes that define a set of functions or methods that avoid recursion of code.
     
  2. What are Responsive Utility Classes?
    Bootstrap includes dozens of utility classes for faster mobile-friendly and responsive development for showing, hiding, aligning, and spacing content known as Responsive utility classes. With the help of these classes, the developer can save the hassle of writing multiple codes for different screen aspect ratios.
     
  3. What are the multiple screen aspect ratios?
    Based on the number of pixels, the screen sizes are split into four types: extra small, Small, Medium, and large. Extra Small screens have less than 786 pixels. Small are screens have greater than 786 pixels and less than 992 pixels. Medium ranges between 992 pixels and 1200. And large screens have greater than 1200 pixels. 

Key Takeaways

This Blog covered all the necessary points about the Bootstrap Utility Class with the required code snippets. This Blog listed out all the essential classes and their respective implementations in a very user-friendly way

Don’t stop here; check out Coding Ninjas for more unique courses and guided paths. Also, try CodeStudio for more exciting articles, interview experiences, and fantastic Data Structures and Algorithms problems.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think