Logo

Bootstrap 4 Utilities

Bootstrap 4 Utilities

Bootstrap 4 utilities also known as helper classes that are used to add more style to the components. Utilities are used to make the website or webpage more stylish or elegant. It also makes the responsive elements.

Borders – Borders classes are used to style the border of the elements such as add or remove the border, adjust border-radius, etc.

Example 

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Utilities Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
   <style>
   .border { 
     display: inline-block;
     width: 70px;
     height: 70px;
     margin: 6px;
   }
   </style>
 </head>
 <body> 
 <div class="container">
   <h2>Borders</h2>
   <span class="border"></span>
   <span class="border border-0"></span>
   <span class="border border-top-0"></span>
   <span class="border border-right-0"></span> 
   <span class="border border-bottom-0"></span>
   <span class="border border-left-0"></span>
 </div>
 </body>
 </html>

Output

Bootstrap Utilities

Float and Clearfix – Float class is used to set the position of the element to the left or right. The .float-right class is used to float the element to the right and .float-left class is used to float the element to the left. Clearfix is used to prevent the collapsing between parent and child element. The .clearfix class is used to remove float.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Utilities Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </head>
 <body>
 <div class="container"> 
   <h2>Float</h2>
   <div class="clearfix">
     <span class="float-left">Float left</span>
     <span class="float-right">Float right</span>
   </div>
 </div>
 </body>
 </html>

Output

Bootstrap Utilities

Responsive Float - Bootstrap 4 offers helper classes to float an element to the left or right according to the screen size with responsive behavior. The .float-*-right class is used to float the element to the right. You do not need to add the .float-*-left class because the default position of the element is left of the viewport or screen.

Where, * = sm, md,  lg, and xl.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Utilities Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </head>
 <body> 
 <div class="container">
   <h2>Responsive Floats</h2>
   <p>Resize the browser window to see the effect.</p> 
   <div class="clearfix">
     <div class="float-sm-right">Float right on small screens or wider</div><br>
     <div class="float-md-right">Float right on medium screens or wider</div><br> 
     <div class="float-lg-right">Float right on large screens or wider</div><br>
     <div class="float-xl-right">Float right on extra large screens or wider</div><br>
     <div class="float-none">Float none</div>
   </div>
 </div>
 </body>
 </html>

Output

Bootstrap Utilities

Center align – You can also place your content or element in the center horizontally of the viewport or screen. Add the .mx-auto class to make the content center aligned.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Utilities Example</title>
   <meta charset="utf-8"> 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </head> 
 <body>
 <div class="container">
   <h1>Horizontal Centering</h1>
   <p>Center an element with the .mx-auto class:</p>
   <div class="mx-auto bg-primary" style="width:150px">Centered</div>
 </div>
 </body> 
 </html>

Output

Bootstrap Utilities

Width – Bootstrap allows you to set the width of the element as per the need. To set the width of the element add .w-* class to the <div> element.

Where, * = 25, 50, 75, 100.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Utilities Example</title>
   <meta charset="utf-8"> 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </head> 
 <body>
 <div class="container">
   <h1>Width Utilities</h1>
   <div class="w-25 bg-secondary">Width 25%</div>
   <div class="w-50 bg-secondary">Width 50%</div>
   <div class="w-75 bg-secondary">Width 75%</div>
   <div class="w-100 bg-secondary">Width 100%</div>
   <div class="mw-100 bg-secondary">Max Width 100%</div> 
 </div>
 </body>
 </html>

Output

Bootstrap Utilities

Height – Bootstrap 4 allows you to set the height of the element. To set the height of the element add .h-* class and for max- height add .mh-100 class.

Where, * = 25, 50, 75, 100.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Utilities Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </head> 
 <body>
 <div class="container">
   <h1>Height Utilities</h1>
   <div style="height:200px;background-color:#ddd">
     <div class="h-25 d-inline-block p-2 bg-primary">Height 25%</div>
     <div class="h-50 d-inline-block p-2 bg-primary">Height 50%</div>
     <div class="h-75 d-inline-block p-2 bg-primary">Height 75%</div>
     <div class="h-100 d-inline-block p-2 bg-primary">Height 100%</div> 
     <div class="mh-100 d-inline-block p-2 bg-primary" style="height:500px">Max Height 100%</div>
   </div>
 </div>
 </body>
 </html>

Output

Bootstrap Utilities

