I have a grid in BS3 which can have either 4, 2 or 1 columns depnding on device size. It is striped for the 4 max column width.
<div class="row row-odd">
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
</div>
<div class="row row-even">
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
</div>
.row-even {
background-color: #B2D6B2;
}
.row-odd {
background-color: #D8ECC3;
}
this works ok but I would ideally like it to be striped responsively and actually looks stiped.
The first 4 cells are the same colour. I want only the first 2 or the first 1 cell to be the same colour depending on the resolution so it looks striped to the user.
So in 4 column mode I want colour 1 (C1) and 2 (C2) as follows
C1C1C1C1C2C2C2C2C1C1C1C1C2C2C2C2 (i.e. blocks of 4)
and in 2 column mode
C1C1C2C2C1C1C2C2 (i.e. blocks of 2)
and 1 column mode
C1C2C1C2C1C2C1C2 (i.e. blocks of 1)
how can I do this?
I have a fiddle here:
http://jsfiddle.net/GrimRob/1cj2e828/3/
Related
I would like have it such that I can specify one row but have the program automatically split the result into multiple rows if required. I need to do it this way as I dynamic div content being populated so it needs to properly align accordingly. I am using bootstrap 3.
<div class="row">
<div class="col-md-4">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
</div>
</div>
End result would be: "one", "two", "three" on the first row.
"four", "five", "six" on the second row. "seven" on the third row.
Basically what I am looking for is a way for the bootstrap to automatically align with at most divs per row.
If i understood everything correctly you're using bootstrap not in the right way.
Every bootstrap row has 12 columns. These columns can be grouped.
Now you can group these columns for each device. Read more on the bootstrap 3 documentation.
For example:
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
one
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
two
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
three
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
four
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
five
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
six
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
seven
</div>
</div>
This code aligns each number text (one, two, three ...) according to the size of your col-XX-Y. So on medium md sizes, you got 3 columns. On small sm sizes you have 2 columns etc.
This is based on the 12 columns (on total) divided by the number you specified in the col-XX-Y class.
Just remember:
The XX represents the screenwidth and the Y represents the columns you
want to group at this screenwidth.
I have been trying to align three equal columns exactly in the center of a row with equal padding on both sides, inside a container-fluid. I am unable to position them at the center of the page. I have tried setting width to the container inside which those three columns are residing. but the layout keeps going one side and never gets aligned at the center.
<div class="container">
<div class="row yellow">
<div class="col-lg-12 ">
<div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center">
test
</div>
<div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center">
test
</div>
<div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center">
test
</div>
</div>
</div>
</div>
Attached is the output that I am recieving:
output
As Shown here, the layout is aligned to right, I want it to align perfectly center with equal padding in between these columns.
It would be good to know how this can be achieved, I've been trying to get this one done for a while. your suggestions will definitely help in fixing this one.
Thanks in advance
Your problem is, that your layout is not summing to 12 columns..
col-lg-3 + col-lg-3 + col-lg-3 are summing to 9 columns and in bootstraps grid-system you have 12 columns per row.
also there is no col-xxs-** class. (lg = large; md = medium; sm = small; xs = extra small)
this shoud do the trick:
<div class="container">
<div class="row yellow">
<div class="col-lg-12 ">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
test
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
test
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
test
</div>
</div>
</div>
</div>
Take a look at Bootrstaps Docs to learn more about the Grid-System: http://getbootstrap.com/css/#grid
As #Sadi says, the layout is made of 12 cols, so you shoold change your columns from col-lg-3 to col-lg-4. Plus, you should apply your green to the inner container, otherwise you will have no padding:
<div class="container">
<div class="row yellow">
<div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center">
<div class="green">
test
</div>
</div>
<div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center">
<div class="green">
test
</div>
</div>
<div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center">
<div class="green">
test
</div>
</div>
</div>
Codepen: https://codepen.io/giannidk/pen/ZymdOy
Is it possible to have 3 columns (3,6,3) on a wide screen but when brought to mobile or iPad size, the center column drops down so you effectively have the 2 '3' columns come together as '6','6' and under them stacks the full width '12' column?
Currently I have tried the html below, but this stacks them all three on top of each other at the mobile level, rather than dropping the center down to it's own new row.
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">TESTING LEFT</div>
<div class="col-sm-12 col-md-6">TESTING MID</div>
<div class="col-sm-6 col-md-3">TESTING RIGHT</div>
</div>
</div>
One way to do this is to create two "Mid" divs, show one when the screen is large, but hide that one when the screen is small. Hide it by adding hidden-md and hidden-lg. Also add hidden-sm and hidden-xs to the first one.
I created a demo with styling so you can see the different divs more easily.
Bootply Demo
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">TESTING LEFT</div>
<div class="hidden-sm hidden-xs col-xs-12 col-md-6">TESTING MID</div>
<div class="col-xs-6 col-md-3">TESTING RIGHT</div>
</div>
<div class="row hidden-md hidden-lg">
<div class="col-xs-12 col-md-6">TESTING MID</div>
</div>
</div>
In your situation, you can do that with push and pull classes:
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">LEFT md first in content</div>
<div class="col-sm-6 col-md-3 col-md-push-6">Right md Second in content </div>
<div class="col-sm-12 col-md-pull-3 col-md-6">Central MD last in content</div>
</div>
</div>
DEMO: http://jsbin.com/muvov/1/
I have this:
<div class="row">
<div class="col-sm-8">
...
...
</div>
</div>
I want those 8 small columns to float in the middle of the available page width. If I add a col-sm-offset-2 but that just pushed everything right, even if there wasn't space. Advice?
If you encompass your row in a container, it should center everything. So that, with the col-sm-offset-2 should achieve what you want, e.g.
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
...
</div>
</div>
</div>
I have created following scaffold:
<div class="row">
<div class="col-md-4">
first column
</div>
<div class="col-md-4">
second column
</div>
<div class="col-md-4">
third column
</div>
</div>
Every column has background with 1px border. I would like to add margin-right: 15px to every column bot if applied, third column goes lower to the second `row`.
How can I set 15px space between columns ?
Short of modifying the bootstrap CSS directly (which may cause you problems later on updating to subsequent versions) I would recommend you place your own custom container within your columns (say with the class .foo) with a css statement specifying how you want it to display. For example
<div class="row">
<div class="col-md-4">
<div class="foo">
first column
</div>
</div>
<div class="col-md-4">
<div class="foo">
second column
</div>
</div>
<div class="col-md-4">
<div class="foo">
third column
</div>
</div>
</div>
with the CSS;
.foo:not(:last-child) {
margin-right:15px;
}
Example : http://cdpn.io/eDBCJ