I want to make a div that will take the width of the full-screen. I can manage the div margin and width but I want it to be responsive (using bootstrap), it wont be if i manage the problem changing the width and margin using pixels. I have tried doing the method I have seen: body {margin: 0; padding: 0} but it doesn't work. Any tips are greatly appreciated, Thanks
Using bootstrap with full with? Do you mean container-fluid?
You can do the following
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
</div>
</div>
</div>
You can read more about bootstrap grid system here: Bootstrap Grid
eg:div {width: 100%};
div {width: calc(100% - 20px)}
css3 calc().
try it instead
Related
Im trying to get a fixed width side bar with a responsive main div when using bootstrap 2.3.2.
Something like this image below
Ived tried to use a 200px fixed width div and then place a fluid div next to it, but couldnt get it to work. Any ideas ? ive made a js fiddle of the problem here - http://jsfiddle.net/KAfMB/1/
This is because your "fixed-span" class is being overridden by the bootstrap span classes.
You can solve this removing the word "span" from your class:
<div class="row-fluid">
<div class="fixed blue cols">...</div>
<div class="span8 red cols">...</div>
</div>
.fixed {
width:200px;
float: left;
}
Here's the fiddle:
http://jsfiddle.net/KAfMB/4/
At the moment I am doing the following to get a div stretch across the complete width:
<div class="container-fluid banner">
<div class="container">
<div class="row">
<div class="span12">
<img src="image.png">
</div>
</div>
</div>
</div>
In my example, I'm wrapping the content in a container-fluid to force the content to stretch to full width.
As far as I know, Bootstrap doesn't provide a better and easier way to stretch content to full width and my approach has some disadvantages. Are there better ways to accomplish this?
if you use some css reset so you have to look what you have done there with body tag, after that as it was said before use
.container {width: 100%}
You can change the container styles if you wish.
.container {width: 100%}
You would have to make other changes, of course; but whatever is done in CSS can be undone (well, almost everything).
<div class="internal-wrapper row-fluid">
<div class="Header span12">
<div class="HeaderTitle span6"></div>
<div class="span6"></div>
</div>
</div>
Now, when I do padding on internal-wrapper, I am expecting the padding to effect on the entire grid! inside it. But an overflow is occurring (I think, the right padding is not working)
.internal-wrapper {
padding-left: 30px;
padding-right: 30px;
}
The blue bar below represents Header class. The green box, represents padding! So, Its happening on left but not right
.row-fluid is 100% width. Because it's using a border-box layout, any padding you put is added to that 100%. See http://paulirish.com/2012/box-sizing-border-box-ftw/. However, setting it to use the content-box model will probably cause other problems in Bootstrap.
How to fix it - add an inner element with the padding.
<div class="row-fluid">
<div style="padding-left: 30px; padding-right: 30px;">
...
</div>
</div>
I can't see (or discern) from your post what's wrong, but here's my guess: By placing padding on an element that Bootstrap sizes, you've altered its width. Try putting margin on .Header instead.
If this doesn't help, please create a demo: http://jsfiddle.net/
Ok, I am using the 960.gs and for some design purposes I want a 100% width line with my header elements. But I can't get it to work properly without having to include multiple containers, wich I don't exactly favor.
So my question is this; how can I have a 100% width div on the top of my page, and have the content of that div follow the grid system?
Thank you in advance!
If I guessed this is what you want:
<div style="width: 100%; ...">
<div class="container_12">
your grid layout here
</div>
</div>
how would you approach the design of the following layout without using any tables?
i have tried but cannot get the height of the 3 central div elements to 100% height.
any help would be appreciated. thanks in advance!
One very useful and easy solution I use for three equal height columns is the following: Make a wrapper which is positioned relative and with height:100%. Then all the children are positioned absolute and adding height:100%, will take the whole height of your wrapper. Because positioning them absolute will move it in the top-left side of your screen, you apply margin-left accordingly to move it in the right side of your browser.
html
<div id="wrapper">
<div id="first" class="column"></div>
<div id="second" class="column"></div>
<div id="third" class="column"></div>
</div>
css
body,html,#wrapper,.column {height:100%;}
#wrapper {position:relative;}
.column {position:absolute;border:1px solid black;width:33.3%}
#second {margin-left:33.3%}
#third {margin-left:66.6%}
Demo: http://jsbin.com/igoso4
I have tested the above method in firefox,chrome,safari,ie 7,8+, opera.