Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :
InvestmentNovel

Latest Programming Tutorial Blog

Bootstrap 4 Utility Classes Tutorial With Example

/
/
/
83 Views

In Bootstrap 4 Utility Classes Tutorial With Example, you will learn how to create the utility classes with Bootstrap 4. Bootstrap 4 has a lot of utility/helper classes to quickly style elements without using any CSS code.

Bootstrap 4 Utility Classes Tutorial With Example

Bootstrap 4 offers a great range of utility classes. The classes make styling items easier and quicker without writing any new CSS.

#1: Bootstrap 4 Utility Classes Borders

Using Bootstrap 4 utility/helper classes you can add or delete borders of an HTML element.

Here’s the list of them:

  • .border – add a border to all sides of the element
  • .border border-0 – removes all borders
  • .border border-top-0 – adds the border to all sides but the top
  • .border border-bottom-0 – adds the border to all sides but the bottom
  • .border border-right-0 – adds the border to all sides but the right
  • .border border-left-0 – adds the border to all sides but the left

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<style>
  .border {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 6px;
  }
  </style>
<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-bottom-0"></span>
  <span class="border border-right-0"></span>
  <span class="border border-left-0"></span>
</div>
</body>
</html>

The example of a Bootstrap utility classes border will look like below screenshot.

Bootstrap 4 Utility Classes Border Example

#2: Border Color

You can add color to the border with any of the contextual border color classes.

This is the list of contextual classes that work with borders:

  • .border-primary 
  • .border-secondary 
  • .border-success 
  • .border-warning 
  • .border-danger 
  • .border-info 
  • .border-light 
  • .border-dark
  • .border-white

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<style>
  .border {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 6px;
  }
  </style>
<body>
<div class="container">
  <h2>Border Color</h2>
  <span class="border border-primary"></span>
  <span class="border border-secondary"></span>
  <span class="border border-success"></span>
  <span class="border border-warning"></span>
  <span class="border border-danger"></span>
  <span class="border border-info"></span>
  <span class="border border-light"></span>
  <span class="border border-dark"></span>
  <span class="border border-white"></span>
</div>
</body>
</html>

The example of a Bootstrap border color will look like below screenshot.

Bootstrap 4 Utility Classes Border Color Example

#3: Border Radius

It is possible to make corners of an element rounded by using .rounded classes.

  • .rounded – make all corner rounded
  • .rounded-top – rounds a top side corners
  • .rounded-right – rounds a right side corners
  • .rounded-bottom – rounds a bottom side corners
  • .rounded-left – rounds a left side corners
  • .rounded-circle – makes an element a circle
  • .rounded-0 – removes any rounded corners present on the element

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<style>
  span {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 6px;
    background-color: #556;
  }
  </style>
<body>
<div class="container">
  <h2>Border Radius</h2>
  <span class="rounded"></span>
  <span class="rounded-top"></span>
  <span class="rounded-right"></span>
  <span class="rounded-bottom"></span>
  <span class="rounded-left"></span>
  <span class="rounded-circle"></span>
  <span class="rounded-0"></span>
</div>
</body>
</html>

The example of a Bootstrap border-radius will look like below screenshot.

Bootstrap 4 Utility Classes Border Radius Example

#4: Bootstrap 4 Utility Classes Float and Clearfix

Bootstrap 4 allows you to set the float attribute of elements.

You should create the<div> container with the .clearfix class to remove floats that were defined before.

You can use a .float-left and .float-right classes to position your elements horizontally as you like.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></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>

The example of a Bootstrap utility classes float will look like below screenshot.

Bootstrap 4 Utility Classes Float Example

#5: Bootstrap 4 Utility Classes Responsive Float

Bootstrap 4 allows you to set floats responsively.

