bootstrap grid exceeds width

Question

For some reason I don't understand the 3 column grid system is exceeding my 100% width.

code

<div class="row" style="border: 1px solid red">
    <div class="add_promo col-12 col-md-offset-0 col-xs-12 col-xs-offset-0"> 
        <input type="text" placeholder="ingresar código..." class=" col-md-6 col-md-offset-0 col-xs-6 col-xs-offset-0" />
        <button type="" class="btn btn-default btn-lg btn-success col-3 col-md-offset-0 col-xs-3 col-xs-offset-0" >Enviar</button>
        <button type="" class="btn btn-default btn-lg btn-danger col-md-3 col-md-offset-0 col-xs-3 col-xs-offset-0">Cancelar</button>
    </div>
</div>

Fiddle: https://jsfiddle.net/DTcHh/12328/

Thanks

Answer 1

In bootstrap, each column element has padding-left and padding-right which is used to create the 'gutter' in between the columns. However, this means that there is a gutter being created to the left of the first column, and to the right of the last column.. Because people often have nested rows, which almost always want the outer edges to be flush with the parent container, the .row class in bootstrap has negative margin-left and margin-right properties, equal to the column gutter width. This pulls the outer sides of the row outwards, allowing the outer gutters to sit outside of the container element.

This is what you are experiencing here... Your .row element is pulling the content just outside of the parent element. In order to solve this, bootstrap also supplies another class, built to serve as the main outer container for housing the grid system, and meant to hold .row elements.

It is aptly named .container

You can read more here:

http://getbootstrap.com/css/#overview-container

Here is an updated version of your Fiddle, to demonstrate:

https://jsfiddle.net/DTcHh/12329/

---

As a side note, if you were to not want that outer gutter even on the main parent element, you could forgo the .container element, and simply change the <div class="row" ... to be <div class="clearfix" ...

.row and .clearfix perform mostly the same function (holding floated elements - columns, in the case of rows - without them being removed from page flow), the primary difference of .row being the negative outer margins.