I'm trying to do something like,
______Empty space__________________|-----first column(aligned to right)-----|
|--logo--|____Empty space_____________|----second Column(aligned to right)----|
but its auto aligning into the empty space left by my first column like this,
|--logo--||-------second col------------||------------first column----------|
why is that and how to fix this?
Use offsets. Look at the
example from the docs:
http://getbootstrap.com/css/#grid-offsetting
<div class="row">
<div class="col-md-offset-6 col-md-6">first column right</div>
</div>
<div class="row">
<div class="col-md-2">Logo</div>
<div class="col-md-5 col-md-offset-5">second column</div>
</div>
..
Use the .col-*-offset-* class, this will push your div to the right based on the grid system of Bootstrap, example:
<div class="col-md-offset-3"></div>
This will push the div 3 columns to the right
Related
I have Bootstrap 3 layout. Content is based on 10 from 12 available columns. Let's say I have something like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-lg-offset-1">LEFT COL</div>
<div class="col-lg-3">CENTER COL</div>
<div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div>
</div>
</div>
With this I have left and right columns positioned as I want it to be - one column width from both, left and right sides of browser window. And I want to position center column exactly in center, between left and right columns, to have same margin between them.
When using offset / pull / push bootstrap classes, they are positioning columns too much left or right.
I have made my own workaround class .col-center which works like .col-lg-offset-1 only I'm using calc() function to subtract the offset in pixels from bootstrap's percentage value. But in my opinion this solution kind of sucks.
Any advice?
edit:
sample image to describe better
Can you not align the content within the columns to get what you're after?
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">LEFT COL</div>
<div class="col-xs-4 text-center">CENTER COL</div>
<div class="col-xs-4 text-right">RIGHT COL</div>
</div>
</div>
I believe this can't be done in bootstrap. But you can achieve this result by adding a customized class and additional markup. Try if this works for you and breaks nothing :P
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-lg-offset-1">LEFT COL</div>
<div class="col-lg-4">
<div class="col-center col-lg-9"> CENTER COL
</div>
</div>
<div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div>
</div>
</div>
CSS
.col-center {
margin: auto;
float: none;
}
You can add flexbox and distribute the cols evenly.
I have three divs that i need to position based on screensize. Im using bootstrap's grid system on my page, but i have encountered a small issue with the placement
Can anyone help me accomplish this?
Thanks in advance!
PS: let me know if any more details are needed.
Here is the code:
<div class="row">
<div id="div1" class="col-xs-6 col-sm-12 col-md-8"><h2>Some header text here DIV1</h2></div>
<div id="div2" class="col-xs-3 col-sm-6 col-md-2"><span>Some span here DIV2</span></div>
<div id="div3" class="col-xs-3 col-sm-6 col-md-2"><span>Some other span here DIV3</span></div></div>
The fiddle:
Fiddle
And an image of how i want it to work:
To get the layout and order you want, you'll need to use nesting along with push pull like this..
<div class="row">
<div class="col-md-6 col-md-push-6 col-xs-12">
<div class="row">
<div id="div2" class="col-xs-7">div2</div>
<div id="div3" class="col-xs-5">div3</div>
</div>
</div>
<div id="div1" class="col-md-6 col-md-pull-6 col-xs-12">div1</div>
</div>
I used col units col-7 and col-5 for div's 2 and 3 (based on your picture) but you may need to change those to the actual units you want for those columns.
Demo: http://bootply.com/jFfCKhkuR3
You need to use column ordering, see the bootstrap docs here
Using col-xs-push-12 in div1 and pull consequently the other two divs.
Here you have a small snippet showing the effect of the col push and pull
I am migrating a project of mine from bootstrap 2 to bootstrap 3. Now, I am having some problem with the grid layout that I can't understand. I have a col-md-12 and I wanna add 3 columns of equal width in this larger div. Logically, the 3 columns should each be col-md-4. However, when I add the 3 columns (divs) of class col-md-4, they don't fit and one of them gets pushed down and some space is left at the end after the 2nd one.
Please someone help me understand something that I may be missing. Thank you.
It sounds like the issue is padding. Bootstrap automatically adds padding when you have nested col-xx-# classes. If you have col-md-4 as a direct child of a col-md-12 bootstrap will add padding and your third col-md-4 will end up on a new line.
What you're doing:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
1/3
</div>
<div class="col-md-4">
2/3
</div>
<div class="col-md-4">
3/3
</div>
</div>
</div>
</div>
To address this, either add a new class="row" above your first col-md-4 or simply remove the col-md-12 like this:
<div class="container">
<div class="row">
<div class="col-md-4">
1/3
</div>
<div class="col-md-4">
2/3
</div>
<div class="col-md-4">
3/3
</div>
</div>
</div>
Bootstrap's column layout can only be 12 "units" in width.
To archieve columns of equal width, you should split 12 equally (sum of * in col-md-* should be 12).
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've used Bootstrap in the past but cannot find how to do a basic stacking of 2 divs, it's basically 2 col-lg-6 divs sat on top of each other but against one div to the left of it (see picture).
How should the HTML look for this? Should it all be in the one row or is there special classes for doing this?
so you will want a row, inside that row you want a col-6 division. on the 2nd division, just add stuff
DEMO: http://jsbin.com/hikopu/1/
<div class="row">
<div class="col-lg-6">
[left]
</div>
<div class="col-lg-6">
[right]
<div class="col-lg-12">
[right top]
</div>
<div class="col-lg-12">
[right bottom]
</div>
</div>
</div>