I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
i am using zurb foundation for building website, but now i am facing a problem as follows
There are four columns in a row and one of them is not visible sometimes as per some conditions, the code is
<div class="row">
<div class="small-3 columns">1 ... </div>
<div class="small-3 columns" style="display:none;">2 ... </div>
<div class="small-3 columns">3 ... </div>
<div class="small-3 columns">4 ... </div>
</div>
Now the problem is when the div is disabled the empty space between them should be used by other divs, but it is not happening in my case,
I know, i am missing small point, but cant get it
here is the image of problem
I need the 4th div to be shifted to left, as 3rd div is shifted automatically, if 2nd div is display:none
The ZURB-Foundation (looks like you are using version 4) doesn't work like that by default.
What I usually do is create a .left {float: left !important;} class. If you apply that to your 4th div then it will do as you say.
However depending on your reason for doing this AND WHETHER THIS IS ONLY SUPPOSED TO APPLY TO DESKTOP/TABLET/MOBILE or ALL THREE, you might want to use
#media queries in the stylesheet to specify where and when.
Examples:
#media (query goes here) {
.row .columns:last-child {
float: left;
}
}
** OR **
.left {
float: left !important;
}
THEN
<div class="row">
<div class="small-3 columns">1 ... </div>
<div class="small-3 columns" style="display:none;">2 ... </div>
<div class="small-3 columns">3 ... </div>
<div class="small-3 columns left">4 ... </div>
</div>
Try this fiddle
HTML
<div class="row">
<div class="small-3 columns">1 ... </div>
<div class="small-3 columns" style="display:none;">2 ... </div>
<div class="small-3 columns">3 ... </div>
<div class="small-3 columns">4 ... </div>
</div>
CSS
div.columns
{
padding:10px;
background:#00bfff;
width:20%;
display:block;
float:left;
}
#jnelson thanks for the help, now i realized the power of !important, so i have created simple solution
.abc{
float:left !important;
}
This also worked correctly on all type of devices
You should not be changing the fundamental structure of how the columns are sized or work.
Instead you should just uses different classes. If you know that one column will be disabled, and I am assuming you are using javascript to do this. Then also use javascript to add the proper column width. If you have 3 columns instead of 4(due to one being display none) give the three columns a small-4. This line of thinking will also allow you to handle two columns (small-6).
If you absolutely have to use 3 columns I agree with the above posts that you need to change.
[class*="column"]+[class*="column"]:last-child {
float: right;
to
[class*="column"]+[class*="column"]:last-child {
float: left;
Can someone help me understand why would wells correctly in Safari and not correctly (overlapping) in Chrome?
This is how it looks in Chrome http://i.imgur.com/OOeTw8b.png
Basically the wells are overlapping in Chrome. (on top of each other)
The code is simply
<div class='row-fluid'>
<div class='span4'>
<div class='well well-large' style='width:100%; display:table; background:#ffffff;'>
<b>Hosts Down</b>
data
</div>
<div class='well well-large' style='width:100%; display:table; background:#ffffff;'>
<b>Critical Services</b>
data
</div>
<div class='well well-large' style='width:100%; display:table; background:#ffffff;'>
<b>Links</b>
data
</div>
</div>
<div class='span8'>
<div class='well well-large' style='width:100%; display:table; background:#ffffff; text-align:center;'>
graphs
</div>
</div>
</div>
It’s just a guess, but looking at your code I’d imagine it’s because of your inline styles. You’re specifying a width of 100%, but the wells will also have padding, which will add up to more than 100% of the parent container.
And in saying that, don’t use inline styles.
I want to create alternating 100% colored blocks. An "ideal" situation is illustrated as an attachment, as well as the current situation.
Desired setup:
Currently:
My first idea was to create an div class, give it a background color, and give it 100% width.
.block {
width: 100%;
background: #fff;
}
However, you can see that this obviously doesn't work. It's confined to a container area. I tried to close the container and that didn't work either.
The container class is intentionally not 100% width. It is different fixed widths depending on the width of the viewport.
If you want to work with the full width of the screen, use .container-fluid:
Bootstrap 3:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
</body>
Bootstrap 2:
<body>
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
<div class="row">
<div class="span8"></div>
<div class="span4"></div>
</div>
<div class="row">
<div class="span12"></div>
</div>
</body>
QUICK ANSWER
Use multiple NOT NESTED .containers
Wrap those .containers you want to have a full-width background in a div
Add a CSS background to the wrapping div
Fiddles: Simple: https://jsfiddle.net/vLhc35k4/ , Container borders: https://jsfiddle.net/vLhc35k4/1/
HTML:
<div class="container">
<h2>Section 1</h2>
</div>
<div class="specialBackground">
<div class="container">
<h2>Section 2</h2>
</div>
</div>
CSS: .specialBackground{ background-color: gold; /*replace with own background settings*/ }
FURTHER INFO
DON'T USE NESTED CONTAINERS
Many people will (wrongly) suggest, that you should use nested containers. Well, you should NOT.
They are not ment to be nested. (See to "Containers" section in the docs)
HOW IT WORKS
div is a block element, which by default spans to the full width of a document body - there is the full-width feature. It also has a height of it's content (if you don't specify otherwise).
The bootstrap containers are not required to be direct children of a body, they are just containers with some padding and possibly some screen-width-variable fixed widths.
If a basic grid .container has some fixed width it is also auto-centered horizontally.
So there is no difference whether you put it as a:
Direct child of a body
Direct child of a basic div that is a direct child of a body.
By "basic" div I mean div that does not have a CSS altering his border, padding, dimensions, position or content size. Really just a HTML element with display: block; CSS and possibly background.
But of course setting vertical-like CSS (height, padding-top, ...) should not break the bootstrap grid :-)
Bootstrap itself is using the same approach
...All over it's own website and in it's "JUMBOTRON" example:
http://getbootstrap.com/examples/jumbotron/
This is how you can achieve your desired setup with Bootstrap 3:
<div class="container-fluid">
<div class="row"> <!-- Give this div your desired background color -->
<div class="container">
<div class="row">
<div class="col-md-12">
... your content here ...
</div>
</div>
</div>
</div>
</div>
The container-fluid part makes sure that you can change the background over the full width. The container part makes sure that your content is still wrapped in a fixed width.
This approach works, but personally I don't like all the nesting. However, I haven't found a better solution so far.
There is a workaround using vw. Is useful when you can't create a new fluid container.
This, inside a classic 'container' div will be full size.
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}
After this there is the sidebar problem (thanks to #Typhlosaurus), solved with this js function, calling it on document load and resize:
function full_row_resize(){
var body_width = $('body').width();
$('.row-full').css('width', (body_width));
$('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
return false;
}
In bootstrap 4, you can use 'w-100' class (w as width, and 100 as 100%)
You can find documentation here:
https://getbootstrap.com/docs/4.0/utilities/sizing/
If you can't change the HTML layout:
.full-width {
width: 100vw;
margin-left: -50vw;
left: 50%;
}
<div class="container">
<div class="row">
<div class="col-xs-12">a</div>
<div class="col-xs-12">b</div>
<div class="col-xs-12 full-width">c</div>
<div class="col-xs-12">d</div>
</div>
</div>
Demo: http://www.bootply.com/tVkNyWJxA6
Sometimes it's not possible to close the content container.
The solution we are using is a bit different but prevent a overflow because of the
firefox scrollbar size!
.full-width {
margin-top: 15px;
margin-bottom: 15px;
position: relative;
width: calc(100vw - 10px);
margin-left: calc(-50vw + 5px);
left: 50%;
}
Here is a example: https://jsfiddle.net/RubbelDeKatz/wvt9253q
Instead of
style="width:100%"
try using
class="col-xs-12"
it will save you 1 character :)
Sorry, should have asked for your css as well. As is, basically what you need to look at is giving your container div the style .container { width: 100%; } in your css and then the enclosed divs will inherit this as long as you don't give them their own width. You were also missing a few closing tags, and the </center> closes a <center> without it ever being open, at least in this section of code. I wasn't sure if you wanted the image in the same div that contains your content or separate, so I created two examples. I changed the width of the img to 100px simply because jsfiddle offers a small viewing area. Let me know if it's not what you're looking for.
content and image separate: http://jsfiddle.net/QvqKS/2/
content and image in same div (img floated left): http://jsfiddle.net/QvqKS/3/
I would use two separate 'container' div as below:
<div class="container">
/* normal*/
</div>
<div class="container-fluid">
/*full width container*/
</div>
Bare in mind that container-fluid does not follow your breakpoints and it is a full width container.
I'd wonder why someone would try to "override" the container width, since its purpose is to keep its content with some padding, but I had a similar situation (that's why I wanted to share my solution, even though there're answers).
In my situation, I wanted to have all content (of all pages) rendered inside a container, so this was the piece of code from my _Layout.cshtml:
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
<div class="container">
#RenderBody()
</div>
</section>
</div>
In my Home Index page, I had a background header image I'd like to fill the whole screen width, so the solution was to make the Index.cshtml like this:
#section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
<div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}
<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
<div class="container">
<div class="row">
MORE CONTENT
</div>
</div>
</div>
I think this is better than trying to make workarounds, since sections are made with the purpose of allowing (or forcing) views to dynamically replace some content in the layout.
Though people have mentioned that you will need to use .container-fluid in this case but you will also have to remove the padding from bootstrap.
The following answer is not exactly optimal by any measure, but I needed something that maintains its position within the container whilst it stretches the inner div fully.
https://jsfiddle.net/fah5axm5/
$(function() {
$(window).on('load resize', ppaFullWidth);
function ppaFullWidth() {
var $elements = $('[data-ppa-full-width="true"]');
$.each( $elements, function( key, item ) {
var $el = $(this);
var $container = $el.closest('.container');
var margin = parseInt($container.css('margin-left'), 10);
var padding = parseInt($container.css('padding-left'), 10)
var offset = margin + padding;
$el.css({
position: "relative",
left: -offset,
"box-sizing": "border-box",
width: $(window).width(),
"padding-left": offset + "px",
"padding-right": offset + "px"
});
});
}
});
This must work (Mobile phone as well as Desktop screen):
class: alignfull and class: img-fluid will do the magic.
<div class="alignfull">
<img class="img-fluid" style="background-size: cover;
background-position: center ;
background-repeat: no-repeat;
height: auto;
min-width: 100%;
width: -moz-available; "
src="{{ $image->image }}" alt="An image">
</div>
I don't know if this can be done with CSS, but before going the JavaScript way, I would like to know if it's possible to center (as a whole) a set of absolute positionned divs:
<div id="container">
<div id="item1" style="position:absolute;left:100px;top=50px>...some content...</div>
<div id="item2" style="position:absolute;left:0px;top=0px>...some content...</div>
<div id="item3" style="position:absolute;left:150px;top=100px>...some content...</div>
<div id="item4" style="position:absolute;left:75px;top=75px>...some content...</div>
</div>
I would like to center the bounding box of those items in the page.
Of course since they're styled with "position:absolute", they're out of the flow, so the container div has a size of 0 px... and the usual tricks didn't work.
Finally, the snippet above being just illustrative, in practice the items would be arbitrarily positionned (some of them dynamically), and their size and content is not known (and can be dynamic too). Because of all this dynamicity, I would prefer to have everything handled by CSS is possible, rather than having hook a whole bunch of events.
Hey now you can change your html and css than u can easily as like this
HTML
<div id="container">
<div id="item1">...some content...</div>
<div id="item2">...some content...</div>
<div id="item3">...some content...</div>
<div id="item4">...some content...</div>
</div>
Css
#container{
background:red;
overflow:hidden;
}
#item1, #item2, #item3, #item4{
background:pink;
margin:10px;
margin-left:100px;
}
Live demo
How about to give a fix width to #container and giving a position:relative;
Please check this http://jsfiddle.net/65vk2/