Post
Ask Question

Bootstrap 4 Utility Classes - Part Three

In this write-up, we will learn about Bootstrap 4 utility classes or Helper classes. This is the third part of this article series of Bootstrap 4 utility classes. In this part, we will discuss spacing, position, and Background Color utility classes. Utility classes are useful to add style quickly without writing any CSS classes.

Bootstrap spacing classes

Bootstrap 4 provides classes to set the responsive padding and margin.
 
Syntax
 
{property}{sides} – {breakpoint} – {sides}
  • Property: padding or margin

    • m - margin
    • p - padding

  • Sides:Top,botton,left,right

    • t - margin-top or padding-top
    • b - margin-bottom or padding-bottom
    • l - margin-left or padding-left
    • r - margin-right or padding-right
    • x – margin *-left and *-right or padding *-left and *-right

  • Breakpoint:Xs,sm,md,lg,xl

    • xs <=576px
    • sm>=576px
    • md>=768px
    • lg>=992px
    • xl>=1200px

  • Size:size may be 0,1,2 etc.

    • 0 - margin or padding to 0
    • 1 - margin or padding to .25rem
    • 2 - sets margin or padding to .5rem
    • 3 - sets margin or padding to 1rem
    • auto - sets margin to auto
Open Visual Studio and create a new project. Rename it as Bootstrap4 and add the reference of the Bootstrap 4 files into the page's head section.
 
Now, add 3 Divs and their acting classes.
  1. <div class="pt-3 bg-success">top padding</div>  
  2. <div class="p-3 bg-success">all size padding</div>  
  3. <div class="m-3 bg-success">all side margin</div>  
  4. <!DOCTYPE html>  
  5. <html>  
  6.   
  7. <head>  
  8.     <meta charset="utf-8" />  
  9.     <title>Bootstrap 4</title>  
  10.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  11.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  12.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>  
  13.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  14. </head>  
  15.   
  16. <body>  
  17.     <div class="container">  
  18.         <div class="pt-3 bg-success">top padding</div>  
  19.         <div class="p-3 bg-success">all size padding</div>  
  20.         <div class="m-3 bg-success">all side margin</div>  
  21.     </div>  
  22. </body>  
  23.   
  24. </html>  
Run the project and check the result.
 
Bootstrap 4 Utility Classes 
 
Position Classes
 
These classes are useful to set the element position.
  • fixed-top: This class is used to fix an element on the top of the page. This class is useful in creating a fixed header.
  • fixed-bottom: This class is used to fix an element on the bottom of the page. This class is useful in creating a fixed footer.
  • sticky-top

Now, let us create a navigation bar, add fixed top class, create a footer, and add a fixed bottom.

Header
  1. <nav class="fixed-top navbar navbar-expand bg-dark ">  
  2.     <ul class="navbar-nav">  
  3.         <li class="nav-item">  
  4.             <a class="nav-link" href="#Home">Home</a>  
  5.         </li>  
  6.         <li class="nav-item">  
  7.             <a class="nav-link" href="#Contact">Contact</a>  
  8.         </li>  
  9.         <li class="nav-item">  
  10.             <a class="nav-link" href="#About">About</a>  
  11.         </li>  
  12.         <li class="nav-item">  
  13.             <a class="nav-link" href="#Career">Career</a>  
  14.         </li>  
  15.     </ul>  
  16. </nav>  
Footer
  1. <nav class="fixed-bottom navbar navbar-expand bg-dark ">  
  2.     <ul class="navbar-nav">  
  3.         <li class="nav-item">  
  4.             <a class="nav-link" href="#Copyrights">Copyrights</a>  
  5.         </li>  
  6.         <li class="nav-item">  
  7.             <a class="nav-link" href="#2018">2018</a>  
  8.         </li>  
  9.     </ul>  
  10. </nav>  
Complete Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <meta charset="utf-8" />  
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  8.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  9.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body style="height:2000px">  
  14.     <nav class="fixed-top navbar navbar-expand bg-dark ">  
  15.         <ul class="navbar-nav">  
  16.             <li class="nav-item">  
  17.                 <a class="nav-link" href="#Home">Home</a>  
  18.             </li>  
  19.             <li class="nav-item">  
  20.                 <a class="nav-link" href="#Contact">Contact</a>  
  21.             </li>  
  22.             <li class="nav-item">  
  23.                 <a class="nav-link" href="#About">About</a>  
  24.             </li>  
  25.             <li class="nav-item">  
  26.                 <a class="nav-link" href="#Career">Career</a>  
  27.             </li>  
  28.         </ul>  
  29.     </nav>  
  30.     <div class="container-fluid" style="margin-top:100px;padding-left:40px;"> In this article, we will learn how to Update the data from MongoDB Using Robo 3T. We will learn from the basics because I have written this article focusing on the beginners </div>  
  31.     <nav class="fixed-bottom navbar navbar-expand bg-dark ">  
  32.         <ul class="navbar-nav">  
  33.             <li class="nav-item">  
  34.                 <a class="nav-link" href="#Copyrights">Copyrights</a>  
  35.             </li>  
  36.             <li class="nav-item">  
  37.                 <a class="nav-link" href="#2018">2018</a>  
  38.             </li>  
  39.         </ul>  
  40.     </nav>  
  41. </body>  
  42.   
  43. </html>  
Now, let us run the project and check the result.
 
 Bootstrap 4 Utility Classes
 
Background Colors
 
These classes are useful to set the background colors

  • .bg-primary
  • .bg-secondary
  • .bg-success
  • .bg-danger
  • .bg-info
  • .bg-warning
  • .bg-dark
Let us add some divs and add these classes.
  1. <div class="bg-primary ">primary</div>  
  2. <div class="bg-secondary ">secondary</div>  
  3. <div class="bg-success ">success</div>  
  4. <div class="bg-danger ">danger</div>  
  5. <div class="bg-info ">info</div>  
  6. <div class="bg-warning ">warning</div>  
Complete Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <meta charset="utf-8" />  
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  8.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  9.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="container">  
  15.         <div class="bg-primary ">primary</div>  
  16.         <div class="bg-secondary ">secondary</div>  
  17.         <div class="bg-success ">success</div>  
  18.         <div class="bg-danger ">danger</div>  
  19.         <div class="bg-info ">info</div>  
  20.         <div class="bg-warning ">warning</div>  
  21.     </div>  
  22. </body>  
  23.   
  24. </html>  
Run the project and check the result.
 
Bootstrap 4 Utility Classes 

Summary

In this blog, we learned about spacing classes, position classes, and background classes in Bootstrap.
Next Recommended Reading Bootstrap 4 Card Classes