Post
Ask Question

Bootstrap 4 Utility Classes - Part Four

In this write-up, we will learn about Bootstrap 4 utility classes or helper classes. This is the fourth part of this series of Bootstrap 4 utility classes. In this part we will discuss text classes, block element classes, vertical align classes and close icon classes. Utility classes are useful to add style quickly without writing CSS classes.

Text Classes

By using these classes we can quickly change Text style: 
  • .text-Left-Left alignment of Text
  • .text-center:Center alignment of Text
  • .text-right:Right alignment of Text
  • .text-justify:Justified text
  • .small :Smaller text
  • .font-italic: Italic text
  • .font-weight-bold:Bold Text
  • .font-weight-normal:Normal text
  • .text-lowercase:Lowercase Text
  • .text-uppercase:Uppercase Text
  • .text-capitalize:Capitalize Text
  • .list-inline:All list items in a single line
  • .list-unstyled :Remove default style of list

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 some Divs and their acting classes.

  1. <div class="text-left">Text Left</div>  
  2. <div class="text-right">Text Right</div>  
  3. <div class="text-center">Text Center</div>  
  4. <div class="text-justify">Justify Text</div>  
  5. <div class="font-italic">font-italic</div>  
  6. <div class="font-weight-bold">font-weight-bold</div>  
  7. <div class="text-lowercase">Lowercase Text</div>  
  8. <div class="text-capitalize">Capitalize Text</div>  
Complete Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Bootstarp 4</title>  
  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="text-left">Text Left</div>  
  15.     <div class="text-right">Text Right</div>  
  16.     <div class="text-center">Text Center</div>  
  17.     <div class="text-justify">Justify Text</div>  
  18.     <div class="font-italic">font-italic</div>  
  19.     <div class="font-weight-bold">font-weight-bold</div>  
  20.     <div class="text-lowercase">Lowercase Text</div>  
  21.     <div class="text-capitalize">Capitalize Text</div>  
  22. </body>  
  23.   
  24. </html>  

Close icon class

This class is useful to add a close icon.This is useful on alerts and Model Pops.
  1. <button type="button" class="close">  
  2.    <span>×</span>  
  3. </button>  

Block Element classes

These classes are used to create Block according to specific screen sizes. d-block class is default class of block element classes.

Now, add some Divs and block element classes.

  1. <span class="bg-primary d-block">d-block(Default Class)</span>  
  2. <span class="bg-primary d-sm-block">d-sm-block</span>  
  3. <span class="bg-primary d-md-block">d-md-block</span>  
  4. <span class="bg-primary d-lg-block">d-lg-block</span>  
Complete Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Bootstarp 4</title>  
  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.         <span class="bg-primary d-block">d-block(Default Class)</span>  
  16.         <span class="bg-primary d-sm-block">d-sm-block</span>  
  17.         <span class="bg-primary d-md-block">d-md-block</span>  
  18.         <span class="bg-primary d-lg-block">d-lg-block</span>  
  19.     </div>  
  20. </body>  
  21.   
  22. </html>   
Run the project and check the result,
 
Bootstrap 4 Utility Classes 
Bootstrap 4 Utility Classes 
 
Vertical alignment classes
 
These classes are useful to align elements.

These classes are:

  • .align-baseline – align to the baseline
  • .align-top – align to the top
  • .align-text-top – align text to the top
  • .align-bottom – align to the bottom
  • .align-text-bottom – align text to the bottom of the line
  • .align-middle – align to the middle

 

Add theses classes in Html,
 
Complete code
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Bootstrap 4</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.         <span class="bg-primary align-baseline">align to the baseline</span>  
  16.         <span class="bg-primary align-top">align to the top</span>  
  17.         <span class="bg-primary align-text-top">align text to the top</span>  
  18.         <span class="bg-primary align-bottom">align to the bottom</span>  
  19.         <span class="bg-primary align-text-bottom">align text to the bottom of the line</span>  
  20.         <span class="bg-primary align-middle">align to the middle</span>  
  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 text utility classes and block element classes.
Next Recommended Reading Bootstrap 4 Card Classes