Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Reduce Space Between Elements on a Row in CSS Bootstrap?
Bootstrap grid system lays out and aligns content using a series of containers, rows, and columns. It is responsive and built with flexbox. It supports up to 12 columns per page. If we don't want to use all 12 columns individually, we can group them together to make wider columns.
The grid system in Bootstrap is responsive which means that the columns will re-arrange based on screen size: On a large screen, the content may look better organized in three columns, but on a small screen, the content items should be stacked on top of each other.
There are four distinct classes in the Bootstrap grid:
xs: used for phone screens having a width lesser than 768px).
sm: Used for tablet screens having a width greater than or equal to 768px.
md: Used for laptops that are comparatively smaller and have a screen width greater than or equal to 992px.
lg: Used for larger laptops and desktops having a screen width greater than or equal to 1200px.
The above classes can be combined to create more dynamic and adaptable layouts.
Bootstrap Grid System Rules
The following are some Bootstrap grid system rules:
For proper alignment and padding, rows must be placed within a .container (fixed-width) or .container-fluid (full-width) as containers allow us to centre and horizontally pad the contents of our website.
We can create horizontal groups of columns by using rows. Columns are also wrapped in rows.
Columns should contain content, and only columns may be immediate children of rows.
Grid layouts can be quickly created using predefined classes such as .row and.col-sm-4.
Columns use padding to create gutters (gaps between column content). That padding is offset in rows by using a negative margin on .rows for the first and last column. As a result, all of the content in your columns will be visually aligned down the left side. We can, however, remove the margin from rows and padding from columns by using.no-gutters on the .row.
Grid columns are created by indicating how many of the 12 available columns you want to span. For example, three columns of equal size would require three .col-sm-4.
Because column widths are expressed as a percentage, they are always fluid and sized relative to their parent element.
There are five grid breakpoints to make the grid responsive, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
Grid breakpoints are determined by minimum width media queries, which means they apply to that single breakpoint as well as all those above it (e.g., .col-sm-4 applies all sizes of devices except the first xs breakpoint).
Bootstrap Grid Structure
A Bootstrap grid has the following structure:
<div class= "container">
<div class= "row">
<div class= "col-*-*"></div>
<div class= "col-*-*"></div>
</div>
<div class= "row">
<div class= "col-*-*"></div>
<div class= "col-*-*"></div>
<div class= "col-*-*"></div>
</div>
<div class= "row">
...
</div>
</div>
Example
Let us take a look at a simple example using the above structure as the base.
<!DOCTYPE html>
<html lang= "en">
<head>
<title> Bootstrap Grid Example </title>
<meta charset= "utf-8">
<meta name= "viewport" content= "width=device-width, initial-scale= 1">
<link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class= "container">
<div class= "row">
<div class= "col-sm-2" style= "background-color: navy; color: white">ROW1 COL1</div>
<div class= "col-sm-4" style= "background-color: royalblue; color: white">ROW1 COL2</div>
</div>
<div class= "row">
<div class= "col-sm-4" style= "background-color: steelblue; color: white">ROW2 COL1</div>
<div class= "col-sm-2" style= "background-color: skyblue; color: white">ROW2 COL2</div>
</div>
</div>
</body>
</html>
Removing Gutters
We can remove gutters/extra spaces from a row and its columns by using the.row-no-gutters class. The negative margins from.row and the horizontal padding from all immediate children columns are removed.
Example
Here is a code which demonstrates the usage of row-no-gutters.
<!DOCTYPE html>
<html lang= "en">
<head>
<title> Bootstrap Grid Example </title>
<meta charset= "utf-8">
<meta name= "viewport" content= "width= device-width, initial-scale =1">
<link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class= "container">
<p style= "margin-top: 5px;"> Row without Gutters </p>
<div class= "row row-no-gutters">
<div class= "col-sm-2" style= "background-color: navy; color: white">ROW1 COL1</div>
<div class= "col-sm-4" style= "background-color: royalblue; color: white">ROW1 COL2</div>
</div>
<p style= "margin-top: 5px;">Row with Gutters</p>
<div class= "row">
<div class= "col-sm-2" style= "background-color: steelblue; color: white">ROW2 COL1</div>
<div class= "col-sm-4" style= "background-color: skyblue; color: white">ROW2 COL2</div>
</div>
</div>
</body>
</html>
444 Views
