Bootstrap: Add Margin/Padding Space 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

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 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 give space between bootstrap columns

If I understand correctly, you want images in columns but make some space between the columns so pictures won't collide.

If you don't want to use paddings, you can always use margins. In bootstrap, you can give ml-1, ml-2 classes (until 5) which can make margins for you.

ml -> margin-left

mr -> margin-right

Here is a simple example based on your code, I hope it helps!

.box{
    height: 100px;
    background-color: blue;
    box-sizing: border-box; 
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
}
.myrow{
    background-color: red;
}

img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  
}

<div class="container">
     <div class="row myrow gx-5">
        
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        
     </div>

 </div>

Bootstrap 4 how to have margin between columns without going over space

If you set margins on the columns it will "break" the Bootstrap grid. The spacing between the columns (gutter) is created with padding. Therefore, you should add another container/box inside the columns for the shadow, and then adjust the column padding as desired:

    <div class="row">
            <div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
                <div class="shadow">
                    <div class="feature-icon pb-3">
                        <i class="fa fa-piggy-bank"></i>
                    </div>
                    <div class="">
                        <h4 class="">Some title.</h4>
                        <p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
                    </div>
                    <!--//content-->
                </div>
            </div>
            <!--//item-->

            <div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
                <div class="shadow">
                    <div class="feature-icon pb-3">
                        <i class="fa fa-piggy-bank"></i>
                    </div>
                    <div class="">
                        <h4 class="">Another title.</h4>
                        <p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
                    </div>
                    <!--//content-->
                </div>
            </div>
            <!--//item-->

            <div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
                <div class="shadow">
                    <div class="feature-icon pb-3">
                        <i class="fa fa-piggy-bank"></i>
                    </div>
                    <div class="">
                        <h4 class="">One more title.</h4>
                        <p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
                    </div>
                    <!--//content-->
                </div>
            </div>
            <!--//item-->
    </div>

https://www.codeply.com/go/aQBL68BvFU

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.

Decrease Space between Columns in Bootstrap

<div class="container">
<div class="row">
    <!-- you can also resize the size of col-md-10 as of your need  -->
    <div class="col-md-10 mx-auto">
        <div class="row text-center boxesText">
            <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="b1">
                    <i class="fa fa-comment"></i>
                </div>
                <span>Discuss</span>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="b1">
                    <i class="fa fa-comment"></i>
                </div>
                <span>Discuss</span>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="b1">
                    <i class="fa fa-comment"></i>
                </div>
                <span>Discuss</span>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="b1">
                    <i class="fa fa-comment"></i>
                </div>
                <span>Discuss</span>
            </div>
        </div>
    </div>

Bootstrap: add margin between columns

You generally don't want to mix structural and presentation elements. In this case, you've combined columns with cards. Put the cards inside the columns, and if you wanted them full-height you can use h-100 on them.

That, along with the container that should be present around outer rows, and you're all good. If you want more spacing, use px-* classes on the columns.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row mt-4 justify-content-between">
    <div class="col-4">
      <div class="card h-100 border-radius-15 bg-shadow pt-3">
        <h5>General Information</h5>
        <hr/>
        <div class="row">
          <div class="col-md-6 pr-0">
            <p>paragraphs...</p>
          </div>

          <div class="col-md-6 pl-0 text-right">
            <p>paragraphs...</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-4">
      <div class="card h-100 border-radius-15 bg-shadow pt-3">
        <h5>Features</h5>
        <hr/>
        <div class="row">
          <div class="col-md-6 pr-0">
            <p>paragraphs...</p>
          </div>

          <div class="col-md-6 pl-0 text-right">
            <p>paragraphs...</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-4">
      <div class="card h-100 border-radius-15 bg-shadow pt-3">
        <h5>Game Manufacturers</h5>
        <hr/>
        <div class="row">
          <div class="col-md-6 pr-0">
            <p>paragraphs...</p>
          </div>

          <div class="col-md-6 pl-0 text-right">
            <p>paragraphs...</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>