The spacing utility is used to assign responsive-friendly margin or padding values to an element or a subgroup of its sides. Padding is the area inside of any div or container, as opposed to a margin, which is the area outside of it. Margin and Padding can be added by adding Bootstrap classes in an element or container.
To change an element's appearance, Bootstrap offers a variety of responsive margin and padding utility classes. The classes are named using the format {property}{sides}-{breakpoint}-{size} for sizes s, md, xs, lg, xl, XXL. Here sides can be t(top), b(bottom), e(end),s (start), etc.
- Margin and padding: Bootstrap provides several short-hand utility classes to add margin and padding between two elements or a subgroup of an element's sides to modify its appearance. It allows spacing ranging from .25rem to 3rem.
- Negative Margin: Bootstrap has negative margin classes that can be used to add negative margins to elements as well. These classes have a similar syntax to general spacing classes but with an n just before the size.
- Gap: When the display is set to grid, you can make use of gap utilities on the parent grid container. With responsive gap utilities, you don't have to add margin utilities to individual grid items.
- Sass: This involves the Sass map and spacing utilities that are declared in Utility API.
Example 1: Here is an example of margin and padding using bootstrap spacing classes.
HTML <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 5 Spacing</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="text-center"> <h1 class="text-success"> GeeksforGeeks </h1> <h2 class="m-1 p-1">Bootstrap 5 Spacing</h2> </div> <div class="container text-white"> <div class="mt-5 px-5 bg-success"> GeeksForGeeks-Padding to the left and margin to the top </div> <br> <div class="mx-4 bg-success"> GeeksForGeeks - margin from left and Right of div </div> <br> <div class="py-4 bg-success"> GeeksForGeeks - Padding to the top and bottom of div </div> <br> <div class="px-4 bg-success"> This is GeeksForGeeks -Padding to the left and Right of div </div> </div> </body> </html>
Output:
Padding in Margin in Bootstrap 5 Example 2: Here is an example of a gap using bootstrap spacing classes.
HTML <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 5 Spacing</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="text-center"> <h1 class="text-success"> GeeksforGeeks </h1> <h2>Bootstrap 5 Spacing</h2> <div class="d-grid gap-2"> <div class="p-1 bg-warning ">GeeksForGeeks item 1</div> <div class="p-1 bg-success ">GeeksForGeeks item 2</div> <div class="p-1 bg-primary ">GeeksForGeeks item 3</div> </div> </body> </html>
Output:
Gap utility in Bootstrap 5 Reference: https://getbootstrap.com/docs/5.0/utilities/spacing/
Similar Reads
Bootstrap 5 Spacing Gap The spacing utility is used to assign responsive-friendly margin or padding values to an element or a subgroup of its sides. When the display is set to grid, you can use gap utilities on the parent grid container. With responsive gap utilities, you don’t have to add margin utilities to individual gr
2 min read
Bootstrap 5 Sizing Bootstrap 5 Sizing utility classes adjust element dimensions relative to the viewport or parent container. Options include percentage-based widths, and viewport-relative dimensions, facilitating responsive design for flexible layouts across various screen sizes. iframe { width: 100%; height: 400px;}
3 min read
Bootstrap 5 Position Bootstrap 5 Position offers utility classes to control the positioning of elements. It includes classes like "position-static," "position-relative," "position-absolute," etc., facilitating precise element positioning on web pages for improved layout and design control.NameDescriptionposition-staticD
2 min read
Bootstrap 5 Columns Bootstrap 5 Columns facilitates the different option for the alignment, ordering, and offsetting of the Columns with the help of flexbox grid system. The different available column classes can be utilized to manage widths of non-grid elements. Bootstrap 5 Columns: The following components is used th
2 min read
Bootstrap 5 Cards Sizing Bootstrap Cards Sizing refers to the ability to control the dimensions of cards in Bootstrap by using predefined classes such as col, col-sm, col-md, col-lg, col-xl, and col-xxl. This ensures consistency and responsiveness across various screen sizes, maintaining a uniform appearance for card elemen
2 min read