Full width rows in Bootstrap

[harry_ord]

Hello.

This is my page:

http://feriapixel.cl/anchour/

 

I'm using Bootstrap's grid system and whenever i use divs with the row class they get stuck in a container, and i want them to use be full width.

This is one of my divs for example:

<div class="content-seis" >

<div class="row" >

<div class="col-sm-6 showroom coffee-break" >

<h2>Un coffee break con sabor y atención casera, para tu trabajo</h2>

<p>Café americano, tapaditos, fruta, jugos, opciones vegetarianas y más.

Tenemos promociones ya armadas, pero tomamos tu pedido con gusto.</p>

<a href="#" class="btn btn-showroom" role="button">NECESITO COFFEE BREAK</a>

</div>

<div class="col-sm-6 showroom pasteleria-diseno">

<h2>Pastelería con diseño</h2>

<p>Tortas con diseño, popcakes, cupcakes, alfajores y más.

Te damos el diseño que necesites.</p>

<a href="#" class="btn btn-showroom" role="button">QUIERO TORTAS CON DISEÑO Y MÁS</a>

</div>

</div>

</div>


I want that div to be full width. Sorry for the really basic question, but i can't manage to do it, i tried putting all inside a div withe the container-fluid class but it didn't work.

[dsonesuk]

The container classes have 15px padding left and right, the row class has margin left and right of -15px, this will give the effect of filling the whole width of screen, the col-*-* classes also has left/right 15px padding, you can overide this by creating a 'gutter_less' class and zeroing the padding for larger devices, and reinstate padding when required in media queries for smaller devices.

[harry_ord]

Like this?

.row {

padding: 0;

}

It doesn't do anything.

[dsonesuk]

No! you only need to use 'container-fluid' class, with a direct child of class 'row', these will then give you fill width of parent container, text, background-color will file the whole width. if you don't use 'container-fluid' class, the row element will extend beyond the confines of parent container by 15px either side, causing scroll bars to appear horizontally.

 

The child elements( 'col-md-1' to 'col-md-12' for example) within container element with class 'row' also have 15px left/right padding, and usually you would remove only the padding from these to give you full width if that is what you mean? AS the use of 'container-fluid' class and class 'row' should give you full width.

 

Also if you have to use left: right: top: bottom: properties on position: relative; element to position it! YOU ARE DOING IT WRONG! margin or padding should be used.

[dsonesuk]

'row' classes doesn't use padding? so yeah! nothing will happen.

[harry_ord]

I have it like this now:

<div class="content-seis" >

<div class="container-fluid">

<div class="row" >

<div class="col-sm-6 showroom coffee-break hoverEffect" >

<h2>Un coffee break con sabor y atención casera, para tu trabajo</h2>

<p>Café americano, tapaditos, fruta, jugos, opciones vegetarianas y más.

Tenemos promociones ya armadas, pero tomamos tu pedido con gusto.</p>

<a href="#" class="btn btn-showroom" role="button">NECESITO COFFEE BREAK</a>

</div>

<div class="col-sm-6 showroom pasteleria-diseno hoverEffect">

<h2>Pastelería con diseño</h2>

<p>Tortas con diseño, popcakes, cupcakes, alfajores y más.

Te damos el diseño que necesites.</p>

<a href="#" class="btn btn-showroom" role="button">QUIERO TORTAS CON DISEÑO Y MÁS</a>

</div>

</div>

</div>

</div>

It doesn't do anything, you can see it here:

http://feriapixel.cl/anchour/

[dsonesuk]

I don't understand what you want?

 

<div class="content-seis" > is full width but has 120px padding al-round its inner edge, any element inside that will be 120px from its edges, by placing container-fluid element inside that means it will fill the available width, ie starting from the innermost edge of padding applied, it won't go beyond that! the 'container-fluid' element has 15px padding, the same rule applies, elements by default will be 15px from within its inner edge, the element with 'row' class has minus margin of -15px, this will cause its edge to extend beyond padding inner edge to the actual edge of element, end with it edges tight to inner padding edges of 'content-seis' element.

 

So IF you mean by filling full-width of browser viewport or browser window, you need to remove the 120px padding.

[harry_ord]

Oh my god!

I always tought that the padding was like the inner border, i didn't know it would affect the div from the outside. Ok, i just removed the 120px padding and now is full width, thanks.

[dsonesuk]

You can think of it as a inner border whose outer boundary edge fills the total width available to it, any child element width within a element using this, is reduce to the innermost border edge.