UPDATED
If I give a max-width to .container then my spans stops lining up properly.
<div class="container" style="max-width:940px">
<div class="row">
<div class="span4" style="background-color:#F00">1</div>
<div class="span4" style="background-color:#F00">2</div>
<div class="span4" style="background-color:#F00">3</div>
<div class="span4" style="background-color:#F00">4</div> <!-- make a new line-->
<div class="span4" style="background-color:#F00">5</div>
</div>
</div>
It seems whatever I wrap my spans in it has the same effect.
Is there any way to work around with this?
LIVE PREVIEW HERE
It's because Bootstrap has a width of 12 columns.
Your 3 first div have 4 + 4 + 4 columns, so it breaks line before print others div.
Try to reduce width... By example with class "span2" and you'll see the change :)
Bootstrap operates a 12 column CSS grid system you have 5 * span4 in one row, a row can only contain 3 * span4 before it'll wrap to a new row.
If you want one solid row just remember the sum of spanX can't be > than 12
See: http://getbootstrap.com/css/#grid-example-basic
Related
I have 3 rows in my webpage using bootstraps grid. The first row has 3 divs of equal width while the next two rows have 2 divs of the same width left aligned. However, the last div of the first row is longer than the first two divs and I want it to overflow into the second row. How would I do this?
I have a link here of what I mean: http://imgur.com/a/mxnaH
You would have to separate the page in example "content-left, content-right". Bootstrap isn't supposed to be used to have rows overflow in to another. So if you give content-left a width of like 8, and content-right 4. That way you can have different heights and make it seem like it's overflowing
Try this grid:
<div class="container">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
<div class="col-4"></div>
</div>
</div>
Here is my Bootstrap 3 jsFiddle, although you'll likely need to view it in full screen view in order to see it in all its glory.
As you can see, there are two TB3 "wells" called Herps and Derps. They are currently sitting on top of one another, and furthermore, they are wider than the navbar, jumbotron and footer wells.
I'd like these to both be next to each other on the same line/"row", and I'd like the two wells to be the same width of all the other contents. I'd also like to have a bit of padding (spacing) between the two wells so that they're not smushed right up next to each other.
My best attempt (from that jsFiddle above):
<div class="row">
<div class="span6">
<div class="well">Herps</div>
</div>
<div class="span6">
<div class="well">Derps</div>
</div>
</div>
...does not seem to be doing the trick. Any ideas where I'm going awry?
You need to use the col-x-y css styles for your wells for the appropriate screen size and columns. In this case, you could use col-sm-6 since you have two columns.
<div class="row">
<div class="col-sm-6">
<div class="well">Herps</div>
</div>
<div class="col-sm-6">
<div class="well">Derps</div>
</div>
</div>
JSFiddle
Bootstrap Grid System
I am trying to center two of my divs in Bootstrap 3's grid. The problem is, together they span 9 columns, which is an odd number of columns. My first div spans 6 columns, and the second one spans 3 columns. This leaves me with 3 extra columns for whitespace, but I'm not able to figure out how to divide this up equally to the left and right. I can either have 2 empty columns on the left and 1 on the right or the other way round.
For example, this gets left aligned:
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-6">
<div id="myFirstDiv"></div>
</div>
<div class="col-md-3">
<div id="mySecondDiv"></div>
</div>
<div class="col-md-1"></div>
</div>
If there was a way to make the first column 1.5 and the last 1.5, that would be have been perfect. Is there anything I can do to center my content?
I have tried using center-block, but this doesn't seem to have any effect.
So you want a .col-md-1andahalf class?
Just create one, if that's what you need:
#media (min-width: 992px)/*or whatever*/{
.col-md-1-5 {
width: 12.5%;
}
//.....
}
I need to divide the browser window into two fluid rows so that regardless of size, they are stretched across the screen. In the first row i need to add different columns which should be centered automatically. Basically it looks like this:
The problem is that I can not center cols in first row and rows are not stretch to the browser height. My code looks like this:
<div class="container-fluid">
<div class="row" style="text-align:center">
<div class="col-md-3">.col-md-1</div>
<div class="col-md-3">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>
</div>
</div>
You can use offset to center div
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-3 col-md-3">.col-md-1</div>
<div class="col-md-3">.col-md-1</div>
</div>
</div>
And you can change padding for ajust space between blocs.
See on fiddle http://jsfiddle.net/JtzE6/
Also take a look at the Alignment Classes on twitter bootstrap documentation (Twitter Bootstrap Documentation). You should be able to apply these to any element tag in html. It worked for me.. Hope this helps..
I am using a twitter boostrap fluid layout. When the page loads, it looks fine, but then you notice that you can actually scroll to the right. When you scroll to the right, a small white margin appears on the right of the page.
This codepen shows the issue http://codepen.io/anon/pen/AKygh
The first row div is open. Add a </div> at the end of this:
<div class="row" style="background-color: blue;">
<div class="col-md-4 col-md-push-8">Text on right</div>
<div class="col-md-6 col-md-pull-4 col-xs-offset-1 col-md-offset-2">
<h2>Title</h2>
<p class="lead">Some text </p>
</div>
<div class="clearfix"></div>
Here
</div>
DEMO
try removing <div class="container-fluid">
From the Bootstrap docs.. (http://getbootstrap.com/css/#grid)
"Content should be placed within columns, and only columns may be
immediate children of rows..."
So, since you have a row that is a child of a row.. just change the inner row to a full-width column (col-xs-12):
Demo: http://www.bootply.com/120519
remove margin-right:15px from bootstrap.css on line number 757 class .container-fluid.. and remove margin-right:-15px from same css file on line 763 from class .row...