Post
Ask Question

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