Shadows – Bootstrap 4 allows you to give the shadow effect to the elements. To create the shadow effect, add the .shadow class to the <div> element.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Utilities Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </head>
 <body>
 <div class="container"> 
   <h1>Shadows</h1>
   <div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
   <div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
   <div class="shadow p-4 mb-4 bg-white">Default shadow</div>
   <div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
 </div> 
 </body>
 </html>

Output

Bootstrap Utilities

Vertical Align – You can align your content or element vertically or inline. To align the content vertically, add class .align-* to the element.

Where, * = baseline, top, middle, bottom, text-top, text-bottom, etc.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Utilities Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </head> 
 <body>
 <div class="container">
   <h1>Vertical Align</h1><br>
   <span class="align-baseline">baseline</span>
   <span class="align-top">top</span>
   <span class="align-middle">middle</span>
   <span class="align-bottom">bottom</span>
   <span class="align-text-top">text-top</span> 
   <span class="align-text-bottom">text-bottom</span>
 </div>
 </body>
 </html>

Output

Bootstrap Utilities

Responsive Embeds – You can add the responsiveness to the videos or images. If you resize the video or images, it will not overlap its parent. The video or image adjusts their width automatically according to the width of the parent.

  • To create the responsive embeds, add the .embed-responsive class along with the .embed-responsive-* (* = ratio) to the parent element.

Where, * = 21by9, 16by9, 4by3, and 1by1.

  • Add the .embed-responsive-item class to the <iframe> or <video> element.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Utilities Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </head>
 <body>
 <div class="container mt-3"> 
   <h2>Responsive Embed</h2><br>
   <div class="row">
     <div class="col-md-3">
       <h6>Aspect ratio 1:1</h6>
       <div class="embed-responsive embed-responsive-1by1">
       <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/wTPmrcL47cE"></iframe> 
       </div>
     </div>
     <div class="col-md-3">
       <h6>Aspect ratio 4:3</h6> 
         <div class="embed-responsive embed-responsive-4by3">
           <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/wTPmrcL47cE"></iframe>
         </div> 
     </div>
     <div class="col-md-3">
       <h6>Aspect ratio 16:9</h6>
         <div class="embed-responsive embed-responsive-16by9"> 
           <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/wTPmrcL47cE"></iframe>
         </div>
     </div>
     <div class="col-md-3">
       <h6>Aspect ratio 21:9</h6>
         <div class="embed-responsive embed-responsive-21by9">
           <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/wTPmrcL47cE"></iframe> 
         </div>
     </div>
   </div>
   </div>
 </body>
 </html>

Output

Bootstrap Utilities

Visibility - Bootstrap 4 provides some classes that help you to make the element visible or invisible. To make the element visible, add .visible class to the <div> element. To make the element invisible, add the .invisible class to the <div> element.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Utilities Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </head>
 <body>
 <div class="container">
   <h1>Visibility</h1><br>
   <div class="visible bg-primary">I am visible</div> 
   <div class="invisible bg-primary">I am invisible</div>
 </div>
 </body>
 </html>

Output

Bootstrap Utilities

Close Icon - The close icon is basically used in the modal or alerts. The default position of the close (‘x’) is right. The &times; symbol is used to create the actual icon. To create the close icon, add the .close class along with the type=”button” attribute to the <button> element.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Utilities Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </head>
 <body> 
 <div class="container">
   <h1>Close Icon</h1>
   <div class="clearfix">
     <button type="button" class="close">×</button>
   </div>
 </div>
 </body>
 </html>

Output

Bootstrap Utilities

Block Elements – You can also convert an element into the block element. Add the .d-*-block class to control the action of the element (when it acts as a block or when not). To create a block element, add .d-block class to the element.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Utilities Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </head>
 <body> 
 <div class="container mt-3">
   <h2>Display Utilities</h2>
   <span class="d-block bg-primary">d-block</span>
   <span class="d-sm-block bg-primary">d-sm-block</span>
   <span class="d-md-block bg-primary">d-md-block</span>
   <span class="d-lg-block bg-primary">d-lg-block</span> 
   <span class="d-xl-block bg-primary">d-xl-block</span>
 </div>
 </body>
 </html>

Output

Bootstrap Utilities

Related Topics

Difference between Bootstrap and WordPress

