Bootstrap Spacing Margin and padding Last Updated : 01 Aug, 2024 Comments Improve Suggest changes Like Article Like Report Bootstrap Spacing Margin and Padding refer to predefined utility classes provided by Bootstrap for managing the spacing around elements. Margin classes control the space outside the element's border, while padding classes control the space inside the border. These classes help in easily adding consistent spacing to elements without writing custom CSS.Bootstrap 5 Spacing Margin and padding:Notations: These are used to choose what styling is to be applied, where the styling is to be applied and the size of the formatting. Basic notation is [property][sides]-[size], and for sm, md, lg, xl, and xxl size screens breakpoints are mentioned before the size to make the webpage responsive. The notation is [property][sides]-[breakpoint]-[size]. Here property can be margin or padding Horizontal Centering: In horizontal centering .mx auto is used for horizontally centering the element by setting the margins to auto on the horizontal side.Example 1: The following examples, demonstrates the use of margin in bootstrap 5 - HTML <!doctype html> <html lang="en"> <head> <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 class="text-center"> <h3> Bootstrap Margin </h3> <div class="container"> <div class="border border-primary" style="height: 300pt;"> <div class="mx-1 my-1 bg-success text-light d-sm-none p-1"> Grid1 </div> <div class="mx-2 my-2 bg-success d-md-none p-1 "> Grid2 </div> <div class="mx-3 my-3 bg-success text-light d-lg-none p-1"> Grid3 </div> <div class="mx-4 my-4 bg-success d-xl-none p-1 "> Grid4 </div> <div class="mx-5 my-5 bg-success text-light d-xxl-none p-1"> Grid5 </div> </div> </div> </body> </html> Output:Bootstrap Margin Output Example 2: In this example we use Bootstrap classes to create padding around grid elements, adjusting their width responsively for different screen sizes. HTML <!doctype html> <html lang="en"> <head> <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 class="text-center"> <h3> Bootstrap Padding </h3> <div class="container"> <div class="border border-primary" style="height: 300pt;"> <div class="mx-auto my-1 bg-primary text-light d-sm-none p-1" style="width: 100px;"> Grid1 </div> <div class="mx-auto my-2 bg-primary d-md-none p-1 " style="width: 200px;"> Grid2 </div> <div class="mx-auto my-3 bg-primary text-light d-lg-none p-1" style="width: 300px;"> Grid3 </div> <div class="mx-auto my-4 bg-primary d-xl-none p-1 " style="width: 400px;"> Grid4 </div> <div class="mx-auto my-5 bg-primary text-light d-xxl-none py-1" style="width: 500px;"> Grid5 </div> </div> </div> </body> </html> Output:Bootstrap padding Example Output Comment More infoAdvertise with us Next Article Bootstrap Spacing Margin and padding M manmohanrr7py Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads BootStrap 5 Utilities Margin and Padding In Bootstrap 5, the margin and padding utilities are used to add space around elements. The margin utilities are used to add space outside of an element, while the padding utilities are used to add space inside of an element. Bootstrap 5 Utilities Margin and padding Classes: There are no different c 2 min read Bootstrap 5 Spacing Negative Margin Bootstrap 5 Spacing Negative Margins are used to provide extended negative margins to the top and bottom of an item. With a negative margin, the n-addition is utilized before the specified size. Bootstrap 5 Spacing Negative Margin Classes: m*-n**: This class is used to set the negative margin. Where 2 min read 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 Spinners Margin Bootstrap 5 Spinners Margin is used to create spinners in different margins. For margin spinners, we will use .m class with five different sizes from 0 to 5. Also, auto is used for margin auto. For different sides of the margin, we will use t (for top), b (for bottom), s (for start), e (for end), x 2 min read How to apply Padding using Bootstrap ? Bootstrap provides a wide range of utility classes for adding padding to all sides of an element. These classes allow us to easily add padding to elements without the need to write custom CSS. By applying these padding classes directly to HTML elements, one can quickly adjust spacing and improve the 2 min read Like