Remove Padding from Columns in Bootstrap 3

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;
}

Padding on a Bootstrap 3 col seems impossible to remove

I'm not sure what you want to achieve, but for me, if you make a very little change at page https://koed.dk/da-dk/page/stack like below, then effect is great:

.row.wrapping,
.row.wrapping .row {
    margin-left: -5px;
    margin-right: -5px;
}
.wrapping [class^=col-] {
    padding-left: 5px;
    padding-right: 5px;
}

A way to make Bootstrap col-xx no padding between the columns

There should be no problems, but i would not declare the 0 padding on the entire col-X, instead i would create a custom no-padding class, and apply the 0 padding to that class.

<style>
.no-padding{
    padding-left: 0px;
    padding-right: 0px;
}
</style>

<div class="row">
    <div class="col-xs-12">
        <div class="col-xs-4 no-padding">a</div>
        <div class="col-xs-4 no-padding">b</div>
        <div class="col-xs-4 no-padding">c</div>
    </div>
</div>

Its a good idea to not modify the style of boostrap core elements, because it might be confusing to other people working on the same code.

Removing padding gutter from grid columns in Bootstrap 4 / Bootstrap 5

Bootstrap5:
Comes with gutter utilities

• all viewports g-0 .. g-5
• responsive viewports g-sm-0 .. g-lg-5
• horizontal/vertical gy-0 .. gx-5

Example with zero-gutter width:

<div class="container">
  <div class="row g-0">
    <div class="col-6">
      <div class="p-3 border bg-light">...</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">...</div>
    </div>
  </div>
</div> 

Bootstrap4:
Comes with .no-gutters out of the box.
source: https://github.com/twbs/bootstrap/pull/21211/files

Bootstrap3:

Requires custom CSS.

Stylesheet:

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Then to use:

<div class="row no-gutters">
  <div class="col-xs-4">...</div>
  <div class="col-xs-4">...</div>
  <div class="col-xs-4">...</div>
</div>

It will:

• Remove margin from the row
• Remove padding from all columns directly beneath the row

Remove padding in Bootstrap Col without letting the image enlarge

Well, here's a solution I came up with...

Add the pl-md-0 class to the column for the teaser 2 image. (that removes the left padding for medium screens)

Then put the contents of the first column (that includes the teaser 1 image) into a new row-column pair.

Then add the pl-md-0 class to the inner column for the teaser 1 image.

I believe this is the effect you were going for. (I didn't touch the right paddings because I thought it wasn't necessary but you certainly could remove both the left and right paddings with the px-md-0 class.)

Here's the code:

.bg-box-light {            background-color: #eee; /* TBD ! */        }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div class="container mt-3">    <div class="row">
        <!-- Teaser 1 -->        <div class="col-12 col-md-4" id="teaser_Umzug">            <div class="row">                <div class="col pl-md-0">                <div class="teaser-img teaser-stick">                    <img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Umzug" class="img-fluid z-1 mr-1" />
                    <div class="teaser-overlay pt-2 pl-4 z-2">                        <div class="teaser-txt">                            <h2 class="mb-3"></h2>                            <p class="mb-4">                                <span class="bold clearfix">Settelen –</span> ist Ihr Partner<br/>für <a href="#">regionalen</a> und <a href="#">nationalen</a> Umzug.                            </p>                            <button type="button" class="teaser">Mehr erfahren</button>                        </div>                    </div>
                </div>            </div>
            </div>
        </div>
        <!-- Teaser 2 -->        <div class="col-12 col-md-8" id="teaser_AutoService">            <div class="row">
                <!-- Teaser 2 Img -->                <div class="col-12 col-md-6 pl-md-0 bg-box-light">                    <div class="ml-0 mr-0"><img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Auto und Service" class="img-fluid" /></div>                </div>
                <!-- Teaser 2 Text -->                <div class="col-12 col-md-6 bg-box-light">                    <div class="teaser-txt pt-4 pl-4">                        <p class="mb-4">                            <span class="bold clearfix">XY Company –</span> Ihr starker Partner in Sachen <a href="#">Auto</a> und <a href="#">Service</a>.                        </p>                        <button type="button" class="teaser">Services</button>                    </div>                </div>
            </div>
        </div>
    </div></div>