harry_ord Posted November 7, 2016 Share Posted November 7, 2016 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 7, 2016 Share Posted November 7, 2016 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. Link to comment Share on other sites More sharing options...
harry_ord Posted November 7, 2016 Author Share Posted November 7, 2016 Like this? .row { padding: 0; }It doesn't do anything. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 7, 2016 Share Posted November 7, 2016 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 7, 2016 Share Posted November 7, 2016 'row' classes doesn't use padding? so yeah! nothing will happen. Link to comment Share on other sites More sharing options...
harry_ord Posted November 7, 2016 Author Share Posted November 7, 2016 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/ Link to comment Share on other sites More sharing options...
dsonesuk Posted November 7, 2016 Share Posted November 7, 2016 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. Link to comment Share on other sites More sharing options...
harry_ord Posted November 7, 2016 Author Share Posted November 7, 2016 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 7, 2016 Share Posted November 7, 2016 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now