The Ultimate Guide To Bootstrap Padding

Bootstrap has a robust layout system with many options for setting or customizing padding. In this post I will focus on vertical and horizontal padding in Bootstrap v5, and I will also show v3 and v4 classes and systems for applying padding.

Bootstrap has upgraded it’s default classes and it’s styling utilities in version 5. I will construct the grid shown below and discuss the following:

  • Default padding within grid rows and columns
  • Different classes available in the Bootstrap grid for spacing
  • Bootstrap utility classes for controlling padding (whether or not the div is in a grid)
  • Removing padding from a div

The grid may look funny, but it provides an example of every padding option I could think of in Bootstrap.

Bootstrap padding in every direction
Bootstrap padding in every direction

A Code Sandbox with a Bootstrap v5 padding example is in the Resources section. The relevant code is also available below the table of contents.

<div class="container">

  //row 1
  <div class="row">
    <div class="col">
      <div class="item">default</div>
    </div>
    <div class="col">
      <div class="item">default</div>
    </div>
    <div class="col">
      <div class="item">default</div>
    </div>
  </div>

  //row 2
  <div class="row grey-row gx-2">
    <div class="col">
      <div class="item">row gx-2</div>
    </div>
    <div class="col">
      <div class="item">row gx-2</div>
    </div>
    <div class="col">
      <div class="item">row gx-2</div>
    </div>
  </div>

  //row 3
  <div class="row gx-0">
    <div class="col ps-2">
      <div class="item">row gx-0; col ps-2</div>
    </div>
    <div class="col pe-2">
      <div class="item">row gx-0; col pe-2</div>
    </div>
    <div class="col p-0">
      <div class="item">row gx-0; col p-0</div>
    </div>
  </div>

  //row 4
  <div class="row grey-row gx-0">
    <div class="col pt-2">
      <div class="item">row gx-0; col pt-2</div>
    </div>
    <div class="col pb-2">
      <div class="item">row gx-0; col pb-2</div>
    </div>
    <div class="col pt-1 pb-1">
      <div class="item">row gx-0; col pt-1 pb-1</div>
    </div>
  </div>
</div>

Bootstrap Padding Between Columns

The Bootstrap container -> row -> col grid layout is accomplished by adding Bootstrap classes of the same name with default values to the grid elements (often divs). The row and col classes come with default left and right padding applied. They also have default margin-top, but no padding on top or bottom.

The row class sets a multiplier called --bs-gutter-x. The row class uses this value to set a padding multiplier on all children elements. The multiplier is 1.5 by default, and in my Code Sandbox example padding-left and padding-right are both set to 12px.

The result is 12px padding on the far left and far right of the row, and total spacing between columns of 24px.

In the next row I added class gx-2. This does two interesting things:

  • It set the multiplier --bs-gutter-x to 0.5rem
  • It reduced margin top, left, and right at the row level which can affect padding

Lets break apart the class name: g refers to gutter, x applies it to all sides, and 2 sets a preconfigured amount of spacing (4 is default).

Bootstrap gx-2 class
Bootstrap gx-2 class

The net effect was to reduce padding on the far left and right to 4px, and padding between columns of 8px.

For the next two rows, I applied class gx-0 at the row level. This removes all spacing and allows us to manually add spacing using Bootstrap’s spacing utility.

Bootstrap Horizontal Padding

Whether you need to add padding to a div inside a row or simply a div that is independent of a larger layout, you need to add Bootstrap’s spacing utility classes to your div.

I will give examples below from row three of my Code Sandbox grid, but they have all grid padding stripped. These examples apply equally well to a div outside of a grid.

Bootstrap Padding Left

<div class="col ps-2">
  <div class="item">row gx-0; col ps-2</div>
</div>

The simple utility class for adding padding-left is ps-{size}. In this case, I wanted a small amount of padding so I chose the ps-2 class.

Breaking down the class name, we see the p stands for ‘padding’, the s stands for ‘start’, and the 2 is indicative of the multiplier.

Here is the effect in the DOM.

Bootstrap ps-2
Bootstrap ps-2

Bootstrap Padding Right

<div class="col pe-2">
  <div class="item">row gx-0; col p-0</div>
</div>

Here I’ve added padding-right with pe-2. In this case, the e stands for ‘end’.

Here’s how pe-2 impacts the DOM.

Bootstrap pe-2
Bootstrap pe-2

It’s important to remember that this is the syntax for Bootstrap v5. In v4, the utility followed CSS conventions and the padding-right class was pr-{size}, i.e. pr-3.

Additionally, Bootstrap v5 margin classes follow the same conventions as padding, so margin-right is me-{size}.

Bootstrap Padding Between Rows

Adding padding between the rows of a Bootstrap grid can seem like a difficult challenge.

However, if you understand the critical first step then you will succeed: Before you can add or customize padding between rows, you need to strip the default margin-top value off the lower rows.

