Home >>Bootstrap Tutorial >Bootstrap Utilities

Bootstrap Utilities

Bootstrap Utilities

Bootstrap provides you dozens of classes for responsive designs, quickly style elements without any CSS code. You can use utility to hiding, aligning, spacing-content, showing and for fast responsive development.

Float and Clearfix

Float includes two class float right and float left. Add class .float right to float an element right and add class. Float-left to float an element left and use class .clearfix to clear float of an element.

Let's take an example of float and clearfix:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Utilities</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.4.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="container">
  <div class="clearfix">
    <span class="float-left border">Float left</span>
    <span class="float-right border">Float right</span>
  </div>
</div>
</div>
</body>
</html>
Output:

Float

Float left Float right

Responsive Floats

You can use the margin and padding utilities for making websites and layout responsive on all size of screen width where, sm (>=576px), md (>=786px), lg (>=992px) or xl (>=1200px). You can use margin and padding classes for making responsive like this: mr (margin-right), ml (margin-left), m(margin on all sides), mt (margin-top), mb (margin-bottom), pr (padding-right), pl (padding-left), p(padding on all sides), pt (padding-top), pb (padding-bottom).

Let's take an example to use utilities:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Utilities</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.4.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">
  <div class="clearfix">
    <div class="float-sm-right">on small screen float right</div><br>
    <div class="float-md-right">on medium screen float right</div><br>
    <div class="float-lg-right">on large screen float right</div><br>
    <div class="float-xl-right">on extra large screen float right</div><br>
    <div class="float-none">float none</div>
  </div>
</div>
</body>
</html>
Output:
on small screen float right
 
on medium screen float right
 
on large screen float right
 
on extra large screen float right
 
float none

Let's take another example:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Utilities</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.4.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="d-inline-flex container">
    <div class="border  p-4 mt-2">1</div><br>
    <div class="border  p-4 mt-3">2</div><br>
    <div class="border  p-4 mt-4">3</div><br>
    <div class="border  p-4 mt-5">4</div><br>
    <div class="border  p-4">5</div>
</div>
</body>
</html>
Output:
1
 
2
 
3
 
4
 
5

Popular Tutorials