How to add spacing between columns?
You can achieve spacing between columns using the col-md-offset-*
classes, documented here. The spacing is consistent so that all of your columns line up correctly. To get even spacing and column size I would do the following:
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
In Bootstrap 4 use: offset-2
or offset-md-2
css add spacing between columns
Padding is always added inside elements. While your code is correct and does add padding space inside your element, if you want space in between your elements you will need to add margin.
.element {
margin:0 2.5%;
width:20%;
}
How to add space between columns in Bootstrap 4
Paddings inside cols works fine. Use class px-5
. You can use number form 0 to 5 in it. px
means "padding x" (both left and right). Although you can use size breakpoints in it, like px-sm-3
. More about padding in Bootstrap 4 here https://getbootstrap.com/docs/4.4/utilities/spacing/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <section id="features">
<div class="container-fluid"> <div class="row justify-content-around"> <div class="col-lg-4 col-sm-12 px-5"> <i class="fas fa-check-circle"></i> <h3>Easy to use.</h3> <p>So easy to use, even your dog could do it.</p> </div>
<div class="col-lg-4 col-sm-12 px-5" > <i class="fas fa-bullseye"></i> <h3>Elite Clientele</h3> <p>We have all the dogs, the greatest dogs.</p> </div>
<div class="col-lg-4 col-sm-12 px-5"> <i class="fas fa-heart"></i> <h3>Guaranteed to work.</h3> <p>Find the love of your dog's life or your money back.</p> </div> </div> </div> </section>
How to add spacing between columns in Bootstrap 5?
All you need to use gutter class like gx-1
for gap between two columns:
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<header>
<div
class="m-4 px-4"
style="background-color: white; border-radius: 10px"
></div>
</header>
<section class="container-fluid p-4">
<h1>With Proper Bootstrap - Structure</h1>
<div class="row gx-4" style="background-color: white; border-radius: 10px">
<div class="col-lg-6 mb-4 mb-lg-0">
<div class="p-4" style="background-color: red; border-radius: 10px">
example
</div>
</div>
<div class="col-lg-6 mb-4 mb-lg-0">
<div class="p-4" style="background-color: blue; border-radius: 10px">
example
</div>
</div>
</div>
<div class="row mt-4" style="background-color: white; border-radius: 10px">
<div class="col-lg-3 mb-4 mb-lg-0">
<div class="p-4" style="background-color: red; border-radius: 10px">
example
</div>
</div>
<div class="col-lg-3 mb-4 mb-lg-0">
<div class="p-4" style="background-color: red; border-radius: 10px">
example
</div>
</div>
<div class="col-lg-3 mb-4 mb-lg-0">
<div class="p-4" style="background-color: blue; border-radius: 10px">
example
</div>
</div>
<div class="col-lg-3 mb-4 mb-lg-0">
<div class="p-4" style="background-color: blue; border-radius: 10px">
example
</div>
</div>
</div>
</section>
Add spaces between columns without losing the grid system layout
Similar questions have been asked before:
Spacing & sizing columns using Bootstrap 4
Bootstrap: add margin/padding space between columns
Adjust the spacing by adjusting the padding. Also, card
should be inside columns and columns are always inside row
. For example, here px-4
increases the spacing:
<div class="row">
<div class="col-12 col-lg-3">
<div class="card">
<img src="#"> [i write the title here]<p> .... </p>
</div>
</div>
<div class="px-4 col-12 col-lg-3">
<div class="card">
<img src="#">
<p> .... </p>
</div>
</div>
<div class="px-4 col-12 col-lg-3">
<div class="card">
<img src="#">
<p> .... </p>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card">
<img src="#">
<p> .... </p>
</div>
</div>
</div>
Demo
Bootstrap: add margin/padding space between columns
Bootstrap 5 (Update 2021)
Bootstrap 5 has still includes spacing utilities for padding. However, because of new RTL support "left" and "right" have been changed to "start" and "end". For example pl-2
is now ps-2
.
pl-*
=>ps-*
(padding-left)pr-*
=>pe-*
(padding-right)ml-*
=>ms-*
(margin-left)mr-*
=>me-*
(margin-right)
Additionally, Bootstrap 5 introduces new grid gutter classes that can be used to adjust the spacing between columns. The guttter is set on the row
instead of each col-*
inside the row. For example, use g-0
for no spacing between columns.
Bootstrap 5 column spacing demo
Bootstrap 4 (Update 2018)
Bootstrap 4 has spacing utilities that make adding (or substracting) the space (gutter) between columns easier. Extra CSS isn't necessary.
<div class="row">
<div class="text-center col-md-6">
<div class="mr-2">Widget 1</div>
</div>
<div class="text-center col-md-6">
<div class="ml-2">Widget 2</div>
</div>
</div>
You can adjust margins on the column contents using the margin utils such as ml-0
(margin-left:0), mr-0
(margin-right:0), mx-1
(.25rem left & right margins), etc...
Or, you can adjust padding on the columns (col-*) using the padding utils such as pl-0 (padding-left:0), pr-0 (padding-right:0), px-2 (.50rem left & right padding), etc...
Bootstrap 4 Column Spacing Demo
Notes
- Changing the left/right margin(s) on
col-*
will break the grid. - Change the left/right margin(s) on the content of
col-*
works. - Change the left/right padding on the
col-*
also works.
how to add space between column BOOTSTRAP 4
There's no easy way to add custom margins to bootstrap columns without breaking the behavior of its grid layout on various responsiveness intervals.
You could use offset-*
utility classes, but that will actually offset that column by a number of columns, not by a random amount of pixels.
A rough example of using it would be:
<div class="row">
<div class="col-md-5 shadow">
...
</div>
<div class="col-md-5 shadow offset-md-2">
...
</div>
</div>
By far, the easiest way to do it is to place a wrapper inside the column and use margins on that. In your case, I guess you want the space between them for the shadow to render nicely, so simply create an extra <div>
and move .shadow
on that one:
<div class="row ">
<div class="col-md-6">
<div class="shadow">
...
</div>
</div>
<div class="col-md-6">
<div class="shadow">
...
</div>
</div>
</div>
Now playing around with .shadow
's margin is easy and it doesn't break the grid layout.
Related Topics
Sass Variable in CSS Calc() Function
How to Target a :Before or :After Pseudo-Element With a Sibling Combinator
How to Draw a Circle Sector in Css
100Vw Causing Horizontal Overflow, But Only If More Than One
Fixed Sidebar Navigation in Fluid Twitter Bootstrap 2.0
How to Style Default Confirm Box With Only Css
How to Specify Different Widths for Columns in CSS3
How to Keep Wrapped Flex-Items the Same Width as the Elements on the Previous Row
Removing Display:Flex Adds Spaces Around a Link. Why
Defining Variable Variables Using Less CSS
How to Write a CSS Hack For Ie 11
What Do "Flex" and "Justify-Content" Achieve That "Text-Align" Doesn'T
How to Calculate the Viewport Width (Vw) Without Scrollbar
How Do Min-Content and Max-Content Work
Top Nav Bar Blocking Top Content of the Page