I'm trying to achieve a three-column layout with Bootstrap 3. I want the page to appear like on left part of the image while on a desktop and like on the image to the right when on mobile.
<aside class="left col-md-2"></aside>
<div class="left col-md-7"></div>
<aside class="left col-md-3"></aside>
Any help?
You can keep the div as your first container followed by the asides and then use col-lg-push-* and col-lg-pull-* to switch on larger device. Source here
Demo [Click on Full Page of the snippet to test for larger device]
div,aside { height: 50px}
.content { background: lightpink;}
.side1 { background: lightblue;}
.side2 { background: lightgreen;}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<div class="container">
<div class="content left col-md-7 col-lg-push-2"></div>
<aside class="side1 left col-md-2 col-lg-pull-7"></aside>
<aside class="side2 left col-md-3"></aside>
</div>
Try this
<div class="col-xs-12 visible-xs">Middle Column</div>
<div class="col-lg-2 col-xs-12">Left column</div>
<div class="col-lg-8 hidden-xs">Middle column</div>
<div class="col-lg-2 col-xs-12">Right column</div>
Hope it helps.
HTML
<div class="row">
<div id="col1" class="col-md-4">col-md-1</div>
<div id="col2" class="col-md-4">col-md-2</div>
<div id="col3" class="col-md-4">col-md-3</div>
</div>
CSS
#col1 {background-color: blue;}
#col2 {background-color: purple;}
#col3 {background-color: green;}
#col1 {display:table-footer-group;}
#col2 {display:table-header-group;}
#col3 {display:table;}
Fiddle
Related
I would like to align three div in one line with a little space between first div and second div and last div using bootstrap as you see in the picture :
I try with this code :
<div class="row">
<div class="col-md-2">
<img src="img/emo_positif.png')}}">
</div>
<div class="col-md-7">
<div class="square1"></div>
</div>
<div class="col-md-3">
<img src="img/emo_negative.png')}}">
</div>
</div>
but it shows me a big space between the div
Using Bootstrap 3:
.row {
height: 24px;
}
.row > div {
height: 100%;
}
.square {
background: pink;
}
.square1 {
background: #01a8ff;
height: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="row">
<div class="col-xs-2 square">
</div>
<div class="col-xs-8">
<div class="square1"></div>
</div>
<div class="col-xs-2 square">
</div>
</div>
Check this Pen.
Read the docs.
For making the three division in same line . There are many ways. For better UX use display:flex in css for the parent division
Thanks
I am trying to fix a page which wasn't bootstrapped like the illustration. But my col-2, col-3, col-4 don't align with the col 1 and 2. I cannot really understand how pull and push work. I have worked on my mobile layout and it seem fine, but as it goes to desktop, it messing the layout.
My layout becomes this, when I make it go desktop. Misaligned headings and columns under it.
You need to include yellow div-s into row so they won't jump over next line.
.left-box {
height: 290px;
width: 100%;
background: #e66;
margin: 3px;
}
.right-box {
height: 70px;
background: #ee6;
margin: 3px;
}
#media screen and (min-width: 992px) {
.left-box, .right-box {
height: 200px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-2 col-xs-5">
<div class="left-box"></div>
</div>
<div class="col-md-10 col-xs-7">
<div class="row">
<div class="col-md-3"><div class="right-box"></div></div>
<div class="col-md-3"><div class="right-box"></div></div>
<div class="col-md-3"><div class="right-box"></div></div>
<div class="col-md-3"><div class="right-box"></div></div>
</div>
</div>
</div>
</div>
Note: according to bootstrap rules, the statement class="col-md-2 col-sm-5" is the same that class="col-lg-2 col-md-2 col-sm-5 col-xs-12".
Actually you don't need push-pull classes I think. You could use a markup like this:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="left-box"></div>
</div>
<div class="col-md-6">
<div class="right-box"></div>
<div class="right-box"></div>
<div class="right-box">etc...</div>
</div>
</div>
</div>
Pen: http://codepen.io/anon/pen/yVKgwG
I downloaded Bootstrap 4, set $enable-flex true and recompiled.
I have a question about Bootstrap 4 and flexbox.
If you reduce the size of Twitter homepage, you can see that "Who to follow" part is moving from right to the left side of the site (but main feed doesn't get effected by that), and this is the thing I want to do using Bootstrap 4 and flexbox. So, when I resize the window (for a hypothetical size like sm), #right will start after #left. #middle is the feed section.
How can I do it?
Here's my current setup.
#left {
background: yellow;
}
#middle {
background: brown;
}
#right {
background: #a8d6fe;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2" id="left">
<div class="col-md-12">PROFILE</div>
<div class="col-md-12" id="menu">MENU</div>
</div>
<div class="col-sm-9 col-md-7" id="middle">NEWS</div>
<div class="col-sm-3 col-md-3" id="right">RIGHT PART</div>
</div>
</div>
Looks like you need a div with col- as a wrapper to order the flex items. Which makes sense, because only the flex items can be ordered. Not the flex container.
#import url('https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css');
[class*="col-"] {
display: flex;
flex-flow: row wrap;
}
#left{
background:yellow;
}
#middle {
background:brown;
order: 1;
}
#right {
background:#a8d6fe;
}
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3 col-md-2" id="left">
<div class="col-md-12">PROFILE</div>
<div class="col-md-12" id="menu">MENU</div>
</div>
<div class="col-sm-9 col-md-7" id="middle">NEWS</div>
<div class="col-sm-3 col-md-3" id="right">RIGHT PART</div>
</div>
</div>
</div>
I'm trying to make some space / gap between 2x col-sm-6 inside an row. Have tried some methods from earlier posts here from Stack Overflow, but none seem to make the right result.
What I have tried:
<div class="row">
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
</div>
Well... this creates the right spacing, but then the left and right sides are not allign with the rest of the page content. To help you guys understand what I'm trying to explain, here is a picture.
Here you can see that the upper white content, the width is what I'm trying to keep for all the elements inside the page. I know its because the extra div I added, because the following code is producing the upper white content box you see in the picture, but then there is no spacing. Have also tried with col-md-5 and an offset of 2 but this creates too much spacing.
<div class="row">
<div class="col-sm-6 contentpage3">
</div>
<div class="col-sm-6 contentpage3">
</div>
</div>
What am I doing wrong?
You can do something like this.
All .col-* elements should be inside row elements.
All .col-* elements should contain content, not be content.
.example {
padding-bottom: 15px;
background: #ccc;
}
.example > .row > div {
margin-top: 15px;
}
.example .inside {
height: 50px;
background: #fff;
border: 1px solid #eee;
}
<div class="container-fluid example">
<div class="row">
<div class="col-xs-12">
<div class="inside"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="inside"></div>
</div>
<div class="col-xs-6">
<div class="inside"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
Would it be possible to achieve the attached grid in bootstrap? Each of the squares would probably be an image... or perhaps text!
I've had a go, but hit a wall when it comes to the top-left box for example that spans over two rows.
Grid:
Use nested blocks whenever you need your grid to span several rows.
Something like this:
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
Then you can set the height for your blocks and your grid is good to go.
A newbie here.
So I was learning to make nested grids when I stumble on this question.
My Rules for making nested grids:
1.The entire grid will be in parent container .row (parent wrapper)
2.Columns are always nested in columns, however all nested columns must have a .row(column wrapper) wrapper to align items horizontally e.g.:
<div class='col-md-12'>
<div class='row'>This is the column wrapper.
<div class='col-md-9'></div>
<div class='col-md-3'></div>
</div>
</div>
3.Breakpoints are very key
4.You may have to use custom css to fine tune your grid.
This is my solution to the problem:
<div class='row parent-wrap'>
<div class='col-sm-6 big-left'>Top Left big</div>
<div class='col-sm-6 quarter-grid'>
<div class='row top-wrap'>
<div class='col-sm-6 top-left'>top-left</div>
<div class='col-sm-6 top-right'>top-right</div>
<div class='col-sm-6 bottom-left'>bottom-left</div>
<div class='col-sm-6 bottom-right'>bottom-right</div>
</div>
</div>
<div class='col-sm-12'>
<div class='row mid-wrap'>
<div class='col-sm-3 mid-start'>mid-start</div>
<div class='col-sm-6 mid-center'>mid-center</div>
<div class='col-sm-3 mid-end'>mid-end</div>
</div>
<div class='col-sm-9'>
<div class='row bottom-wrap'>
<div class='col-sm-8 bottom-start'>bottom-start</div>
<div class='col-sm-4 bottom-center'>bottom-center</div>
</div>
</div>
</div>
Rudimentary custom css:
.parent-wrap{
margin:100px;
}
.big-left{
background-color: aqua;
height:300px;
}
.top-left{
background-color:black;
height:150px;
}
.top-right{
background-color: blue;
height:150px;
}
.bottom-left{
background-color:brown;
height:150px;
}
.bottom-right{
background-color:crimson;
height:150;
}
.mid-start{
background-color:grey;
height:200px;
}
.mid-center{
background-color: red;
height:200px;
}
.mid-end{
background-color: pink;
height:400px;
}
.bottom-start{
background-color:blueviolet;
margin-left:-15px;
height:200px;
margin-top:-200px;
}
.bottom-center{
background-color:burlywood;
height:200px;
margin-top:-200px;
}