Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to Reduce Space Between Elements on a Row in CSS Bootstrap?
Bootstrap's grid system creates automatic spacing (called "gutters") between columns using padding and margins. Sometimes you need to reduce or remove this space to create tighter layouts. Here are several methods to control spacing between elements in Bootstrap rows.
Method 1: Using no-gutters Class
The simplest method is to add the no-gutters class to your row. This removes all gutters between columns
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap No Gutters Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
<h5>Regular Row (with gutters)</h5>
<div class="row">
<div class="col-4 bg-primary text-white p-2">Column 1</div>
<div class="col-4 bg-secondary text-white p-2">Column 2</div>
<div class="col-4 bg-success text-white p-2">Column 3</div>
</div>
<h5 class="mt-4">No Gutters Row</h5>
<div class="row no-gutters">
<div class="col-4 bg-primary text-white p-2">Column 1</div>
<div class="col-4 bg-secondary text-white p-2">Column 2</div>
<div class="col-4 bg-success text-white p-2">Column 3</div>
</div>
</div>
</body>
</html>
Two rows are displayed: the first shows normal Bootstrap columns with spacing between them, while the second row shows columns placed directly next to each other with no gaps.
Method 2: Custom Gutter Classes (Bootstrap 5)
Bootstrap 5 provides gutter utility classes like g-0, g-1, g-2 for precise spacing control
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Gutter Classes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
<h5>No Gutters (g-0)</h5>
<div class="row g-0">
<div class="col-6 bg-info text-white p-2">Zero spacing</div>
<div class="col-6 bg-warning text-dark p-2">Zero spacing</div>
</div>
<h5 class="mt-3">Small Gutters (g-1)</h5>
<div class="row g-1">
<div class="col-6 bg-info text-white p-2">Small spacing</div>
<div class="col-6 bg-warning text-dark p-2">Small spacing</div>
</div>
<h5 class="mt-3">Medium Gutters (g-2)</h5>
<div class="row g-2">
<div class="col-6 bg-info text-white p-2">Medium spacing</div>
<div class="col-6 bg-warning text-dark p-2">Medium spacing</div>
</div>
</div>
</body>
</html>
Three rows are shown with progressively increasing spacing between columns: first with no gap, second with small gap, and third with medium gap.
Method 3: Custom CSS Margins
You can override Bootstrap's default spacing with custom CSS margins and padding
<!DOCTYPE html>
<html>
<head>
<title>Custom Spacing Control</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.custom-spacing .col {
margin-right: 5px;
margin-left: 5px;
}
.tight-spacing {
margin-left: -5px;
margin-right: -5px;
}
.tight-spacing .col {
padding-left: 5px;
padding-right: 5px;
}
</style>
</head>
<body>
<div class="container mt-3">
<h5>Custom 10px Spacing</h5>
<div class="row custom-spacing">
<div class="col bg-danger text-white p-2">Custom spacing</div>
<div class="col bg-dark text-white p-2">Custom spacing</div>
</div>
<h5 class="mt-3">Tight 10px Spacing</h5>
<div class="row tight-spacing">
<div class="col bg-danger text-white p-2">Tight spacing</div>
<div class="col bg-dark text-white p-2">Tight spacing</div>
</div>
</div>
</body>
</html>
Two rows demonstrate custom spacing control: the first with 10px margins between columns, and the second with reduced padding for tighter layout.
Conclusion
Use no-gutters or g-0 to completely remove spacing, gutter classes like g-1, g-2 for controlled spacing, or custom CSS for precise control over column spacing in Bootstrap layouts.
Updated on: 2026-03-15T18:00:54+05:30
1K+ Views
Advertisements