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

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

Width

To set the width, Bootstrap 4 provides 5 classes.

Height

To set the height, Bootstrap 4 provides 5 classes

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