Post
Ask Question

Bootstrap 4 Utility Classes - Part One

In this write-up, we will learn about Bootstrap 4 utility classes or helper classes. Utility classes are useful to add style quickly without writing any CSS class. By using utility classes, we can add and remove styles quickly and make the elements responsive.

In this article, we will discuss the following classes.

  • Border Classes
  • Float Classes

Border Classes

These classes are useful to add and remove border styles to an element,
  • .border 
    Adds a border to an element.
  • .border border -0
    Removes a border from an element.
  • .border border-right-0
    Removes border from the right side of an element.
  • .border border-left-0
    Removes the border from the left side of an element.
Open Visual Studio and create a new project. Rename it to Bootstrap4 and add the reference of Bootstrap 4 file into the head section of the page.
  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, let us add some style. 
  1. <style>  
  2.         .div {  
  3.             display: inline-block;  
  4.             width: 100px;  
  5.             height: 100px;  
  6.             margin: 10px;  
  7.         }  
  8.     </style>  
 Add some div in the Body section and apply these classes.
  1. <div class="div border">Border Utility Classes</div>  
  2.             <div class="div border border-0 ">Border Utility Classes</div>  
  3.             <div class="div border border-right-0">Border Utility Classes</div>  
  4.             <div class="div border border-bottom-0">Border Utility Classes</div>  
  5.             <div class="div border border-left-0">Border Utility Classes</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.     <style>  
  11.         .div {  
  12.             display: inline-block;  
  13.             width: 100px;  
  14.             height: 100px;  
  15.             margin: 10px;  
  16.         }  
  17.     </style>  
  18. </head>  
  19. <body>  
  20.     <form id="form1" runat="server">  
  21.         <div>  
  22.             <div class="div border">Border Utility Classes</div>  
  23.             <div class="div border border-0 ">Border Utility Classes</div>  
  24.             <div class="div border border-right-0">Border Utility Classes</div>  
  25.             <div class="div border border-bottom-0">Border Utility Classes</div>  
  26.             <div class="div border border-left-0">Border Utility Classes</div>  
  27.   
  28.         </div>  
  29.     </form>  
  30. </body>  
  31. </html>  

Run the code and check result.

Bootstrap 4 Utility Classes 

Border Radius classes

These classes are used to change the border radius,
  • .rounded
    By using this class, we can round all the corners of an element.
  • .rounded-right
    Rounds the right side border corners
  • .rounded-left
    Rounds the left side border corner
  • .rounded-0
    Removes the border radius
  • .rounder-circle
    Creates a circle 
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.     <style>  
  11.         .div {  
  12.             display: inline-block;  
  13.             width: 100px;  
  14.             width: 100px;  
  15.             height: 100px;  
  16.             margin: 10px;  
  17.         }  
  18.     </style>  
  19. </head>  
  20. <body>  
  21.     <form id="form1" runat="server">  
  22.         <div>  
  23.             <div class="div border rounded"></div>  
  24.             <div class="div border rounded-right "></div>  
  25.             <div class="div border rounded-left"></div>  
  26.             <div class="div border rounded-circle"> </div>  
  27.             <div class="div border rounded-0"></div>  
  28.   
  29.         </div>  
  30.     </form>  
  31. </body>  
  32. </html>  

Run the project and check the result.

Bootstrap 4 Utility Classes 

Border color classes

These classes are used to add the border color. 
  • .border-info
  • .border-primary
  • .border-danger
  • .border-dark
  • .border-success
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.     <style>  
  11.         .div {  
  12.             display: inline-block;  
  13.             width: 100px;  
  14.             width: 100px;  
  15.             height: 100px;  
  16.             margin: 10px;  
  17.         }  
  18.     </style>  
  19. </head>  
  20. <body>  
  21.     <form id="form1" runat="server">  
  22.         <div>  
  23.             <div class="div border border-info"></div>  
  24.             <div class="div border border-primary"></div>  
  25.             <div class="div border border-danger"></div>  
  26.             <div class="div border border-dark"> </div>  
  27.           </div>  
  28.     </form>  
  29. </body>  
  30. </html>  

Run the project and check the result

Bootstrap 4 Utility Classes 

Float Classes

These classes are useful to set float attribute of an element,
  • .float-right – float to the right
  • .float-left – float to the left
  • .float-none – no float 
  • .float-sm-right-– float to the right on small screen (screens size greater than 576px)
  • .float-md-right- float to the right on medium screen(screens size greater than 768px)
  • .float-lg-right- float to the right on large screen(screens size greater than 992px)
  • .float-xl-right- float to the right on extra large screen(screens size greater than 1200px)
 Add three divs and apply these classes on the div.
  1. <div class="float-right ">Bootstarp 4 float right Class</div><br />  
  2.           <div class="float-left">Bootstarp 4 Float Left Class</div><br />  
  3.           <div class="float-none">Bootstarp 4 Float None Class</div><br />  
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="float-right ">Bootstarp 4 float right Class</div><br />  
  15.             <div class="float-left">Bootstarp 4 Float Left Class</div><br />  
  16.             <div class="float-none">Bootstarp 4 Float None Class</div><br />  
  17.         </div>  
  18.     </form>  
  19. </body>  
  20. </html>  

 Run the project and check the result.

Bootstrap 4 Utility Classes 

Summary

In this blog, we learned about Bootstrap 4 border classes and float classes.