How to remove gutter space for a specific div in Bootstrap ?
To remove gutter space for a specific div, first we must know what is gutter space. In Bootstrap 4, There are 12 columns in the grid system each column has a small space in between that space is known as gutter space. Gutter Space has width 30px (15px on each side of a column). The Following Approach will explain clearly.
Approach:
- By default, Bootstrap 4 has class=”no-gutters” to remove gutter spaces of any specific div. The following image shows the highlighted gutter space and space between columns on bootstrap 4 12 column grid system. You can even modify gutter width by reducing 15px width of gutter space between each columns.
Example 1: Below example illustrate how to remove gutter space for a specific div.
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" > </ script > < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" > </ script > </ head > < body > < center > < div class = "container" > < h1 style = "color:green;padding:13px;" > BeginnerforGeeeks </ h1 > < br > < div class = "row p-3" > < h2 >< em >With Gutter space</ em ></ h2 > </ div > < div class = "row border border-dark " > < div class = "col-12 col-sm-6 col-md-8 bg-primary " > .col-12 .col-sm-6 .col-md-8 </ div > < div class = "col-6 col-md-4 bg-secondary" > .col-6 .col-md-4 </ div > </ div > < div class = "row p-3" > < h2 >< em >Without Gutter space</ em ></ h2 > </ div > < div class = "row no-gutters border border-dark" > < div class = "col-12 col-sm-6 col-md-8 bg-primary " > .col-12 .col-sm-6 .col-md-8 </ div > < div class = "col-6 col-md-4 bg-secondary" > .col-6 .col-md-4 </ div > </ div > </ div > </ center > </ body > </ html > |
Output:
Example 2: Below example illustrate how to remove gutter space for a specific div only.
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" > </ script > < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" > </ script > </ head > < body > < center > < div class = "container" > < h1 style = "color:green;padding:13px;" > BeginnerforGeeeks </ h1 > < br > < div class = "container" > < div class = "row no-gutters" > < div class = "col-6 col-sm-3 bg-info" > .col-6 .col-sm-3 </ div > < div class = "col-6 col-sm-3 bg-danger" > .col-6 .col-sm-3 </ div > < b >< em >Without Gutter space</ em ></ b > </ div > < div class = "row " > < div class = "col-6 col-sm-3 bg-warning" > .col-6 .col-sm-3 </ div > < div class = "col-6 col-sm-3 bg-success" > .col-6 .col-sm-3 </ div > < b >< em >With Gutter space</ em ></ b > </ div > < div class = "row no-gutters" > < div class = "col-4 col-sm-2 bg-success" > .col-4 .col-sm-2 </ div > < div class = "col-4 col-sm-2 bg-danger " > .col-4 .col-sm-2 </ div > < div class = "col-4 col-sm-2 bg-info" > .col-4 .col-sm-2 </ div > < b >< em >Without Gutter space</ em ></ b > </ div > < div class = "row " > < div class = "col-4 col-sm-2 bg-danger" > .col-4 .col-sm-2 </ div > < div class = "col-4 col-sm-2 bg-info" > .col-4 .col-sm-2 </ div > < div class = "col-4 col-sm-2 bg-warning" > .col-4 .col-sm-2 </ div > < b >< em >With Gutter space</ em ></ b > </ div > </ div > </ div > </ center > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/4.3/layout/grid/#no-gutters