How to Add Spacing Between Columns

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



Leave a reply



Submit