The following classes are:

  • .float-sm-right – apply float to screens bigger than 576px
  • .float-md-right – apply float to screens  bigger than 768px
  • .float-lg-right – apply float to screens bigger than 992px
  • .float-xl-right – apply float to screens bigger than 1200px
  • .float-none – no float applied

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
  <h2>Responsive Float</h2>
  <div class="clearfix">
    <div class="float-sm-right">Hello Investmentnovel</div><br>
    <div class="float-md-right">Hello Investmentnovel</div><br>
    <div class="float-lg-right">Hello Investmentnovel</div><br>
    <div class="float-xl-right">Hello Investmentnovel</div><br>
    <div class="float-none">Hello Investmentnovel</div>
  </div>
</div>
</body>
</html>

The example of a Bootstrap utility classes responsive float will look like below screenshot.

Bootstrap 4 Utility Classes Responsive Float Example

#6: Bootstrap 4 Utility Classes Center Align

You can center the element by using the .mx-auto class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
  <h1>Center</h1>
  <div class="mx-auto bg-info" style="width:200px">Center</div>
</div>
</body>
</html>

The example of a Bootstrap utility classes center align will look like below screenshot.

Bootstrap 4 Utility Classes Center Example

#7: Bootstrap 4 Utility Classes Width

Width percentage values can be set using utility classes.

Bootstrap 4 width setting classes:

  • .w-25 – set the element width to 25%
  • .w-50 – set the element width to 50%
  • .w-75 – set the element width to 75%
  • .w-100 – set the element width 100%
  • .mw-100 – set the element max width 100%

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
  <h2>Width</h2>
  <div class="w-25 bg-info">Width 25%</div>
  <div class="w-50 bg-info">Width 50%</div>
  <div class="w-75 bg-info">Width 75%</div>
  <div class="w-100 bg-info">Width 100%</div>
  <div class="mw-100 bg-info">Max Width 100%</div>
</div>
</body>
</html>

The example of a Bootstrap utility classes width will look like below screenshot.

Bootstrap 4 Utility Classes Width Example

#8: Bootstrap 4 Utility Classes Height

Height percentage values can be set using utility classes.

Bootstrap 4 width setting classes:

  • .h-25 – set the element height to 25%
  • .h-50 – set the element height to 50%
  • .h-75 – set the element height to 75%
  • .h-100 – set the element height 100%
  • .mh-100 – set the element max height 100%

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style="height: 500px;">
  <h2>Height</h2>
    <div class="h-25 d-inline-block p-2 bg-info">Height 25%</div>
    <div class="h-50 d-inline-block p-2 bg-info">Height 50%</div>
    <div class="h-75 d-inline-block p-2 bg-info">Height 75%</div>
    <div class="h-100 d-inline-block p-2 bg-info">Height 100%</div>
    <div class="mh-100 d-inline-block p-2 bg-info" style="height:600px">Max Height 100%</div>
</div>
</body>
</html>

The example of a Bootstrap utility classes height will look like below screenshot.

Bootstrap 4 Utility Classes Height Example

#9: Bootstrap 4 Utility Classes Spacing

Bootstrap 4 has a broad range of responsive margin and padding utility classes.

These properties follow flexible pattern :

{property}{sides} – {breakpoint} – {sides} for xs and {property}{sides} – {sides} for sm, md, lg and xl. If you omit the breakpoint specification, properties will work on any screens.

Property

The property may contain padding or margin.

To specify that it is padding enter .p and .m if margin.

Where side is one of:

  • t – used to set the *-top
  • – used to set the *-right
  • – used to set the *-bottom
  • l – used to set the *-left
  • x – used to set the *-left and *-right
  • y – used to set the *-top and *-bottom

Where size is one of:

  • 0 – set padding or margin to 0
  • 1 – set padding or margin to .25rem (4px when font-size is 16px)
  • 2 – set padding or margin to .5rem (8px when font-size is 16px)
  • 3 – set padding or margin to 1rem (16px when font-size is 16px)
  • 4 – set padding or margin to 1.5rem (24px when font-size is 16px)
  • 5 – set padding or margin to 3rem (48px when font-size is 16px)
  • auto – set padding to auto

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style="height: 500px;">
  <h2>Spacing</h2>
  <div class="pt-4 bg-success"> top padding (1.5rem = 24px)</div>
  <div class="p-5 bg-info">padding on all sides (3rem = 48px)</div>
  <div class="m-5 pb-5 bg-warning">margin on all sides (3rem = 48px) and bottom padding (3rem = 48px)</div>
