└── README.md


/README.md:
--------------------------------------------------------------------------------
 1 | # How to add space between columns in Bootstrap?
 2 | 
 3 | To add space between columns in Bootstrap use gutter classes. With gutters you can add horizontal or vertical space or even specify how big space should be on different screen size.
 4 | 
 5 | ### How they work
 6 | 
 7 | * **Gutters are the gaps between column content, created by horizontal** `padding`. We set `padding-right` and `padding-left` on each column, and use negative `margin` to offset that at the start and end of each row to align content.
 8 | * **Gutters start at** `1.5rem` (`24px`) **wide**. This allows us to match our grid to the [padding and margin](https://mdbootstrap.com/docs/standard/utilities/spacing/) spacers scale.
 9 | * Gutters can be responsively adjusted. Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters.
10 | 
11 | ## Horizontal gutters
12 | 
13 | `.gx-*` classes can be used to control the horizontal gutter widths. The `.container` or `.container-fluid` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility.
14 | 
15 | ```html
16 | <div class="container px-4">
17 |   <div class="row gx-5">
18 |     <div class="col">
19 |       <div class="p-3">Custom column padding</div>
20 |     </div>
21 |     <div class="col">
22 |       <div class="p-3">Custom column padding</div>
23 |     </div>
24 |   </div>
25 | </div>
26 | ```
27 | #### Much more examples and a detailed description can be found at [📄 Documentation page](https://mdbootstrap.com/how-to/bootstrap/columns-space/)
28 | 
29 | 
30 | 
31 | 


--------------------------------------------------------------------------------