Signup/Sign In

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

Bootstrap padding

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.

Padding example 2

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.

Padding example 3

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.