</div>
</body>
</html>

The example of a Bootstrap utility classes spacing will look like below screenshot.

Bootstrap 4 Utility Classes Spacing Example

#10: Bootstrap 4 Utility Classes Shadows

You can use the shadow classes to add shadows to an element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Shadows</h2>
  <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>

The example of a Bootstrap utility classes shadows will look like below screenshot.

Bootstrap 4 Utility Classes Shadows Example

#11: Bootstrap 4 Utility Classes Vertical Align

You can use the align, classes to change the alignment of elements.

These classes work with inline, inline-block, table cell and inline-table elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Vertical Align</h2>
  <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>

The example of a Bootstrap utility classes vertical align will look like below screenshot.

Bootstrap 4 Utility Classes Vertical Align Example

#12: Bootstrap 4 Utility Classes Responsive Embeds

You can create responsive video or slideshow embeds based on the width of the parent.

Add the .embed-responsive-item to any embed element (like <iframe> or <video>) in the parent element with .embed-responsive and an aspect ratio of your choice.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Responsive Embed</h2>

  <h2>Aspect ratio 1:1</h2>
  <div class="embed-responsive embed-responsive-1by1">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/6L6uuQ1LBE"></iframe>
  </div>
  <br>
  
  <h2>Aspect ratio 4:3</h2>
  <div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/6L6uuQ1LBE"></iframe>
  </div> 
  <br>
  
  <h2>Aspect ratio 16:9</h2>
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/6L6uuQ1LBE"></iframe>
  </div>
  <br>
    
  <h2>Aspect ratio 21:9</h2>
  <div class="embed-responsive embed-responsive-21by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/6L6uuQ1LBE"></iframe>
  </div>
</div>
</body> 
</html>

The example of a Bootstrap utility classes responsive will look like below screenshot.

Bootstrap 4 Utility Classes Responsive Embed Example

#13: Bootstrap 4 Utility Classes Visibility

You can use the .visible or .invisible classes to control the visibility of elements.

Note: These classes do not change CSS display value. They only add visibility: visible or visibility: hidden.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Visibility</h2>
  <div class="visible">Visible</div>
  <div class="invisible">Invisible</div>
</div>
</body> 
</html>

The example of a Bootstrap utility classes visibility will look like below screenshot.

Bootstrap 4 Utility Classes Visibility Example

#14: Bootstrap 4 Utility Classes Position

You can use the .fixed-top class to make any element fixed at the top of the page.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Bootstrap</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Laravel</a>
    </li>
  </ul>
</nav>
<div class="container-fluid" style="margin-top:100px">
  <h2>Top Fixed Navbar</h2>
</div>
</body> 
</html>

The example of a Bootstrap utility position top fixed navbar visibility will look like below screenshot.

Bootstrap 4 Utility Classes Top Fixed Navbar Example

You can use the .fixed-bottom class to make any element fixed at the top of the page.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Bootstrap</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Laravel</a>
    </li>
  </ul>
</nav>
<div class="container-fluid" style="margin-top:400px">
  <h2>Bottom Fixed Navbar</h2>
</div>
</body> 
</html>

The example of a Bootstrap utility position bottom fixed navbar visibility will look like below screenshot.

Bootstrap 4 Utility Classes Bottom Fixed Navbar Example

You can use the .sticky-top class to make element fixed at the top of page when you scroll past it. Note: This class does not work in IE11 and earlier

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <br>
  <h2>Sticky Navbar</h2>
  <h3>Hello Investmentnovel Hello Investmentnovel</h3>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
  </nav>
  <div class="container-fluid"><br>
  <p>Hello Investmentnovel Hello Investmentnovel Hello Investmentnovel </p>
  <p>Hello Investmentnovel Hello Investmentnovel Hello Investmentnovel </p>
  <p>Hello Investmentnovel Hello Investmentnovel Hello Investmentnovel </p>
  <p>Hello Investmentnovel Hello Investmentnovel Hello Investmentnovel </p>
