Bootstrap 4 Utility Classes - Part Two

In this article, we will learn about Bootstrap 4 utility classes or Helper classes. This is the second part of this article series of Bootstrap 4 utility classes. In this Part we will discuss height and width classes, shadow class and Visibility class. Utility classes is useful to add style quickly without writing CSS classes.

In this article, we will learn about Bootstrap 4 utility classes or Helper classes. This is the second part of this article series of Bootstrap 4 utility classes. In this part, we will discuss the height and width classes, shadow classes and visibility classes. Utility classes are extremely useful to add a style quickly without writing the CSS classes.

In this article, we will discuss the following classes,

  • Bootstrap 4 height and width
  • Shadow classes
  • Visibility classes

Bootstrap 4 height and width

By using these classes, we can set the height and width of an element.

Width

To set the width, Bootstrap 4 provides 5 classes.

  • .w-25
    To set width to 25%
  • .w-50
    To set width to 50%
  • .w-75
    To set width to 75%
  • .w-100
    To set width to 100%
  • .mw-100
    To set max width to 100%

Height

To set the height, Bootstrap 4 provides 5 classes

  • .h-25
    To set height to 25%
  • .h-50
    To set height to 50%
  • .h-75
    To set height to 75%
  • .h-100
    To set height to 100%
  • .mh-100
    To set max height to 100 %
Open Visual Studio and create a new project -- rename it as Bootstrap4 and add the reference of the Bootstrap 4 file into the page's head section.
  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />      
  2.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>      
  3.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>      
  4.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  

Now, add 5 divs in the body section and add each width classe to each div respectively.

  1. <div class="w-25 bg-success">Width 25%</div>  
  2. <div class="w-50 bg-success ">Width 50%</div>  
  3. <div class="w-75 bg-success">Width 75%</div>  
  4. <div class="w-100 bg-success">Width 100%</div>  
  5. <div class="mw-100 bg-success">Max Width 100%</div>  
Complete Code
  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title>Bootstrap 4 </title>  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>  
  9.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  10. </head>  
  11. <body>  
  12.     <form id="form1" runat="server">  
  13.         <div class="container">  
  14.             <div class="w-25 bg-success">Width 25%</div>  
  15.             <div class="w-50 bg-success ">Width 50%</div>  
  16.             <div class="w-75 bg-success">Width 75%</div>  
  17.             <div class="w-100 bg-success">Width 100%</div>  
  18.             <div class="mw-100 bg-success">Max Width 100%</div>  
  19.         </div>  
  20.     </form>  
  21. </body>  
  22. </html>  

Run the project and check the result.

Bootstrap 4 Utility Classes 
Similarly, we can add the height classes to 5 div elements.
 
Complete Code 
  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title>Bootstrap 4 </title>  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>  
  9.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  10. </head>  
  11. <body>  
  12.     <form id="form1" runat="server">  
  13.         <div style="height:500px;background-color:blue">  
  14.             <div class="h-25 d-inline-block  bg-success">Height 25%</div>  
  15.             <div class="h-50 d-inline-block  bg-success">Height 50%</div>  
  16.             <div class="h-75 d-inline-block  bg-success">Height 75%</div>  
  17.             <div class="h-100 d-inline-block bg-success">Height 100%</div>  
  18.         </div>  
  19.     </form>  
  20. </body>  
  21. </html>  

Run the project and check the result.

Bootstrap 4 Utility Classes 

Bootstrap Shadow classes

These classes are used to add shadow to an element.
 
.shadow* 

Add 4 div elements and add all 4 shadow classes to them one by one.

  1. <div class="shadow-none p-5 mb-5 rounded">Shadow None</div>  
  2.   <div class="shadow-sm p-5 mb-5 rounded">Shadow Small</div>  
  3.   <div class="shadow p-5 mb-5 rounded">Shadow</div>  
  4.   <div class="shadow-lg p-5 mb-5 rounded">Shadow Larger</div>  
Complete Code
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Bootstrap 4</title>  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>  
  9.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  10. </head>  
  11. <body>  
  12.     <div class="container">  
  13.         <div class="shadow-none p-5 mb-5 rounded">Shadow None</div>  
  14.         <div class="shadow-sm p-5 mb-5 rounded">Shadow Small</div>  
  15.         <div class="shadow p-5 mb-5 rounded">Shadow</div>  
  16.         <div class="shadow-lg p-5 mb-5 rounded">Shadow Larger</div>  
  17.     </div>  
  18. </body>  
  19. </html>  
Bootstrap 4 Utility Classes
 
Bootstrap Visibility classes
 
Bootstrap provides visible and invisible classes also to control the visibility.

  • .visible
  • .invisible

Add two divs and add visible and invisible classes to those.

  1. <div class="visible p-4 bg-primary">Visible</div>  
  2.       <div class="invisible bg-primary">Invisible</div>  
Complete Code
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Bootstrap 4</title>  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>  
  9.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  10. </head>  
  11. <body>  
  12.     <div class="container">  
  13.          <div class="visible p-4 bg-primary">Visible</div>  
  14.         <div class="invisible bg-primary">Invisible</div>  
  15.     </div>  
  16. </body>  
  17. </html>   
Bootstrap 4 Utility Classes

Summary

In this article, we learned about Bootstrap 4 height, width, visibility, and shadow utility classes.