Removing padding gutter from grid columns in Bootstrap 4 [duplicate]

Question

How do you create a gutterless grid in bootstrap 4?

Is there an official API for removing the gutter or is it manual?

Answer 1

Bootstrap5: Comes with gutter utilities

• all viewports g-0 .. g-5
• responsive viewports g-sm-0 .. g-lg-5
• horizontal/vertical gy-0 .. gx-5

Example with zero-gutter width:

<div class="container">   <div class="row g-0">     <div class="col-6">       <div class="p-3 border bg-light">...</div>     </div>     <div class="col-6">       <div class="p-3 border bg-light">...</div>     </div>   </div> </div>  

Bootstrap4: Comes with .no-gutters out of the box. source: https://github.com/twbs/bootstrap/pull/21211/files

Bootstrap3:

Requires custom CSS.

Stylesheet:

.row.no-gutters {   margin-right: 0;   margin-left: 0;    & > [class^="col-"],   & > [class*=" col-"] {     padding-right: 0;     padding-left: 0;   } } 

Then to use:

<div class="row no-gutters">   <div class="col-xs-4">...</div>   <div class="col-xs-4">...</div>   <div class="col-xs-4">...</div> </div> 

It will:

• Remove margin from the row
• Remove padding from all columns directly beneath the row

Answer 2

You should use built-in bootstrap4 spacing classes for customizing the spacing of elements, that's more convenient method .