I've following layout in bootstrap- fluid layout
<div class="container">
<div class="row-fluid">
<div class="span3 offset1"> </div>
<div class="span3"> </div>
<div class="span3"> </div>
</div>
</div>
My problem is i want to align all the three spans perfectly center aligned
As i am using fluid layout...in full screen above layout is perfectly aligned centre as i've applied fixed offset for the first div
But as it gets smaller in width. all the above 3 div's are not being perfectly aligned in center, as offset is fixed.
I think, here is what happening.....
in bootstrap we have 12 colums, all columns occupying 9 spans..remaining are 3 spans (odd)
because of that odd number i am not able to leave even spans on both sides.....
is there any solution for this?.....
Bootstrap's spans are floated to the left. You can override this behavior by using this:
<div class="container">
<div class="span9" style="float: none; margin-left: auto; margin-right: auto">
<div class="row-fluid">
<div class="span4">... </div>
<div class="span4">... </div>
<div class="span4">... </div>
</div>
</div>
</div>
There should be a row in there.
<div class="container">
<div class="row-fluid">
<div class="span3 offset1"> </div>
<div class="span3"> </div>
<div class="span3"> </div>
</div>
</div>
A non-bootstrap way to solve this:
<div class="container">
<div style="width: 80%; margin: 0 auto;">
<div class="row-fluid">
<div class="span3 offset1"> </div>
<div class="span3"> </div>
<div class="span3"> </div>
</div>
</div>
</div>
The width of the new element can be max-width with a static width aswell.
Like this
<div class="row-fluid">
<div class="span3 offset1"> </div>
<div class="span3"> </div>
<div class="span3"> </div>
</div>
<div class="container">
instead of :
<div class="row-fluid">
i think click on this below link duplicate question
Is it possible to horizontally center align a row of bootstrap spans that don't add up to 12?
Related
I'm sure I'm overcomplicating this in my head, but is the following layout possible using the standard bootstrap 3 grid system?
Header and sub header can fill 12 columns. Then Image, probably fixed height, spans 8-col then a side bar which spans 4-col. The problem is the side bar has an undefined height and the underneath of the image is content.
So far got something like:
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-8">
image
</div>
<div class="col-md-4">
Navigation down right
</div>
<div class="col-sm-8">
Content
</div>
</div>
Layout
According to your image
You should use the following layout (Click the "Full page" button to see it in action. Also, ignore the CSS. It's just for testing purposes):
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
[class*='col-'] > div:not(.row) {
background: #DDD;
margin: 0.25em 0;
padding: 0.5em;
text-align: center;
height: 5em;
}
.red [class*='col-'] > div:not(.row) {
background: #C55;
color: #FFF;
height: auto;
}
[class*='col-sm-4'] > div:not(.row) {
height: 9em;
}
<div class="container">
<div class="red row">
<div class="col-sm-12">
<div>HEADER</div>
</div>
<div class="col-sm-8">
<div>SUB HEADER</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-12">
<div>IMAGE</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div>LEFT COL</div>
</div>
<div class="col-sm-6">
<div>RIGHT COL</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div>SIDEBAR</div>
</div>
</div>
</div>
Essentially you want a nested row with 6 wide columns for a 12 column grid layout.
Bootstrap row has only twelve spans. I see that 8 + 4 + 8 = 20 > 12, so the "content" div will be at a new line...
And you can't put col-sm-x with col-md-x in the same row...
My suggestion: split into two rows
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-8">
image
</div>
<div class="col-md-4">
Navigation down right
</div>
</div>
<div>
<div class="col-sm-8">
Content
</div>
</div>
But If you want all of it in the same row:
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-5">
image
</div>
<div class="col-md-2">
Navigation down right
</div>
<div class="col-md-5">
Content
</div>
</div>
And if you want a side section, you can cascade rows:
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
Image
</div>
</div>
<div class="row">
<div class="col-md-12">
Content
</div>
</div>
</div>
<div class="col-md-4">
Navigation down right
</div>
</div>
When creating an ordinary Grid in bootstrap with 3 rows as the following, the grid is always positioned towards the left of the page,
I've tried centering the entire grid towards the center with the help of text-align:center and also tried using css classes center-block and text-center
But the grid only barely moves towards the center area.
Any suggestions on how i can get this to work?
Also i require Precise centering not using offsets in bootstrap
<div class="container">
<div class="row">
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
</div>
Here's how to get precise centering without using the offset classes: Fiddle Demo
Create a new helper class called col-centered:
.col-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
Any column you use this class on (ex. class="col-md-7 col-centered") will be centered directly in the middle of its container.
Then, add another set columns around your three column grid:
<div class="container">
<div class="row">
<!-- New set of columns, centered -->
<div class="col-sm-7 col-centered">
<!-- New row -->
<div class="row">
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
</div>
<div class="row">
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
</div>
<div class="row">
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
</div>
</div>
</div>
</div>
Make sure to use col-xs-4 rather than col-xs-1 to create the three columns so that it spans all twelve of the Bootstrap grid columns.
You need to use offset to center your columns like this:
<div class="container">
<div class="row">
<div class="col-xs-1 col-xs-offset-4">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1 col-xs-offset-4">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1 col-xs-offset-4">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
</div>
Here's a jsfiddle: https://jsfiddle.net/AndrewL32/e0d8my79/12/
The bootstrap grid has 12 columns. If you want 3 equal 'columns', they each have to be 12/3 = 4 'gridcolumns' wide.
You're html will then look like this:
<div class="row">
<div class="col-xs-4">Block</div>
<div class="col-xs-4">Block</div>
<div class="col-xs-4">Block</div>
</div>
The problem is that you are only using 3 out of 12 possible columns in Bootstrap. The columns, by default, run from left to right. A full 12 columns would look like this:
<div class='container'>
<div class='row'>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
</div>
</div>
That HTML represents 12 columns, spanning the entire width of the .container. But since you are using only 3 divs, each 1 column in size, all 3 columns are on the left side of the .container.
If you want 3 columns that span the entire size of the .container do this:
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
If you want 3, single-column divs that are centered in the .container it's a bit more complicated since the result of 12-3 = 9 is not divisible by 2. Since it's not divisible by 2 you can't have equal size space on the left and right side of the 3 columns. In order to get around this problem you need to do a nested (sub)grid similar to this:
<div class="col-xs-4 col-xs-offset-4">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
</div>
This is essentially a 3 column within another grid.
That will create 3 divs, but the first will be offset (or pushed) to the right 4 columns, which will make all 3 columns appeared to be centered in the layout
You need wrapper. Try with <div class="container">Your code here</div>
EDIT
The question was edited after that comment.
Got a headache with complex spanning grid using bootstrap.
There are portrait and landscape blocs into 5 columns but they all have the same surface except the bloc number 1 that only got the same width.
It become complex when two portrait blocs shares the same row. Moving content with margin, is not suitable.
here you go: this is the fiddle Demo
<div class="row-fluid">
<div class="span4">
<div class="well">1<br/><br/><br/><br/><br/></div>
<div class="well">5</div>
</div>
<div class="span8">
<div class="span12"><div class="well">2</div></div>
<div class="row-fluid">
<div class="span8">
<div class="well">3</div>
<div class="well">6</div>
</div>
<div class="span4"><div class="well">4<br/><br/><br/><br/><br/></div></div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="well">7<br/><br/><br/><br/><br/></div>
<div class="well">14<br/><br/><br/><br/><br/></div>
</div>
<div class="span10">
<div class="row-fluid">
<div class="span6">
<div class="well">8</div>
</div>
<div class="span6">
<div class="well">9</div>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<div class="well">
10<br/><br/><br/><br/><br/>
</div>
</div>
<div class="span6">
<div class="well">11</div>
<div class="well">12</div>
</div>
<div class="span3">
<div class="well">
13<br/><br/><br/><br/><br/>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<div class="well">15</div>
</div>
<div class="span6">
<div class="well">16</div>
</div>
</div>
</div>
</div>
you are not completely free on the panel sizes using span, if you want a more precise result you should use custom percentages on the div width.
I have a two columns one column is size 9 and other column is size 3. I have a Google Map inside col-3 but my map is at the bottom of the screen. How do I get it to move up?
<div class="container">
<div class="row">
<div class="col-sm-9">
content....
<div class="col-sm-3">
content...
</div>
<div>
</div>
</div>
You have your col-sm-3 nested within your col-sm-9
Try this:
<div class="container">
<div class="row">
<div class="col-sm-9">
content....
</div>
<div class="col-sm-3">
content...
</div>
</div>
</div>
If I understand your question correctly, you want the divs stacked with the 3-column div on top. If so, do it like this:
<div class="container">
<div class="row">
<div class="col-sm-9 col-sm-pull-3">
content....
</div>
<div class="col-sm-3 col-sm-pull-9">
content...
</div>
</div>
</div>
I have the following code
<div id="profile" >
<div class"row">
<div>
</div>
<div id="principal">
<div class="row">
</div>
</div>
I need one div to be at the left and the other div to the right using Bootstrap 3.1.1 or css without forgetting responsive design.
Thanks.
See if this works for you!
<div id="profile" class="span4"> // class="column-sm-4"
<div class"row">
</div>
</div>
<div id="principal" class="span8"> // class="column-sm-8">
<div class="row">
</div>
</div>