What is WordPress? WordPress is a free open-source CMS (Content Management System) that is written using Hypertext Pre-processor (PHP) and is paired with MySQL and is supported with HTTPS (Hypertext Transfer...

3 minutes read.

Bootstrap 4 Flex

Bootstrap 4 Flex Flex is a Bootstrap 4 component used to manage the layout, navigation bar, grid columns, sizing, alignment, and other components. The flexbox or flex utility is the replacement...

26 minutes read.

Bootstrap 4 Filters

 Bootstrap 4 Filters Bootstrap 4 provides a filter component that is used to search an element from a list, table, etc. Bootstrap does not contain any component or utility that helps...

5 minutes read.

Bootstrap Datepicker

What is a Bootstrap Datepicker? It is used to display a calendar with the date, month, and time from a dropdown menu. We will use an example to see how the date...

5 minutes read.

Bootstrap 4 Margin classes

Bootstrap 4 contains a variety of brief, responsive margin and padding utility classes to change the appearance of an element. The Bootstrap 4 margin classes use for the outer spacing of...

8 minutes read.

Bootstrap 4 Tutorial

What is Bootstrap? Bootstrap is a CSS (Cascading Style Sheets) framework, which is used to develop a responsive website. It is an open-source and mobile-first front-end framework. It has design templates that are based...

4 minutes read.

Bootstrap 4 Buttons

Bootstrap Buttons Bootstrap provides many custom button styles. These buttons are used in forms and dialog boxes for actions. Bootstrap offers various predefined classes for providing styles to buttons. There are many classes that are used...

7 minutes read.

Bootstrap Glyphicons

Bootstrap Glyphicon is used to create different type of glyphicons It is used in the web project. It provides 260 Glyphicons from the Glyphivons Halflings set. There are various examples of...

1 minute read.

Bootstrap First Example

1) Add HTML5 doctype Before starting the example of Bootstrap, we should know about the some basic rules of Bootstrap. We have to add HTML5 doctype with lang element and CSS properties. <!DOCTYPE html>   <html lang="en">     <head>       <meta charset="utf-8">      </head>   </html> 2) Bootstrap...

2 minutes read.

Bootstrap 4 Colors

Bootstrap 4 Colors Bootstrap 4 consists of classes that are used to set colors according to the context of the element, and with the help of these classes, we can read...

2 minutes read.

Bootstrap 4 Content

Typography Typography is used for styling and formatting the content. It also helps in creating customized headings, sub-headings, lists, paragraphs, etc. Headings Bootstrap 4 offers HTML heading <h1> to <h6> that has bolder...

8 minutes read.

Bootstrap 4 Utilities

Bootstrap 4 Utilities Bootstrap 4 utilities also known as helper classes that are used to add more style to the components. Utilities are used to make the website or webpage more stylish or elegant....

10 minutes read.

Bootstrap Time Picker Example

What is a Bootstrap Time picker? It is used to display the time in hours, minutes and seconds from a dropdown menu. In this section, we will create an example to...

4 minutes read.

Bootstrap Searchable Dropdown Menu

Searchable Dropdown Menu When we click on the dropdown button/arrow in this dropdown menu, an input field will pop up with all the dropdown items listing inside. If we type in...

5 minutes read.

Bootstrap 4 Inputs

Bootstrap Inputs Bootstrap Form Inputs – Several pre-defined input types are available in HTML and Bootstrap. These input types help in styling the forms. When an input type is specified in the form, it means...

10 minutes read.

Dropdown & Dropup

Bootstrap Dropdowns The bootstrap dropdown menu is used to create a toggleable menu. It provides users to choose one value from a predefined list. Before creating dropdown menu, we have to know...

3 minutes read.

Bootstrap Navigation bar

Navigation Bars In Bootstrap, We can create navigation bar like a navigation header. It is placed at the top of the page. We can collapse or extend it according to screen...

3 minutes read.

Bootstrap Tables

We can create different types of responsive and awesome bootstrap table like: striped , border etc. Bootstrap Basic Table We can create a basic bootstrap table by using its class .table. It has...

3 minutes read.

Bootstrap 4 Icons

Bootstrap 4 Icons Bootstrap 3 contains the default icon library. But in bootstrap 4, you have to include the external icon library by yourself. Many free icon libraries are available such...

2 minutes read.

Bootstrap Wells

In Bootstrap, well are used to add a rounded border around an element. It is default some padding and gray background color. It is like a container that displays the content....

1 minute read.