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>
Float
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>
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>