Bootstrap row padding top
Bootstrap row padding top

In Bootstrap, row spacing is controlled by margin. Using a class like g-2 to get some preliminary styling is useful, but the margin-top values set by default classes will overpower the padding-top that you can set with a class like pt-2.

The solution is to use mt-0 at the row level to remove margin set by g-2. Then your padding will apply properly.

The code below is from a second Code Sandbox where I focused on row padding and margin.

Notice in the first row, I don’t have to remove the margin set by g-2. In the second row, I have to add mt-0 in order for the padding to be visible. Play around with the Sandbox to see more.

<div class="container mt-4">
  <div class="row g-2 pt-2">
    <div class="col">
      <div class="item">row g-2 pt-2</div>
    </div>
    <div class="col">
      <div class="item">row g-2 pt-2</div>
    </div>
    <div class="col">
      <div class="item">row g-2 pt-2</div>
    </div>
  </div>
  <div class="row g-2 mt-0 pt-2">
    <div class="col">
      <div class="item">g-2 mt-0 pt-2</div>
    </div>
    <div class="col">
      <div class="item">g-2 mt-0 pt-2</div>
    </div>
    <div class="col">
      <div class="item">g-2 mt-0 pt-2</div>
    </div>
  </div>
</div>

Bootstrap Vertical Padding

Below is another code snippet from my original padding example:

<div class="row grey-row gx-0">
  <div class="col pt-2">
    <div class="item">row gx-0; col pt-2</div>
  </div>
  <div class="col pb-2">
    <div class="item">row gx-0; col pb-2</div>
  </div>
  <div class="col pt-1 pb-1">
    <div class="item">row gx-0; col pt-1 pb-1</div>
  </div>
</div>

This row has no margin since I used class gx-0. That allows us to set padding and not have it be overpowered by margin.

In the first Bootstrap column I set padding top using pt-2. Breaking that class name down, we see p for padding, t for top, and 2 for the value from the styling system (0.5rem in this case).

The second column sets padding bottom using pb-2. Naturally, the b stands for bottom in this class name.

The final column has both pt-1 and pb-1, setting both top and bottom padding to a value of 0.25rem. These classes are part of Bootstrap v5 and are provided by it’s styling utility.

Bootstrap No Padding

There are several handy Bootstrap classes for specifying 0 padding.

  • p-0. This specifies no padding on any side.
  • px-0. This specifies no padding on the left and right.
  • ps-0, pe-0, pt-0, pb-0. These four classes each set a specific side to padding 0. ps sets the left (start), pe sets the right (end), pt sets the top, and pb sets the bottom.

Padding Classes in Bootstrap 3, Bootstrap 4, and Bootstrap 5

There have been significant upgrades to built-in padding classes and spacing utilities as new major versions of Bootstrap are released.

Bootstrap 3 Padding

In Bootstrap 3, many components come with styling built in to their classes. The container class by default has padding-right: 15px and padding-left: 15px as well as some margin.

Bootstrap 3 padding
Bootstrap 3 padding

To customize padding beyond provided defaults in v3, you simply need to adding padding left, right, top, and bottom to your classes or use inline styling.

Bootstrap 3 was the most recent version until August 2015.

Bootstrap 4 Padding

Bootstrap 4 introduced a spacing utility that is very similar to what currently exists in v5. Classes include:

  • pt-0. This sets top padding to 0, (no top padding).
  • pl-2. This sets padding left to 0.5rem by default.
  • pr-1. This sets padding right to 0.25rem by default.

I mention ‘by default’ because these values actually apply a multiplier to a default spacer value of 1rem.

In Bootstrap v4 grid system, container still start with default left and right padding of 15px. I did not see any default padding on the row or col classes.

However, some built-in Bootstrap classes will have default padding values.

Bootstrap 4 was the newest version until May 2021.

Bootstrap 5 Padding vs Bootstrap 4 Padding

The spacing utility in Bootstrap 5 received minor upgrades.

You may have noticed in my previous examples, which were all Bootstrap 5, the padding left and right classes are ps-{size} and pe-{size}. For example, ps-2 and pe-1. The s stands for start and the e stands for end.

Personally I prefer the v4 way that reflected the CSS attribute names. However, Bootstrap and other libraries like Material-UI have switched to start/end syntax with their most recent versions.

Also of note, row and col classes have default padding values applied in Bootstrap v5. The row sets gutter values called --bs-gutter-x and --bs-gutter-y. The col element then is selected by a built-in Bootstrap selector which adds default padding values.

Bootstrap 5 grid row and column padding
Bootstrap 5 grid row and column padding

Resources

Bootstrap v5 Spacing API

Here’s how to align Bootstrap buttons in every way.

Here’s four Bootstrap button hover styling examples.

Code Sandbox with Bootstrap v5 padding example

Share this post:

Leave a Comment

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