</div>
</div>
</body> 
</html>

The example of a Bootstrap utility position sticky top fixed navbar visibility will look like below screenshot.

Bootstrap 4 Utility Classes Sticky Navbar Example

#15: Bootstrap 4 Utility Classes Close Icon

You can use the .close class to style the close icon. This is usually used for alerts and modals.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Close Icon</h2>
  <div class="clearfix">
    <button type="button" class="close">&times;</button>
  </div>
</div>
</body> 
</html>

The example of a Bootstrap utility close icon will look like below screenshot.

Bootstrap 4 Utility Classes Close Icon Example

#16: Bootstrap 4 Utility Classes Screenreaders

You can use the .sr-only class to hide an element on all devices, except screen readers.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Screen readers</h2>
  <span class="sr-only">Hello Investmentnovel</span>
</div>
</body> 
</html>

The example of a Bootstrap utility classes Screenreaders will look like below screenshot.

Bootstrap 4 Utility Classes Screen Readers Example

#17: Bootstrap 4 Utility Classes Colors

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-secondary .text-danger, .text-dark, .text-body, .text-light, .text-white

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Contextual Colors</h2>
  <p class="text-muted">Hello Investmentnovel</p>
  <p class="text-primary">Hello Investmentnovel</p>
  <p class="text-success">Hello Investmentnovel</p>
  <p class="text-info">Hello Investmentnovel</p>
  <p class="text-warning">Hello Investmentnovel</p>
  <p class="text-secondary">Hello Investmentnovel</p>
  <p class="text-danger">Hello Investmentnovel</p>
  <p class="text-dark">Hello Investmentnovel</p>
  <p class="text-body">Hello Investmentnovel</p>
  <p class="text-light">Hello Investmentnovel</p>
  <p class="text-white">Hello Investmentnovel</p>
</div>
</body> 
</html>

The example of a Bootstrap utility classes colors will look like below screenshot.

Bootstrap 4 Utility Classes Contextual Color Example

Contextual text classes can be used on links, which will add a darker hover color.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Contextual Link Colors</h2>
  <a href="#" class="text-muted">Hello Investmentnovel</a>
  <a href="#" class="text-primary">Hello Investmentnovel</a>
  <a href="#"  class="text-success">Hello Investmentnovel</a>
  <a href="#" class="text-info">Hello Investmentnovel</a>
  <a href="#" class="text-warning">Hello Investmentnovel</a>
  <a href="#" class="text-secondary">Hello Investmentnovel</a>
  <a href="#" class="text-danger">Hello Investmentnovel</a>
  <a href="#" class="text-dark">Hello Investmentnovel</a>
  <a href="#" class="text-body">Hello Investmentnovel</a>
  <a href="#" class="text-light">Hello Investmentnovel</a>
  <a href="#" class="text-white">Hello Investmentnovel</a>
</div>
</body> 
</html>

The example of a Bootstrap utility classes contextual link color will look like below screenshot.

Bootstrap 4 Utility Classes Contextual Link Color Example

You can add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Opacity Text Colors</h2>
  <p class="text-black-50">Black text</p>
  <p class="text-white-50 bg-dark">White text</p>
</div>
</body> 
</html>

The example of a Bootstrap utility classes opacity colors will look like below screenshot.

Bootstrap 4 Utility Classes Opacity text color Example

#18: Bootstrap 4 Utility Classes Background Color

The classes for background colors are: .bg-primary, .bg-success,.bg-secondary, .bg-info, .bg-warning, .bg-danger, .bg-dark and .bg-light.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Contextual Background</h2>
  <p class="bg-primary text-white">Hello Investmentnovel</p>
  <p class="bg-success text-white">Hello Investmentnovel</p>
  <p class="bg-secondary text-white">Hello Investmentnovel</p>
  <p class="bg-info text-white">Hello Investmentnovel</p>
  <p class="bg-warning text-white">Hello Investmentnovel</p>
  <p class="bg-danger text-white">Hello Investmentnovel</p>
  <p class="bg-dark text-white">Hello Investmentnovel</p>
  <p class="bg-light text-dark">Hello Investmentnovel</p>
