How to remove gutter space for a specific div in Bootstrap ?
Last Updated : 21 Jun, 2024
In Bootstrap 4, the grid system comprises 12 columns with small spaces in between, known as gutter space. Each column has a gutter space of 30px, split into 15px on each side. Managing this gutter space is important for achieving the desired layout and spacing in your web design. This article will explain what gutter space is and how to remove it for specific div elements using Bootstrap 4.
Understanding Gutter Space in Bootstrap 4
Gutter space refers to the spacing between columns in the Bootstrap grid system. It ensures proper alignment and spacing of column content. By default, each column has a 15px padding on both sides, totaling 30px between two columns.
Approach to Removing Gutter Space
- 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.
html <!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;"> GeeksforGeeeks </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.
html <!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;"> GeeksforGeeeks </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:
Removing gutter space in Bootstrap 4 is essential for creating precise and custom layouts. By using the no-gutters class or adjusting the padding for specific columns, you can control the spacing between your grid elements effectively. This flexibility allows for cleaner and more tailored designs, enhancing the overall appearance and functionality of your web pages.
For more detailed information, you can refer to the official Bootstrap documentation.