How can I change the order of columns for Bootstrap 4's flexbox grid system?
Code I have:
<div class="contents">
<div class="row row-1">
<div class="col-sm-6">Content Left</div>
<div class="col-sm-6">Content Right</div>
</div>
<div class="row row-2">
<div class="col-sm-6">Content Right</div>
<div class="col-sm-6">Content Left</div>
</div>
<div class="row row-3">
<div class="col-sm-6">Content Left</div>
<div class="col-sm-6">Content Right</div>
</div>
<div class="row row-4">
<div class="col-sm-6">Content Right</div>
<div class="col-sm-6">Content Left</div>
</div>
</div>
I want to set it so that every even row would have its columns orders reversed.
CSS I have so far:
.row:nth-child(2n) .col-sm-6:first-child{
float:right;
}
JSFiddle: https://jsfiddle.net/bq1L3gax/
Bootstrap 5 (update 2021)
Since flexbox is still used in Bootstrap 5, changing the order of columns works in the same way. However the order-6 to order-12 have been dropped. These classes are now available for re-ordering in Bootstrap 5..
order-{breakpoint}-first
order-{breakpoint}-last
order-{breakpoint}-0
order-{breakpoint}-1
order-{breakpoint}-2
order-{breakpoint}-3
order-{breakpoint}-4
order-{breakpoint}-5
The possible {breakpoint} values are none(for xs), sm, md, lg, xl or xxl
Bootstrap 5 order examples
Bootstrap 4 (update 2018)
There's no need for extra CSS. Use the flexbox ordering utils...
Demo: https://codeply.com/go/nEpPysXuNe
<div class="contents">
<div class="row row-1">
<div class="col-sm-6">Content Left</div>
<div class="col-sm-6">Content Right</div>
</div>
<div class="row row-2">
<div class="col-sm-6">Content Right</div>
<div class="col-sm-6 order-first">Content Left</div>
</div>
<div class="row row-3">
<div class="col-sm-6">Content Left</div>
<div class="col-sm-6">Content Right</div>
</div>
<div class="row row-4">
<div class="col-sm-6">Content Right</div>
<div class="col-sm-6 order-first">Content Left</div>
</div>
</div>
The ordering class are now order-first, order-1, order-2, etc...
https://codeply.com/go/DYHIdw8TXH
Another method is using the flexbox direction utils...
<div class="row flex-row-reverse flex-md-row">
<div class="col-6">A</div>
<div class="col-6">B</div>
</div>
https://codeply.com/go/bi01mV3n0n
Check out this updated JSFiddle. https://jsfiddle.net/bq1L3gax/5/
All you need to do is use the CSS order property.
.row:nth-child(2n) .col-sm-6:first-child {
order: 2;
}
Related
Is it possible to move card from one column to another column?
When the page is reached to mobile view then card 3 should move to 2nd column in middle of card 1 and card 2
How to achieve this?
<div class="container">
<div class="row">
<div class="col-md-4">Demo content</div>
<div class="col-md-4">
<div class= "card">card 1</card>
<div class="card">card 3</card>
<div class="card">card 2</card>
</div>
<div class="col-md-4">
<div class="card">card 3</card>
</div>
</div>
</div>
Use the responsive display classes.
<div class="container">
<div class="row">
<div class="col-md-4">Demo content</div>
<div class="col-md-4">
<div class="card">card 1</div>
<div class="card d-md-none">card 3</div>
<div class="card">card 2</div>
</div>
<div class="col-md-4">
<div class="card d-none d-md-block">card 3</div>
</div>
</div>
</div>
https://getbootstrap.com/docs/4.6/utilities/display/
<div class="container">
<div class="row no-gutters">
<div class="col m-2">
<div />
</div>
<div class="col m-2">
<div />
</div>
<div class="col m-2">
<div />
</div>
...
</div>
</div>
So in this width it looks well aligned
When i go slightly wide i see that the div's in the second row are not close to each other. Is there a way to align the cols in the last column to be close to each other (and aligned with column 2,3,4 of row 1)?
Here is a jsfiddle for the same.
Use col-auto instead of *col, because you use fixed width for the boxes so that they takes as much space as necessary. And use justify-content-center for the row to align the columns in the center. Most importantly, use p-2 instead of m-2.
.box {
width: 200px;
height: 100px;
background: lightblue;
}
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters justify-content-center">
<div class="col-auto p-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto p-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto p-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto p-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto p-2" >
<div class="box mx-auto">
hello
</div>
</div>
</div>
http://jsfiddle.net/6bx12u5w
You use an older version of Bootstrap. Better to use the latest one since there are a few new classes has been added.
Update
col takes all the available space while col-auto takes as much as space as it needs: it takes as much space as the natural width of it content.
Here are a few different options for last row alignment.
Align last row to center
I see that you want the last row cols aligned under 2,3,4, so in this case you can simply use justify-content-center along with the col-auto columns. The col-auto uses flexbox shrink to make the column width fit the content.
<div class="container">
<div class="row no-gutters justify-content-center">
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
..
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
</div>
</div>
https://www.codeply.com/go/iwL7PW77En
Align last row to left
Aligning the last row to the left is a flexbox issue that has been addressed before. If you don't mind having the entire layout not centered, just use col-auto to shrink the width of the columns to fit the boxes and justify-content-start.
<div class="row no-gutters justify-content-start">
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
....
</div>
https://codeply.com/go/LZkOF9zexh (align start)
If you need the entire layout centered, as you can see from the other answers there are various workarounds to align the last row left. IMO, the simplest, most reliable way in Bootstrap 4 is using a empty spacer elements at the end. You'll need 4 empty spacers since the max in any row is 5 cols.
<div class="row no-gutters justify-content-center">
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
...
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box invisible"></div>
</div>
<div class="col-auto m-2">
<div class="box invisible"></div>
</div>
<div class="col-auto m-2">
<div class="box invisible"></div>
</div>
<div class="col-auto m-2">
<div class="box invisible"></div>
</div>
</div>
https://codeply.com/go/F7pGyqIIT6 (spacers at end)
Using CSS, how can I achieve the following layout?
Notice that the order of the elements is different on mobile vs desktop!
Currently, I am using bootstrap 4. The following code "works" for the desktop version, however, does not work for the mobile version.
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="a">
A
</div>
<div class="d">
D
</div>
</div>
<div class="col-md-8">
<div class="b">
B
</div>
<div class="c">
C
</div>
</div>
</div>
</div>
How can I achieve the desired layout? I am considering solutions using:
Bootstrap 4
Flexbox
CSS Grid
The Bootstrap 4 way to get the order you want, and make columns "fit" together is to disable flexbox and use floats for the desktop layout...
"Fit" masonry layout with floats and reordering
<div class="container">
<div class="row no-gutters d-block">
<div class="col-md-4 float-left">
<div class="a">
A
</div>
</div>
<div class="col-md-8 float-left">
<div class="b">
B
</div>
</div>
<div class="col-md-8 float-right">
<div class="c">
C
</div>
</div>
<div class="col-md-4 float-left">
<div class="d">
D
</div>
</div>
</div>
</div>
Demo https://www.codeply.com/go/U4zuuyfHQV
Same heights layout with flexbox and reordering
<div class="row text-white no-gutters">
<div class="col-md-4">
<div class="a">
A
</div>
</div>
<div class="col-md-8">
<div class="b">
B
</div>
</div>
<div class="col-md-4 order-last order-md-0">
<div class="d">
D
</div>
</div>
<div class="col-md-8">
<div class="c">
C
</div>
</div>
</div>
Demo https://www.codeply.com/go/U4zuuyfHQV (option 2)
Related: Bootstrap row with columns of different height
Seeing as you're already using Bootstrap, you can use pushes and pulls to achieve this:
<div class="container">
<div class="row">
<div class="a col-md-4">
A
</div>
<div class="b col-md-8">
B
</div>
<div class="c col-md-8 col-md-push-4">
C
</div>
<div class="d col-md-4 col-md-pull-8">
D
</div>
</div>
</div>
See this example: https://codepen.io/bretteast/pen/VxKyLX
And these docs: https://getbootstrap.com/docs/3.3/css/#grid-column-ordering
I have searched all over but couldn't find any ways to achieve the following grid with bootstrap : http://oi60.tinypic.com/2r404rc.jpg
This post came close, but it's not what i wish for : How can I get a Bootstrap column to span multiple rows?
Any ideas if it's possible to do it with bootstrap ?
Or should i search for a classic css way instead.
Edit : The html must follow this order
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
try this
<div class="row>
<div class="col col-lg-8>
<!-- col 1-->
<div class="row">
<!-- row 1-->
</div>
<div class="row>
<!-- row 2-->
</div>
</div>
<div class="col col-lg-4">
<!-- col 2-->
</div>
</div>
you should use column nesting
here is an example
http://www.bootply.com/HjJxS7jKHM
Or
<div class="row">
<div class="col-md-6 blue">
<div class="row">
<div class="col-md-12 short-div border">Span 6</div>
<div class="col-md-12 short-div border">Span 6</div>
</div>
</div>
<div class="col-md-6 green tall-div border">Span 6</div>
</div>
<div class="row">
<div class="col-md-6 short-div green border">4</div>
<div class="col-md-6 short-div blue border">5</div>
</div>
My code is like
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
</div>
I want to center those 9columns and 4columns. what is the right way to do it with bootstrap.
For second case i tried
<div class="row">
<div class="col-md-2 col-md-offset-4"></div>
<div class="col-md-2"></div>
</div>
It works. What should i use to center the 9column of first row.
You can use nesting and col-*-offset-* to center odd numbers of columns (where you have 3 in a row). The case of the row with 2 columns can be simply centered using offsets (no nesting required). Use text-center to center the content inside the columns.
<div class="container-fluid">
<div class="row">
<div class="col-md-11 col-md-offset-1">
<div class="row">
<div class="col-md-3 col-md-offset-1 text-center"></div>
<div class="col-md-3 text-center"></div>
<div class="col-md-3 text-center"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-4 text-center"></div>
<div class="col-md-2 text-center"></div>
</div>
</div>
Demo: http://bootply.com/HKy0mPMXv5
To really center a 9-column layout you must use custom CSS with margins.
ZimSystem's solution is close but not exact, its off by 1/288th of the screen width. That is the if the 9 columns represent 9/12th of the screen width, the columns are 23/144 from the left but 22/144 from the right. Furthermore, rather than the 3 content columns being 3/12 they are really 11/48.
The correct way is to nest a row within a row, adding 12.5% margins to the sides of the inner row
<div class="text-center center-header">x</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row center-row-9">
<div class="col-md-4 text-center">x</div>
<div class="col-md-4 text-center">x</div>
<div class="col-md-4 text-center">x</div>
</div>
</div>
</div>
</div>
The center-row-9 css would simply be margin: 0 12.5%
I compare ZimSystem's solution with a margin based solution here http://codepen.io/jdkahn/pen/mEoaoY
This works for me.
I even added a left and right margin, but you can remove it if you want.
.padding-left-10 {
padding-left: 15px;
padding-right: 0px;
}
.padding-right-10 {
padding-left: 0px;
padding-right: 15px;
}
.padding-0 {
padding: 0;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4 text-center padding-0">
<div class="col-md-4 text-center padding-left-10 "><div class="well">x</div></div>
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
</div>
<div class="col-md-4 text-center padding-0">
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
</div>
<div class="col-md-4 text-center padding-0">
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
<div class="col-md-4 text-center padding-right-10"><div class="well">x</div></div>
</div>
</div>
</div>
</div>
</div>