</div>
</body> 
</html>

The example of a Bootstrap utility classes contextual background will look like below screenshot.

Bootstrap 4 Utility Classes Contextual Background Example

#19: Bootstrap 4 Utility Classes Typography

As described in the Typography tutorial, here is a list of all typography classes.

  • .display-* – display headings are used to stand out more than normal headings, and there are four(4) classes to choose from: .display-1, .display-2, .display-3, .display-4
  • .font-weight-light – light weight text
  • .font-weight-bold – bold text
  • .font-weight-normal – normal text
  • .lead – makes a paragraph stand out
  • .font-italic – italic text
  • .small – indicates smaller text (set to 85% of the size of the parent)
  • .text-left – indicates left-aligned text
  • .text-center – indicates center-aligned text
  • .text-capitalize – indicates capitalized text
  • .text-lowercase – indicates lowercased text
  • .text-uppercase – indicates uppercased text
  • .initialism – displays text inside an <abbr> element in a slightly smaller font size
  • .list-unstyled – removes default list-style and left margin on list items (works on both <ul> and <ol>). These class only applies to immediate children list items (to remove a default list-style from nested lists, apply this class to nested lists as well)
  • .list-inline – laces all list items on the single line (used together with .list-inline-item on each <li> elements)
  • .pre-scrollable – Makes the <pre> element scrollable

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Typography Classes</h2>
  <p class="font-weight-bold">Hello Investmentnovel</p>
  <p class="font-weight-normal">Hello Investmentnovel</p>
  <p class="font-weight-light">Hello Investmentnovel</p>
  <p class="font-italic">Hello Investmentnovel</p>
  <p class="lead">Hello Investmentnovel</p>
  <p class="small">Hello Investmentnovel</p>
  <p class="text-left">Hello Investmentnovel</p>
  <p class="text-center">Hello Investmentnovel</p>
  <p class="text-right">Hello Investmentnovel</p>
  <p class="text-justify">Hello Investmentnovel</p>
  <p class="text-monospace">Hello Investmentnovel</p>
  <p class="text-nowrap">Hello Investmentnovel</p>
  <p class="text-uppercase">Hello Investmentnovel</p>
  <p class="text-lowercase">Hello Investmentnovel</p>
  <p class="text-capitalize">Hello Investmentnovel</p>
  <p class="initialism">Hello Investmentnovel</p>
  <ol class="list-unstyled">List1:
   <li>A</li>
   <li>B</li>
   <li>C</li>
  </ol>
  <ol class="list-inline">List2:
   <li class="list-inline-item">1</li>
   <li class="list-inline-item">2</li>
   <li class="list-inline-item">3</li>
  </ol>
  <pre>Hello Investmentnovel Hello Investmentnovel Hello Investmentnovel</pre>
</div>
</body> 
</html>

The example of a Bootstrap utility classes typography will look like below screenshot.

Bootstrap 4 Utility Classes Typography Classes Example

#20: Bootstrap 4 Utility Classes Block Elements

To create an element into a block element, add the .d-block class. You can use any of the d-*-block classes to control WHEN an element should be the block element on a specific screen width.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Utility Classes Tutorial With 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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Block Element</h2>
  <span class="d-block bg-success">d-block</span>
  <span class="d-sm-block bg-success">d-sm-block</span>
  <span class="d-md-block bg-success">d-md-block</span>
  <span class="d-lg-block bg-success">d-lg-block</span>
  <span class="d-xl-block bg-success">d-xl-block</span>
</div>
</body> 
</html>

The example of a Bootstrap utility classes block element will look like below screenshot. Resize the browser window to see an effect.

Bootstrap 4 Utility Classes Block Elements Example

 

At last, our Bootstrap 4 Utility Classes Tutorial With Example is over.

  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This div height required for enabling the sticky sidebar