Bootstrap Padding
Padding is a space inside an element between an element and its border. Bootstrap padding utility class is used to add padding to the elements. The padding utility class assign responsive padding values to an element. These classes are built from a default Saas map ranging from .25rem to 3rem.
Notation for padding
The padding utility classes are named using the format: {property}-{sides}-{size} for xs and {property}-{sides}-{breakpoint}-{sides} for sm, md, lg, and xl.
Where property is :
- p - for classes that set the padding
where the side is one from the following list :
- t - for classes that set padding-top
- b - for classes that set padding-bottom
- l - for classes that set padding-left
- r- for classes that set padding-right
- x - for classes that set both *-left and *-right
- y- for classes that set padding to both *-top and *-bottom
- blank - for classes that set padding to all four sides.
Where size is one of :
- 0 - It eliminates padding by setting it to 0.
- 1 - It set padding to $spacer *.25
- 2 - It set padding to $spacer *.5
- 3 - It set padding to $spacer * 1
- 4 - It set padding to $spacer *1.5
- 5 - It set padding to $spacer *3
Example: Adding padding to elements.
So now we know the notations used for adding padding. Let us use these notations to add padding to the elements. Here we have added padding on top, all the sides, bottom, and left.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Grid</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.5.2/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.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap padding</h2>
<div class="pt-4 bg-light">padding on top</div>
<div class="p-5 bg-info">padding on all four sides</div>
<div class="pb-5 bg-light">padding on botton</div>
<div class="pl-3 bg-info">padding on left</div>
</div>
</body>
</html>
Output
Here is the output of the above program
Example: Adding padding to the grid system
Let us look at another example to illustrate the usage of padding. In this example, we have added padding to rows and columns.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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.5.2/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.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Bootstrap padding Example</h1>
<div class="row">
<div class="col px-5 bg-info" >col 1</div>
<div class="col py-4 bg-danger" >col 2</div>
<div class="col pl-3 bg-success" >col 3</div>
</div>
<div class="row px-5 bg-secondary">
<div class="col pb-5 bg-warning" >col 1</div>
<div class="col pt-4 bg-success" >col 2</div>
<div class="col pr-3 bg-info" >col 3</div>
</div>
</div>
</body>
</html>
Output
Here is the output showing padding in grid system.
Example: Adding padding to buttons
We can also add padding to the elements of buttons too. To add padding to buttons add padding utility class within <button> class. Here is a program to add padding to buttons using Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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.5.2/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.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Bootstrap padding Example</h1>
<button class="btn btn-primary pl-sm-5">button</button>
<button class="btn btn-primary py-sm-3">button</button>
<button class="btn btn-primary pb-sm-4">button</button>
<button class="btn btn-primary pt-sm-3">button</button>
</div>
</body>
</html>
Output
Here is the output of the above program.
Conclusion
So here we have discussed the padding utility class used in the bootstrap. We can add padding to left, right, top, bottom, or any sides. The padding size varies from 0-1. The padding uses notations that include side type, size type, and breakpoints which are clearly illustrated above. Use padding to improve visibility between elements on a web page.
