I don't understand why row class has margin-left: -20px (so it grows after parents border like on the image). I think nobody needs this behavior. Or am I doing something wrong?
<div class="container">
<div id="top-container" class="row">
<div class="span8">
<h1>App</h1>
</div>
<div class="span4">
</div>
</div>
</div>
You can use row-fluid instead of row, then your span4 and span8 won't have margin-left.
<div class="container">
<div id="top-container" class="row-fluid">
<div class="span8">
<h1>App</h1>
</div>
<div class="span4">
</div>
</div>
</div>
For people trying to find this out for Bootstrap 3:
Grids and full-width layouts Folks looking to create fully fluid
layouts (meaning your site stretches the entire width of the viewport)
must wrap their grid content in a containing element with padding: 0
15px; to offset the margin: 0 -15px; used on .rows.
Source (search for Grids and full-width layouts)
Related
I'm really struggling with Bootstrap regarding the way it handles divs.
It seems to me, that all column classed divs using Bootstrap CSS are floated. For example:
<div class="col-md-3">
property
</div>
This above div has the style: float: left; as defined in Bootstrap CSS.
Now everyone knows about the issue with floating, it causes the parent div to not expand to the height because it doesn't 'see' floated elements as pushing out the container.
I feel like this is a serious flaw in Bootstrap. I have some classes to add margin to divs, for example:
.full-buffer{margin:20px 0}
If I want to use this class on a div that wraps a number of Bootstrap columns, it doesn't work. Because the div has no height. If I wanted to add a background colour, it won't show up. For example:
.background-coloured-div{background-color:#0F0;}
<div class="background-coloured-div">
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
</div>
The above won't show any background colour, because all of the divs inside are floated, so it'll collapse to 0px in height.
JSFiddle without bootstrap
JSFiddle with bootstrap - fixes one problem and causes another
So, what's the proper way to use Bootstrap columns? If everything is floated, how can you add proper margins, background colours etc to parent divs? Isn't this a massive flaw of the whole system?
Bootstrap has a row class that contains the floats using:
.row:before {
display: table;
content: " ";
}
.background-coloured-div {
background-color: #0F0;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="background-coloured-div row">
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
</div>
You'll want to wrap those cols in a .row div to contain the floats.
Don't forget to also contain that row in a .container or .container-fluid to counter balance the -15px margin applied to .row.
<div class="container-fluid">
<div class="background-coloured-div row">
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
</div>
</div>
http://getbootstrap.com/css/#grid-example-fluid
If for whatever reason you don't want to use a .row, you could add the following to your css to contain the floats of that divs children, but I recommend using Bootstraps solution:
background-coloured-div:after {
content:'';
display:table;
clear:both;
}
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be
immediate children of rows.
In your case, the code should be:
<div class="container-fluid">
<div class="row background-coloured-div">
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
</div>
</div>
New to responsive bootstrap here. I have 2 div's per row and 2 rows showing on my desktop. I used display: inline-block (see below link):
https://jsfiddle.net/9ya7kb67/
HTML:
<div class="parent">
<div class="child"> content </div>
<div class="child"> content </div>
<div class="child"> content </div>
<div class="child"> content </div>
</div>
CSS:
.parent {
width: 200px;
}
.child {
display: inline-block;
width: 80px;
}
However, I'd like to keep this layout in desktop but change it to 1 div per row (for 4 rows) on mobile using responsive bootstrap. How can I do this?
Check the bootstrap documentation for its grid system here: http://getbootstrap.com/css/#grid-example-mixed-complete
There are 4 different types of classes col-sm col-xs col-md col-lg each one fitted for different screen sizes and you can combine them to make dynamic grids for your site.
<div class="row">
<div class="col-xs-12 col-md-6">Test col</div>
<div class="col-xs-12 col-md-6">Test col</div>
<div class="col-xs-12 col-md-6">Test col</div>
<div class="col-xs-12 col-md-6">Test col</div>
</div>
I didn't exactly understand what your end goal is, but the code above is something similar to what you want. On small screens col-xs-12 will fill the entire row, on medium to large screen you will have two col-md-6 on each row. Make sure to read the bootstrap documentation to learn more about it.
Basically, I need to put a back-to-top button at the right side of the footer.
Something like this:
What I get is this:
You can see that there is a blank space between footer and the end of viewport, that space is the height the back-to-top button, if I remove the button the blank space is removed too.
I'm using bootstrap so my html code is similar to:
<footer class="container-fluid">
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
<div class="back-to-top>TOP</div>
</footer>
You can see an example in Bootply. You can see that the footer has to be 20px height (min-height: 20px) but instead it is 40px.
I think that my problem will be solved if I can put the .back-to-top div beside the .container div.
How can I get this?
You can use helper class pull-right and move TOP link before container:
<footer class="container-fluid">
<div class="back-to-top pull-right">TOP</div>
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
</footer>
You need to remove your CSS bloc:
.back-to-top {
float: right;
position: relative;
top: -20px;
}
Doc: http://getbootstrap.com/css/#helper-classes-floats
Having a min-height proxy doesn't mean you footer is going to be 20px. That just mean its height won't be smaller than that. If you want your height to be 20px, use height property. If for some reason you want it to be variable, you can look to the max-height property.
For your "back-to-top" button, here is my suggestion :
http://jsfiddle.net/Bladepianist/38ne021p/
HTML
<footer class="container-fluid navbar-inverse">
<div class="row">
<div class="col-xs-6">CONTENT 1</div>
<div class="col-xs-5">CONTENT 2</div>
<div class="col-xs-1 text-right" id="back-to-top">TOP</div>
</div>
</footer>
CSS
.container-fluid {
color: white;
}
Basically, I change your "back-tot-top" class to an ID in my model but you're free to adapt it to your liking.
Using the col-system and the text-positions classes, you can achieve the same rendering as you show in your question. That way, the back-to-top button is part of the footer.
Hope that's helping ;).
Building a portfolio site with TB v3.0.0 and encountered a horizontal scrolling issue that I can't seem to figure out.
Trying to achieve a full bleed for the images on mobile devices so I striped the left/right padding, but horizontal scrolling occurs. Here's the css I added that's causing the problem:
#media (max-width: 767px) {
.container {
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
}
}
Here's the staging site I'm working off of: http://www.kesernio.com/playground/
I wonder if changing the padding helps to set the images 100% in the first place.
The code below will be 100% viewport (green). Also mention your content has a padding. This padding is set on your col-xs-12 (to remove it: set the padding of .col-xs-12 to zero )
In your case remove the padding of your col-- with images.
<div class="container" style="background-color:green;">
<div class="row">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
</div>
About your scrollbar, in fact you do this:
<div class="container" style="background-color:green;padding:0">
<div class="row">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
add padding:0 this will give you a horizotal scrollbar cause your .row classes have a negative margin of 15px on both sides.
To remove the scrollbar set the margin of the .row to zero to:
<div class="container" style="background-color:green;padding:0">
<div class="row" style="margin:0">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
See also: https://stackoverflow.com/a/19044326/1596547 about the construction of the gutter of the grids
I have some divs that should take the entire height of a page. I managed to get this working as i needed. (Some fixed rows and some flexible rows) like in a html table.
I took the solution from one of my other questions here:
Layout divs in css like table cells in HTML Tables
Today i had to add a div inside the flexible row which should take 100% of the height of the flexible row. Which works great in all major browsers. Muahaha that was a good joke wasn't it? Of course this doesn't work as expected in IE see my js fiddle:
<div class="tableContainer">
<div class="row rowA">
<div class="cell">Test</div>
</div>
<div class="row rowB">
<div class="cell">Test</div>
</div>
<div class="row rowC">
<div class="cell">Test</div>
</div>
<div class="row rowD">
<div class="cell testcell">
<div class="testcontent">Test</div>
</div>
</div>
<div class="row rowE">
<div class="cell">Test</div>
</div>
</div>
http://jsfiddle.net/7ewEJ/3/
the ie seems to take the "100%" from the page and not from the enclosing flexible table row. So the blue div should take the whole space of the purble table row.
Am i doing anything wrong?
Could this be a bug in ie's height calculation?
http://jsfiddle.net/7ewEJ/5/
div.testcell{
height: 100%;
width: 100%;
min-width: 1px;
min-height: 1px;
/*background: #fff;*/
align: center;
display: block;
}