Bootstrap - Spacing

This chapter discusses about the utility classes provided by Bootstrap for spacing.

Bootstrap provides predefined range of responsive margin, padding and gap utility classes that can be used to modify the appearance of an element. These utility classes work for all types of breakpoints, such as:

breakpoint size
xs <=576px
sm >=576px
md >=768px
lg >=992px
xl >=1200px
xxl >=1400px

The naming format of these classes is as follows:

breakpoint naming format
xs {property}{sides}-{size}
sm, md, lg, xl, xxl {property}{sides}-{breakpoint}-{size}

where property can be one of the following:

property value
m margin
p padding

where sides can be one of the following:

side value
t margin-top/padding-top
b margin-bottom/padding-bottom
s margin-left/padding-left
e margin-right/padding-right
x margin-left and margin-right or padding-left and padding-right
y margin-top and margin-bottom or padding-top and padding-bottom
blank margin and padding on all four sides

where size can be one of the following:

size value
0 margin/padding - 0
1 margin/padding - 0.25rem
2 margin/padding - 0.5rem
3 margin/padding - 1rem
4 margin/padding - 1.5rem
5 margin/padding - 3rem
auto margin - auto
Note: More sizes can be added by adding entries to the $spacers Sass map variable.

Let us see an example for margin utilities:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
   <head>
       <title>Bootstrap - Spacing</title>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
        <h4 class="display-4">Spacing margin utilities</h4>
        <p><u>Set the spacing (margin) of an element with the {property}{sides}-{breakpoint}-{size} classes.</u></p>
        <div class="mt-4 bg-info">Only top margin (1.5rem)</div>
        <div class="mb-5 bg-light">Only bottom margin (1rem)</div>
        <div class="ms-5 bg-warning">Only left margin (3rem)</div>
        <div class="me-5 bg-warning">Only right margin (3rem)</div>
        <div class="mx-5 text-bg-secondary">Both left and right margins (3rem)</div>
        <div class="my-5 bg-primary">Both top and bottom margins (3rem)</div>
      </div>
   </body>
</html>

Let us see an example for padding utilities:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
   <head>
       <title>Bootstrap - Spacing</title>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
        <h4 class="display-4">Spacing padding utilities</h4>
        <p><u>Set the spacing (padding) of an element with the {property){sides}-{breakpoint}-{size} classes.</u></p>
        <div class="pt-4 bg-info">Only top padding (1.5rem)</div>
        <div class="pb-5 text-bg-success">Only bottom padding (1rem)</div>
        <div class="ps-5 bg-warning">Only left padding (3rem)</div>
        <div class="pe-5 text-bg-danger">Only right padding (3rem)</div>
        <div class="px-5 text-bg-secondary">Both left and right padding (3rem)</div>
        <div class="py-5 text-bg-primary">Both top and bottom padding (3rem)</div>
      </div>
   </body>
</html>

Horizontal centering

For horizontal centering fixed-width block level content, Bootstrap provides .mx-auto class.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap - Spacing</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
        <h4 class="display-5">Horizontal centering</h4><br>
        <div class="mx-auto p-2 text-bg-success" style="width: 200px;">
          Horizontally centered
        </div>
      </div>
   </body>
</html>

  • By default, negative values can be used with margin properties in CSS.

  • The negative values cannot be used with padding.

  • It is possible to enable the negative margins by setting the variable $enable-negative-margins to true.

Gap utilities

You can make use of gap utilities on the parent element, while using display: grid or display: flex. By default the gap utilities are responsive.

It can hold the values for all the six sizes from the $spacers map (0-5). There is no .gap-auto class, as it is same as .gap-0.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Spacing</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
      <h4 class="display-6">
          gap utility
      </h4>
      <h4>gap utility class <i>.gap-*</i></h4>
      <div class="d-grid gap-0 p-3 border border-primary bg-light">
          <div class="p-2 bg-light border">
              gap-0
          </div>
          <div class="p-2 bg-light border">
              gap-0
          </div>
      </div>
      <div class="d-grid gap-1 p-3 border border-danger bg-primary-subtle">
          <div class="p-2 bg-light border">
            gap-1
          </div>
          <div class="p-2 bg-light border">
            gap-1
          </div>
      </div>
      <div class="d-grid gap-2 p-3 border border-success bg-danger-subtle">
          <div class="p-2 bg-light border">
            gap-2
          </div>
          <div class="p-2 bg-light border">
            gap-2
          </div>
      </div> 
    </div>
  </body>
</html>

row-gap

In order to set the vertical space between children items in a specified container, use the utility class .row-gap.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
   <head>
     <title>Bootstrap - Spacing</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
     <div class="container mt-3">
        <h4 class="display-6">
         gap utility
        </h4>
        <h4>row gap utility class <i>.row-gap-*</i></h4>
        <div class="d-grid gap-0 row-gap-4">
          <div class="p-2 border bg-primary">
            row gap-4
          </div>
          <div class="p-2 border bg-info">
            row gap-4
          </div>
          <div class="p-2 border bg-warning">
            row gap-4
          </div>
          <div class="p-2 border bg-danger-subtle">
            row gap-4
          </div>
        </div>
      </div> 
     </div>
   </body>
</html>

column-gap

In order to set the horizontal space between children items in a specified container, use the utility class .column-gap.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
   <head>
     <title>Bootstrap - Spacing</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
     <div class="container mt-3">
      <h4 class="display-4">
        gap utility
      </h4>
      <h4>column gap utility class <i>.column-gap-*</i></h4>
      <div class="d-flex gap-0 column-gap-4">
        <div class="p-2 g-col-6 border border-primary">Grid item 1</div>
        <div class="p-2 g-col-6 border border-primary">Grid item 2</div>
        <div class="p-2 g-col-6 border border-primary">Grid item 3</div>
        <div class="p-2 g-col-6 border border-primary">Grid item 4</div>
      </div>
      <div class="d-flex gap-0 column-gap-2">
        <div class="p-2 g-col-6 border border-success">Grid item 1</div>
        <div class="p-2 g-col-6 border border-success">Grid item 2</div>
        <div class="p-2 g-col-6 border border-success">Grid item 3</div>
        <div class="p-2 g-col-6 border border-success">Grid item 4</div>
      </div>
     </div>
   </body>
</html>
Advertisements