This question already has answers here:
Bootstrap: how to stack divs of different heights?
(4 answers)
Closed 6 years ago.
How I can manage the orders of divs?
What I've now:
What I need:
Code:
<div class="row">
<div class="col-lg-4 bg-info">
test <br><br><br><br><br>
</div>
<div class="col-lg-4 bg-info">
1
</div>
<div class="col-lg-4 bg-info">
2
</div>
<div class="col-lg-4 bg-info">
test </br></br></br></br></br>
</div>
<div class="col-lg-4 bg-info">
4
</div>
</div>
If it must be done without any change in current HTML, you can add Bootstrap's class pull-right to the right blocks.
Your code structure should be:
<div class="container">
<div class="row">
<div class="col-xs-6">test</div>
<div class="col-xs-6 pull-right">1</div>
<div class="col-xs-6 pull-right">2</div>
<div class="col-xs-6 pull-right">test</div>
<div class="col-xs-6">4</div>
</div>
</div>
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.bg-info {
margin-bottom: 10px;
}
<div class="container">
<div class="row">
<div class="col-xs-6 bg-info">
test <br><br><br><br><br>
</div>
<div class="col-xs-6 pull-right bg-info">
1
</div>
<div class="col-xs-6 pull-right bg-info">
2
</div>
<div class="col-xs-6 pull-right bg-info">
test <br><br><br><br><br>
</div>
<div class="col-xs-6 bg-info">
4
</div>
</div>
</div>
Every row has 12 units of space. so you can use nested divs to achieve the ovjective
<div class="col-md-4">
<div class="col-md-12">
//first box first column
</div>
<div class="col-md-12">
//second box first column
</div>
</div>
<div class="col-md-4">
<div class="col-md-12">
//first box second column
</div>
<div class="col-md-12">
//second box second column
</div>
<div class="col-md-12">
//third box second column
</div>
</div>
You can easily change the order of grid columns with .col-md-push-* and .col-md-pull-* modifier classes. Take a look here for more info.
Related
I'm trying to figure out how to do the following grid with Bootstrap.
i would like to know if it is possible in first place to create this type of grid.
doing horizontal divs such as 1,2 ,4, 5 ,7 is udnerstandable, but what about div 3&6 that cover multiple rows.
i used:
<div class="col-sm-4 col-md-4">4</div>
<div class="col-sm-4 col-md-4">5</div>
<div class="col-sm-4 col-md-8">6</div>
to create 4 5 6 part but what i get looks like this:
A very rough idea of how you might do it:
<div class="container">
<div class="row">
<div class="col-9 row">
<div class="col-6 box">1</div>
<div class="col-6 box">2</div>
<div class="col-4 row">
<div class="col-12 box">4</div>
<div class="col-12 box">5</div>
</div>
<div class="col-8 row">
<div class="col-12 box">6</div>
</div>
<div class="col-12 box">7</div>
</div>
<div class="col-3 row">
<div class="box">3</div>
</div>
</div>
</div>
You basically have to just draw rectangles around your groups and that is how they end up being ordered. e.g. first you draw a rectangle around everything but 3 and 3, those are your first columns. Then rectangle around 1 and 2 then 4, 5 and 6 and finally 7 etc.
This is the grid structure you are trying to achieve. You can add style to this to achieve the exact output.
<div class="col-sm-9">
<div class="col-sm-12">
<div class="col-sm-6">1</div>
<div class="col-sm-6">2</div>
</div>
<div class="col-sm-4">
<div class="col-sm-12">4</div>
<div class="col-sm-12">5</div>
</div>
<div class="col-sm-8">
<div class="col-sm-12">6</div>
</div>
<div class="col-sm-12">
7
</div>
</div>
<div class="col-sm-3">
3
</div>
I have more than 12 columns in the row which makes the columns stack vertically, but the top ones have different size compared to bottom ones.
<div class="container-fluid">
<div class="row">
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
</div>
</div>
I am trying to have responsive (allow grow) columns but all columns should carry same width.
You can try insert a col-md-4 with no content or insert only 2 col-md-4 on a row, See if this help you. Look at full screen. (Modified the answer with the help of the comments)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
</div>
<div class="row">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4" id="last-column">
</div>
</div>
</div>
You don't need custom CSS for this. You should use the already defined responsive bootstrap classes for displaying. Also another .row is not needed but could be useful for another row.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
<div class="col-md-4">
4
</div>
<div class="col-md-4">
5
</div>
<div class="col-md-4 d-none d-lg-block">
6
</div>
</div>
</div>
What I am trying to do is to have two columns of 3 nested pink squares each, at the large and med settings, then on small screen tablet a single column with 3 pink squares then another single column with 3 pink squares under that. Then at the xs mobile level I'm trying to again have two columns but with 1 column of nested pink squares in each. I thought this is what my css is requesting, but that's not what is happening :( What am I doing wrong here?
Here's a plunker
Here's the html:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle</h4>
<div ng-repeat="x in things">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle 2</h4>
<div ng-repeat="x in things2">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
</div>
It seems like you're confused by the number at the end of the class.
While nesting .col-xs-6 inside another .col-xs-6, you will get a column which takes only 50% of the width.
It's a primary principle of 12 column grid. Divide 100% / 12 = 8.33333333333% and you will get width property of a single column in percents, please have in mind that the width in percents is calculated according to the parent width.
Bootstrap's grid is not informative while nesting.
Eg. think of .col-xs-6 as width: 50%;, .col-xs-4 is width: 33.33333%;
halfzebra is right. If you you nest columns you always have new 12 columns inside another one.
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
This will fill col-md-6
</div>
</div>
</div>
And like in example above I always like to use rows when Im starting one.
I don't know if I got you right but you could do something like this:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
<div class="row">
<div class="col-md-12">
<h4>My Subtitle</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
<div class="row">
<div class="col-md-12">
<h4>My Subtitle 2</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things2">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
</div>
</div>
Keep in mind that your red boxes are not always fitting in to the columns. I changed width to 100% so you can see how columns are acting.
Plunker: http://plnkr.co/edit/EE4eWrrGIJ0lFdPBcq7T?p=preview
I am creating a grid based landing page with lots of nested columns. Was going well until I completed the load of nested columns and then the next row seems to overlap. In the code below the new container and row appear over the top of the last nested row. I'm sure its something really simple but I can't see where I've gone wrong and would appreciate the help.
<div class="container">
<div class="row">
<div class="col-md-12 mainImage">
Image
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 panel2">
<div class="row">
<div class="col-sm-6 panel3"></div>
<div class="col-sm-6 panel4"></div>
</div>
<div class="row">
<div class="col-sm-12 panel3"></div>
</div>
</div>
<div class="col-sm-8 panel3">
<div class="row">
<div class="col-sm-6 panel2"></div>
<div class="col-sm-6 panel3"></div>
</div>
<div class="row">
<div class="col-sm-6 panel3"></div>
<div class="col-sm-6 panel2"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 panel4">
</div>
</div>-->
I can not get thet rows on the page. I'm always page halved into two horizontal section and I want four vertical sections.
Here is PICTURE:
:
Here is fiddle of my code that you can easy know that what I want FIDDLE.
I only need that middle content to be like on picture.. 4 vertical columns and in that columns that i have 2 blocks.
Here is my try :
<div class="col-md-12">
<div class="pane border-right">
<div>
<div style="float: left;">
</div>
</div>
<div class="col-md-6 specifica ">
<div class="col-sm-3 border-right-dotted">
a
</div>
<div class="col-sm-3 border-right-dotted">
b
</div>
</div>
<div class="col-md-3 specifica ">
<div class="col-sm-3 border-right-dotted">
c
</div>
<div class="col-sm-3 ">
d
</div>
</div>
With this code you can create 2 rows with 4 columns like the picture,
example: http://jsfiddle.net/ignaciocorreia/rc2E7/1/
<div class="row">
<div class="col-sm-3 col-md-3">a</div>
<div class="col-sm-3 col-md-3">b</div>
<div class="col-sm-3 col-md-3">c</div>
<div class="col-sm-3 col-md-3">d</div>
</div>
----
<div class="row">
<div class="col-sm-3 col-md-3">a</div>
<div class="col-sm-3 col-md-3">b</div>
<div class="col-sm-3 col-md-3">c</div>
<div class="col-sm-3 col-md-3">d</div>
</div>
EDIT - 07-04-2017
With Boostrap 4 and flex box things change to:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
Working example: https://codepen.io/igcorreia/pen/jBjbQP