Why is my column being eaten despite customized content?

Question

I have one col, one row, and there three nested columns. Within each column is a div button. I didn't use the bootstrap default button on purpose, and I have created my own, just that you see one column is being eaten.

Please see the image:

I am almost certain there is nothing wrong with HTML. Main div col is set to col-md-1 to test nested responsive elements within smaller scale. Does anyone understand why content(button) is acting as it would be too big for columns and why columns are being eaten in my case?

here is the code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="col-md-1 col-xs-1">
    <div class="row" style="padding:0 !important;margin:0 !important;">
        <div class="col-md-1 col-xs-1" style="padding:0 !important;margin:0 !important;">
            <button class="button"  type="button" style="background-color: green; height: 20vmin; width: 100%; border:none; display: block;"></button>
        </div>
        <div class="col-md-10 col-xs-10" style="padding:0 !important;margin:0 !important;">
            <button class="button"  type="button" style="background-color: red; height: 20vmin; width: 100%; border:none; display: block;"></button>
        </div>
        <div class="col-md-1 col-xs-1" style="padding:0 !important;margin:0 !important;">
            <button class="button"  type="button" style="background-color: black; height: 20vmin; width: 100%; border:none; display: block;"></button>
        </div>
    </div>
</div>

Nothing good comes out of messing with cols padding or margin, unless you do it via sass / less the way it's meant to be done. — yBrodsky, Dec 27 '16 at 12:14
Muhammad Usman, outline:none doesn't work, it does nothing. but thank you anyway — Testing man, Dec 27 '16 at 12:23
yBrodsky. Well setting up main col to col-md-4 does a good result, at least it looks like — Testing man, Dec 27 '16 at 12:24

score 2 · Answer 1 · edited May 23 '17 at 12:08

TL;DR

The problem appears because of the column gutter, which by default is 30px. This means the minimum width of a column will always be 30px, no matter size it would have. Therefore, when you have a column with a width less than 30px, it is actually still going to have 30px as total width, and the columns will eat from each other because of that padding.

In detail

The working snippet

Firstly, I want to show you the working snippet I have managed to get. I have removed the inline styling from the HTML markup and added some CSS classes for better readability and easier understanding.

.pa-0 {
  padding: 0 !important;
}
.ma-0 {
  margin: 0 !important;
}
.my-button {
  display: block;
  height: 20vmin;
  border: none;
  outline: none;
  background: transparent;
}
.bg-green {
  background-color: green;
}
.bg-red {
  background-color: red;
}
.bg-black {
  background-color: black;
}
.bg-blue {
  background-color: blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-3 pa-0 bg-blue">
      <div class="row ma-0">
        <div class="col-xs-1 pa-0 bg-green">
          <button class="button my-button" type="button">
          </button>
        </div>
        <div class="col-xs-10 pa-0 bg-red">
          <button class="button my-button" type="button">
          </button>
        </div>
        <div class="col-xs-1 pa-0 bg-black">
          <button class="button my-button" type="button">
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

The problem

The problem described appears because of the way columns and rows are styled in Bootstrap. As you may already know, columns are having a gutter (padding) of 15px on each side, and rows have a margin of -15px, whose purpose is to remove the padding from the parent container (assuming correct syntax is applied, i.e. parent is a container or column). This means that the spacing created by the parent div is removed with the negative margin from the row.

This is a neat way of creating responsive design, but it also has an issue, which is the one you describe. Because all elements in Bootstrap have box-sizing: border-box, it means that the width of an elements is including the padding.

For example, if you have an column with the width of 100px, its size will be decreased by the gutter, which is by default 30px. Therefore, the actual width of the column will be 70px.

Having that said, let's think what is happening when the width of this column is less than 30px.

Our column is now 20px in width. As we need to decrease this size by the 30px gutter, we would normally get a negative width, which is impossible. Thus, the actual width of the column will be 0, and the padding will still be applied as 30px.

A solution

Simply create some utility classes which removes the padding and margins from the columns and rows. This way, the column will have the size they should, and the buttons will correctly be fit in their parents without being eaten by the padding from other elements.

I have used the same naming for the padding and margin utility classes as in Bootstrap 4. In pa-0, p comes from padding, a from all and 0 from the value set to this attribute.

Notes for your initial snippet

I am not sure the markup you have provided is in the way you normally do it, but it is worth to note:

It is generally a bad practice to have inline-styling set in your HTML markup¹; mainly because of the Separation of Concerns principle and the reuse of styling you write. In your case, except for the background, you have used the same styling for buttons in three places - you can just create a new CSS class and use it in all three places.
In the Bootstrap grid system², the column needs to always be a direct descendant of a row, and the row needs to be either descendant of a container or column, as you can see in the working example. By not having correct Bootstrap markup, unexpected styling behaviour might occur.