Remove padding from columns in Bootstrap 3

Question

Problem:

Remove padding/margin to the right and left of col-md-* in Bootstrap 3.

HTML code:

<div class="col-md-12">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

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

            <div class="widget-content" id="">
                <div id='jqxWidget'>
                    <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                    <div style="clear:both;" id="listBoxB"></div>

                </div>
            </div>
        </div>
    </div>

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

            <div class="widget-content">
                <div id="map_canvas" style="height: 362px;"></div>
            </div>
        </div>
    </div>

</div>

Desired output:

Currently this code adds padding/margin to the right and left of the two columns. I am wondering what it is I am missing in order to remove this extra space on the sides?

Notice:

If I remove "col-md-4" then both columns expand to 100% but I want them to be next to each other.

Answer 1

You can create a new class for removing margin and can apply to the element where you want to remove extra margin:

.margL0 { margin-left:0 !important }

!important : it will help you to remove the default margin or overwrite the current margin value

and apply to that div from in which you want to remove the margin from left side

Answer 2

You can create Less Mixins using bootstrap for manage margins and paddings of your columns like,

http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/

Usage:

xs-padding-lr-15px//left right both
xs-padding-l-15px 
xs-padding-r-15px

Similarly for setting margin/padding zero you can use,

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px

Answer 3

None of the above solutions worked perfectly for me. Following this answer I was able to create something that works for me. Here I am also using a media query to limit this to small screens only.

@media (max-width: @screen-sm) {
    [class*="col-"] {
      padding-left: 0;
      padding-right: 0;
    }
    .row {
      margin-left: 0;
      margin-right: 0;
    }
    .container-fluid {
      margin: 0;
      padding: 0;
    }
}

Answer 4

simply Add "no-padding" which is inbuilt class in bootstrap

Answer 5

You can customize your Bootstrap Grid system and define your custom responsive grid.

change your default values for the following gutter width from @grid-gutter-width = 30px to @grid-gutter-width = 0px

(Gutter width is padding between columns. It gets divided in half for the left and right.)

Answer 6

Wrap your columns in a .row and add to that div a class called "no-gutter"

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

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

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

Then paste below contents to your CSS file

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}