Remove Spacing Between Cols

Remove spacing between cols

add a class when you need to remove spaces use it

.padding-0{
    padding-right:0;
    padding-left:0;
}

in html write this class

<div class="row">
   <div class="col-md-2 padding-0">
       //stuff here for this column
   </div>
   <div class="col-md-10 padding-0">
       //stuff here for columns
   </div>
</div>

Bootstrap reduce spacing between columns

The problem seems to be with the padding not the margin. This piece of css removes the white space between the columns

   .form-group .col-xs-6{
      padding: 0px;
    }

How to remove space between columns

Remove padding-left & padding-right from col-*-* classes in a new css file by giving them an additional class (in my case div-holder), like:

CSS:

.div-holder {
  padding-left: 0;
  padding-right: 0;
}

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-2 div-holder">
      <div class="customDiv">
        <div id="collapsible-panels">
          <p><a href="#">Question One goes here?</a></p>
          <div><p><a href="page2.html">Page 2</a></p></div>
          <p><a href="#">Question Two goes here?</a></p>
          <div><p>Answer to Question Two goes here.</p></div>
          <p><a href="#">Question Three goes here?</a></p>
          <div><p>Answer to Question Three goes here.</p></div>
        </div>
      </div>
    </div>
    <div class="col-md-8 div-holder">
      <div class="customDiv">Main Content Area</div>
    </div>
    <div class="col-md-2 div-holder">
      <div class="customDiv">Right Side Bar</div>
    </div>
  </div>
</div>

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>

Remove padding from columns in Bootstrap 3

You'd normally use .row to wrap two columns, not .col-md-12 - that's a column encasing another column. Afterall, .row doesn't have the extra margins and padding that a col-md-12 would bring and also discounts the space that a column would introduce with negative left & right margins.

<div class="container">
    <div class="row">
        <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

        <div class="col-md-4 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Dimensions</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>

        <div class="col-md-8 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Results</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>
    </div>
</div>

if you really wanted to remove the padding/margins, add a class to filter out the margins/paddings for each child column.

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

---

Related Topics