”;
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 | |
| 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>
”;