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
Related
I have the following structure
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
box 1
</div>
</div>
<div class="row">
<div class="col-md-12">
box 2
</div>
</div>
</div>
<div class="col-md-4">
box 3
</div>
</div>
</div>
Is there a possibility with bootstrap to easily show the following order on small screens?
|box1|
|box3|
|box2|
I could not figure out how to swap rows in this manner. Thank you
Instead of putting the box column in other row. you can have all the box column in same row. You can achieve the column order in bootstrap using col-sm-push-* or col-sm-pull-* utility.
Check demo here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="content">
<h1>Column 1</h1>
</div>
</div>
<div class="col-sm-4 col-sm-push-4">
<div class="content">
<h1>Column 3</h1>
</div>
</div>
<div class="col-sm-4 col-sm-pull-4">
<div class="content">
<h1>Column 2</h1>
</div>
</div>
</div>
</div>
I made my site layout by using layzilla like this.
<div class="content">
<div class="top_block header">
<div class="content">
</div>
</div>
<div class="background right-sidebar">
</div>
<div class="right_block right-sidebar">
<div class="content">
</div>
</div>
<div class="background middle-sidebar">
</div>
<div class="right_block middle-sidebar">
<div class="content">
<div class="top_block middle-sidebar-up">
<div class="content">
</div>
</div>
</div>
</div>
<div class="background left-sidebar">
</div>
<div class="right_block left-sidebar">
<div class="content">
<div class="bottom_block left-sidebar-down">
<div class="content">
</div>
</div>
</div>
</div>
<div class="background container">
</div>
<div class="center_block container">
<div class="content">
</div>
</div>
</div>
It works well except sidebar is too long.
And I use this with AngularJS and uiRouter like this.
It doesn't work when sidebar is too long, the layout is broken.
How about using the css max-height:100vh;
This sets the maximum height to 100% of the viewport heigth.
Like this:
<div class="background left-sidebar" style="max-height:100vh">
If that would be too much, you could use 99vh instead.
Also, have you thought about using Bootstrap to lay out your page?
I'm having a little trouble aligning my columns in bootstrap the way I like. This is what I'm looking for:
I've been fooling around with this, and I've been able to get A and B aligned okay, but E is usually too far down on the page. C, D, and F all align perfectly, but I'm having trouble nesting B & E properly. Either B is aligned with A, and E will align with C/D, and F will render on the page below E, on the left side of the page.
See example fiddle
HTML
<div class="col-xs-12">
<div class="row">
<div class="col-xs-9">
<div class="row">
<div class="col-xs-12 box a">
A
</div>
</div>
<div class="row">
<div class="col-xs-6 box">
C
</div>
<div class="col-xs-6 box">
D
</div>
</div>
<div class="row">
<div class="col-xs-12 box">
F
</div>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<div class="col-xs-12 box">
B
</div>
<div class="col-xs-12 box e">
E
</div>
</div>
</div>
</div>
</div>
Try this code in your application with bootstrap div classes:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8" style="background-color:lavender;">
<div class="row">
<div class="col-sm-12" style="background-color:lavenderblush;height:100px">A</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:green;height:50px">C</div>
<div class="col-sm-6" style="background-color:yellow;height:50px">D</div>
</div>
<div class="row">
<div class="col-sm-12" style="background-color:black;height:50px">F</div>
</div>
</div>
<div class="col-sm-4" style="background-color:lavenderblush;">
<div class="row">
<div class="col-sm-12" style="background-color:blue;height:50px">B</div>
</div>
<div class="row">
<div class="col-sm-12" style="background-color:pink;height:150px">E</div>
</div>
</div>
</div>
</div>
</body>
But First you have to use bootstrap.min.css,bootstrap.min.js,jquery.min.js files in your application.
I want to create a (more or less Pinterest like) grid layout like in the below below. The two columns have different rows, but do appear side to side. How can I do this using the twitter bootstrap grid framework?
If I'm not mistaken the normal row/col behaviour would give me the layout below.
You should be able to achieve the layout by using two columns which themselves have rows:
<div class="row">
<div class="col-xs-6">
<div class="col-xs-12">1</div>
<div class="col-xs-12">2</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">3</div>
<div class="col-xs-6">4</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="col-xs-12">5</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">6</div>
<div class="col-xs-6">7</div>
</div>
</div>
<div class="col-xs-12">8</div>
</div>
</div>
http://jsfiddle.net/zz4ug/
Create the illusion of incongruous rows via background color or image:
<div class="container">
<div class="row">
<div class="col-xs-6 red"> </div>
<div class="col-xs-6 orange"> </div>
</div>
<div class="row">
<div class="col-xs-6 red"> </div> <--This will appear to be on row 1
<div class="col-xs-3 blue"> </div>
<div class="col-xs-3 green"> </div>
</div>
</div>
Check out this jsFiddle
I am having cards which show horizontally. Please see the image to get an idea. When I have a big header, in sm screens the cards inside the columns wrap unevenly.
<div class="col-sm-4" data-ng-repeat="card in cards">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
How to solve this issue?
Option 1
You could use CSS ellipsis like this to append '..' to the heading when it's too long:
.cardHeader {
text-overflow:ellipsis;
white-space:nowrap;
overflow: hidden;
}
Demo: http://www.bootply.com/115420 (uses panel-heading instead)
Option 2
Another option is to use a clearfix div after every 3 'col-sm-4' div..
Demo: http://www.bootply.com/115421
Related
Bootstrap row with columns of different height
do you use the row class? something like this:
<div class ='row'>
<div class="col-sm-4">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
</div>
Another option, which is slightly more HTML heavy but keeps the boxes/cards responsive:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="card biggercard">
<div class="cardHeader">Biggest Header</div>
1
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">Second Header</div>
2
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">Third</div>
3
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="cardHeader">Fourth</div>
4
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">5th</div>
5
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">6th</div>
6
</div>
</div>
</div>
</div>
</div>
</div>
Demo FIddle: http://jsfiddle.net/La3H2/