Bootstrap 5 Spacing Horizontal centering Last Updated : 30 Nov, 2022 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 Spacing Horizontal centering is used to balance out the margin on both sides by using the mx-auto class and setting the width of the element. Bootstrap provides us with shorthand margin and padding helpers which are also responsive and they help us to easily design the appearance of our webpage. We can determine how much we want to add the margin or padding by adding a number from 0-5. Bootstrap 5 Spacing Horizontal centering Class: mx-auto: This class sets the display to be in the block and it sets the margin to be equal on both sides of the element to make the element center aligned. Syntax: <div class="mx-auto" style="width: value;"> <!-- Centered Elements --!> </div> Example 1: The code below demonstrates how we can use the mx-auto class and horizontally center an element: HTML <!doctype html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body class="m-2"> <div class="text-center"> <h1 class="text-success"> GeeksforGeeks </h1> <strong>Bootstrap 5 Spacing Horizontal centering</strong> </div> <div class="container bg-light mt-5"> <div class="mx-auto bg-success text-light" style="width: 15rem;"> <p>This div is horizontally centered <br>Using the mx-auto </p> </div> </div> </body> </html> Output: Example 2: The code below demonstrates how we can use the mx-auto class and horizontally center a card group: HTML <!doctype html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body class="text-center m-2"> <div> <h1 class="text-success"> GeeksforGeeks </h1> <strong>Bootstrap 5 Spacing Horizontal centering</strong> <div class="container bg-light mt-5"> <div class="card-group mx-auto" style="width: 30rem;"> <div class="card"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">This is the first Card</h5> </div> </div> <div class="card"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">This is the second Card</h5> </div> </div> <div class="card"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">This is the third Card</h5> </div> </div> </div> </div> </div> </body> </html> Output: Reference: https://getbootstrap.com/docs/5.0/utilities/spacing/#horizontal-centering Comment More infoAdvertise with us Next Article Bootstrap 5 List group Horizontal T triashabiswas Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-5 Similar Reads Bootstrap 5 Horizontal Gutters Bootstrap 5 Horizontal gutters are used for padding between columns, responsively space, and aligning content to the grid system. Bootstrap 5 Horizontal Gutter Class: gx-*: This class controls the horizontal widths of gutters. Note: (*) is used for numeric numbers like 1,2,3,4,5,6, etc. Syntax: < 2 min read Bootstrap 5 Horizontal & Vertical Gutters Horizontal & vertical Gutters in bootstrap 5 are used to give padding between columns, responsively space, and align content to the grid system. Bootstrap 5 Horizontal & vertical Gutter Class: g-*: This class controls the horizontal gutter widths. Note: (*) is used for numeric numbers like 1 2 min read Bootstrap 5 List group Horizontal Bootstrap 5 List group Horizontal facilitates to modification & alignment of the structure of the list group items from vertical to horizontal, across all breakpoints, by implementing the .list-group-horizontal class. In order to create a list group horizontal that starts with the min-width of t 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 Layout Horizontal form Bootstrap 5 Layout Horizontal form is used to create horizontal forms by using the .row class with .col-*-* classes to specify the width of your labels and controls. Also, use the .col-form-label class with <label> element to set the form label in vertically centered. Layout Horizontal form us 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 Like