I played with bootstrap a little, then I found this annoying problem about how to centering a span class. After trying offset to do centering some span, I can centering a certain span class like (span8 with offset2, or span6 with offset 3), but the problem is, I want to centering the span7/span9/span10.
Then I trying to use some tricks to centering the span10...
<div class="container"> <!--Or span12 since the width are same-->
<div class="row">
<div class="span1" style="background:black;">Dummy</div>
<div class="span10" style="background:blue;">The Real One</div>
<div class="span1" style="background:black;">Dummy</div>
</div>
</div>
Is there any solution rather than using the code above?
And what should I do if I want to centering the span7, span9 or even span11 without changing the row margin-left value? Because the class row already set the margin-left by 20px, that makes me hard to centering the span.
Centering "even" .spanN? Use .offsetN
<div class="span10 offset1">
Centering "odd" .spanN? Impossible using framework resources. As you decided to use Twitter Bootstrap, you assumed working with a grid. If you center an "odd" column width element, you're breaking the grid, so there are no Bootstrap tools to do that.
There's a theoric (but strange) solution: duplicate your column count. In a 24-column layout, a .span7 becomes a span14, wich you can center with an .offset5.
This is a non-issue in Bootstrap 3, but for Bootstrap 2.x, I've come up with a CSS workaround that creates a 'half' offset that can be used to center (almost) odd numbers of spans. These half spans create a percentage that is half the standard offsetX in the bootstrap.css
/* odd span centering helpers */
.row-fluid .offsetHalf {margin-left:8.5% !important;}
.row-fluid .offsetHalf1 {margin-left:12.9% !important;}
.row-fluid .offsetHalf2 {margin-left:21.6% !important;}
.row-fluid .offsetHalf3 {margin-left:25.6% !important;}
Link to demo
Related
Let's say I have this structure:
<div className="row">
<div class="col-sm">
<div>TEST</div>
</div>
<div class="col-sm">
<div>TEST<br>TEST<br>TEST</div>
</div>
</div>
Basically, I know how to make the columns of the same height (using the .equal class on the row) however, what I need is the child div of the column to also be of the same height. Currently, if one of the child divs is shorter, it won't look aligned because I set the background color to be in the child div and not on the col-sm div.
I cannot set the background on col-sm for flexibility reasons. E.g. I may need to use that child div component in another section that doesn't use 'col-sm'.
Mine currently is the one on top, I want it to become the one at the bottom:
A situation like this, for me, would be time to turn to jQuery or a plugin such as MatchHeight.
matchHeight makes the height of all selected elements exactly equal.
Is it necessary to add a .row in the .container-fluid block?
On bootstrap website, it say:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
I have been doing like this without .row and it work fine:
<div class="container-fluid container-fixed-lg ">
<div class="panel">
<div class="panel-body">
<table>
......
</table>
</div>
</div>
</div>
If you look at a row class in BootStrap CSS, you'll notice there's -15px of margin on both the left and right. This is to compensate for the 15px of padding a container provides. This is important if you're nesting columns within your row as the columns themselves have 15px of padding (called a "gutter" in many cases).
As BootStrap say:
Columns create gutters (gaps between column content) via padding. That
padding is offset in rows for the first and last column via negative
margin on .rows.
In other words, you should use a row if you're nesting columns, if not then there's not an absolutely essential need for them...
Your code is ok, no need to put useless div with class row if you don't use the bootstrap grid system. And obviously you aren't here.
You should check out what .row does. In bootstrap it removes the margin from the left and right side of the div (gutter). With that knowlegde you can make out if you need to use it or not. :)
I used .row many times within the .container fluid block.
I need an element to take the entire screen's width.
Thus, I put it under .row like so because .container adds 15 px padding, then .row takes it away to be full width again.
.container-fluid
.row
header
.col-xs-12
"content content content"
But when I inspect the header element, its height is 0.
How do I get it to automatically be the height of the contents of .col-xs-12 without hard-coding the pixel values or using javascript?
So a few things:
First of all, as per Bootstrap's docs, "only columns may be immediate children of rows." If you are going to add a header element, make it a parent element of the .row or the .container, or put it within the .col-xs-12.
All .col-xx-xx divs float left, so they are technically taken out of the page flow, which is why your header element has no height--the browser doesn't see its contents as affecting the flow of the page, so it doesn't believe it has a height. Using Bootstrap, you can add the .clearfix class to fix this, though I suggest making sure that you clean up your Bootstrap layout a bit first.
EDIT:
Also (and I suppose this should go without saying, but since your code is sparse -- and in haml?--, I want to make sure that it's true), if your .col-xs-12 has no content in it yet, you won't have a height because there's no minimum height set on a .col-xx-xx divs.
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="col-xs-12">
CONTENT HERE
</div>
</div>
</div>
</div>
I hope this helps!
I am newbie with bootstrap gridline system so I got stucked when I tried to create that (advanced?) gridview:
So my problem is that I do not know how to organize blocks in rows, because some blocks must have difeerent height, for example height of block 5. should have the same size as blocks 3. and 2. together.
Is that even possible? Also there should be some space between blocks, so background image should fill those space.
Please help me out.
What you'll want to do is place divs 2, 3, and 4 in their own container div (with the class .col-md-3) and 5 and 6 in another container div (with the class .col-md-3). Make div 1 have the .col-md-6 class.
Edit: You should use a media query to make it a fixed height in the desktop, then a flexible height when it's mobile.
#media screen and (max-width: 980px) { #div2 { height: 500px; (or whatever)}}
I think the most efficient way to do this is to simply use a single row with three columns. Your divs can stack inside the appropriate columns, and you can define the heights for each one. You can see it in action here: http://jsfiddle.net/StSmith/Z9SpM/1/
<div class="container">
<div class="row">
<div class="col-lg-6">
<div id="box1">1</div>
</div>
<div class="col-lg-3">
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
</div>
<div class="col-lg-3">
<div id="box5">5</div>
<div id="box6">6</div>
</div>
</div>
A simple way to do this is to declare the divs in the order you listed, and then apply a simple float: left. If you define the heights of each div manually it should all fit into place!
Rachel's got the right idea. You really just need to nest rows into a container, then use CSS to adjust the heights.
Using Twitter's Bootstrap's standard 940px fluid grid responsive grid I'm trying to get multiple .span div's in one .row.
I want to show a max of 3 .span's on each internal line that grows with the page. So as more .span's are added they just get added to the .row.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="span4">1</span>
<div class="span4">2</span>
<div class="span4">3</span>
<div class="span4">4</span> <!-- wrap to a new line-->
<div class="span4">5</span>
</div>
</div>
</div>
The problem I'm facing is that the span4 which wraps to a new line has the inherited left margin. While I can fix this with nth-child() in modern browsers, it obviously still affects IE.
Any ideas how I can achieve this?
I decided to use the nth-child selector to remove the margin on certain .span's. So my final solution looked likes this:
One column of spans for 320px to 979px
Two columns of spans for 980px to 1409px
Three columns of spans for 1409px and up
#media (min-width: 320px) and (max-width:979px) {
/* one column */
.row-fluid .span4 {width:100%}
.row-fluid .span4 {margin-left:0;}
}
#media (min-width: 980px) and (max-width:1409px) {
/* two columns, remove margin off every third span */
.row-fluid .span4 {width:48.717948718%;}
.row-fluid .span4:nth-child(2n+3) {margin-left:0;}
}
#media (min-width: 1410px) {
/* three columns, .span4's natural width. remove margin off every 4th span */
.main .span4:nth-child(3n+4) {margin-left:0;}
}
For IE7 and 8 I set the width of each span to be 48.717948718% (so two per row) in the css - specifically targeting these versions by using html5 bolierplate .oldie html class. I then used Modernizr and a custom test for nthchild found at https://gist.github.com/1333330 and removed the margin for each even span, if the browser does not support the nth-child selector.
if (!Modernizr.nthchildn) {
$('.span4:even').addClass('margless');
}
Your question specifies that you want columns to automatically wrap to the next line, but in Bootstrap's grid system .spans are specifically engineered to work within a .row, that's the grid. You're not using any .rows at all in your code. So my suggestion, if you stay true to the grid, is to have your code look something like this:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="row">
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div> <!-- wrap to a new line-->
<div class="span4">5</div>
</div>
</div>
</div>
</div>
Here is a jsfiddle that shows the OP's example and another for clarity. http://jsfiddle.net/qJ55V/5/
You have to use .row (not .row-fluid) in order to get the inherited styles applied to each column (span). Yes, it's extra markup, but not using .row will unfortunately cause your columns to jumble up.
Probably not the most elegant solution, but I just define a new css class in my custom stylesheet such as:
.margless{
margin:0 !important;
}
Then I apply it to any element that I don't want to have margins. I ran into the same thing using bootstrap and couldn't find an alternative solution.