What are utility classes?

These are classes that define a set of functions or methods that avoid recursion of code.

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.

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.

Table of contents

Introduction

Visibility and Invisibility

Display Type Using Utility Class

FAQ’s

Key Takeaways

Last Updated: Mar 27, 2024

Responsive Utility Classes

Author Shaurya Singhal

Do you think IIT Guwahati certified course can help you in your career?

Yes

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-xs	Visible	Hidden	Hidden	Hidden
.visible-sm	Hidden	Visible	Hidden	Hidden
.visible-md	Hidden	Hidden	Visible	Hidden
.visible-lg	Hidden	Hidden	Hidden	Visible
.hidden-xs	Hidden	Visible	Visible	Visible
.hidden-sm	Visible	Hidden	Visible	Visible
.hidden-md	Visible	Visible	Hidden	Visible
.hidden-lg	Visible	Visible	Visible	Hidden

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

What are utility classes?
These are classes that define a set of functions or methods that avoid recursion of code.
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.
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 Coding Ninjas Studio for more exciting articles, interview experiences, and fantastic Data Structures and Algorithms problems.