Jump to content
harry_ord

Full width rows in Bootstrap

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...