Bootstrap grid layout diagram
I would like to define a layout that looks like this on large displays:
.----------------------------.
| | B |
| A |____________________|
| | |
| | |
| | |
| | C |
| | |
|_______|____________________|
"A" should be a fixed width whereas "B" and "C" should dynamically expand to completely cover the remaining available width (ie shouldn't be maximized and left empty margin on large displays - I think it's a fluid layout).
Now, having reduced the screen width below a certain amount, I would like these 3 boxes to be rearranged under each other in the order A, B, C, with all 3 using all the available widths.
Can you help me with this please? So far I have the following setup:
<div class="container-fluid">
<div class="col-md-2">A</div>
<div class="col-md-10">B</div>
<div class="col-md-10">C</div>
</div>
It looks great at full width, but as the width decreases, it starts to decrease and "A" in width, which I don't want.
If I add a fixed width to "A" it resets B and C under A too early when decreasing the width - I would like B and C to shrink dynamically, unlike A - I think specifying the clutter width is entirely layout.
Here is JSBin .
source to share
Here's something:
In collaboration with @Christina
(see comments)
Example with a fixed column in 200px
and min-width 600px
:
Bootply : http://www.bootply.com/olRbQrHoWQ
HTML :
<div class="aside">
A
</div>
<div class="main">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12 b">B</div>
</div>
<div class="row">
<div class="col-xs-12 c">C</div>
</div>
</div>
</div>
CSS :
@media screen and (min-width: 600px){
html, body{
height:100%;
}
.aside{
height:100%;
width:200px;
float:left;
}
.main{
z-index: -1;
position:absolute;
background:cyan;
width:100%;
padding-left: 200px;
float:left;
height:100%;
}
}
Updated : position:absolute
not useful, but margin-left
on is .aside
better
Bootply : http://www.bootply.com/7Y9t8B1oAY
CSS
@media screen and (min-width: 600px) {
html,
body {
height: 100%
}
.aside {
height: 100%;
width: 200px;
float: left;
margin-right: -200px;
}
.main {
background: cyan;
width: 100%;
padding-left: 200px;
float: left;
height: 100%;
position: relative;
z-index: -1;
}
}
source to share
Your Bootstrap code is a little flawed as you are missing a class row
. But if you insert B and C on different lines internally col-md-10
, it works. I added background colors to highlight the blocks.
.A { background-color: red; }
.B { background-color: blue; }
.C { background-color: green; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2 A">
A
</div>
<div class="col-md-10">
<div class="row">
<div class="B">B</div>
<div class="C">C</div>
</div>
</div>
</div>
</div>
source to share
Something like that?
HTML:
<div class="container-fluid">
<div class="col-md-2">A</div>
<div class="col-md-10">
<div class="col-md-10-sub">B</div>
<div class="col-md-10-sub">C</div>
</div>
</div>
CSS
.container-fluid {
width: 80%;
height: 80%;
position: absolute;
top: 5%;
left: 5%;
}
.col-md-2 {
position:absolute;
top:0;
left:0;
width: 100px;
height: 200px;
}
.col-md-10 {
position:absolute;
top:0px;
left:100px;
width: auto;
height: 200px;
}
.col-md-10-sub {
position:relative;
left:0px;
height: auto;
}
source to share