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>
Related
I have a table like display made using the bootstrap grid classes.
The body rows of which are populated dynamically with javascript.
The table is hidden or shown depending upon the state of the application.
I have a div with an id which contains a row for the header columns and another div with another id to hold the body rows like this:
<div id="myDynamicList" style="display:none;">
<div class="row" id="myHeaderRow">
<div class="col-sm-4 tabledHeader">Service Id</div>
<div class="col-sm-4 tabledHeader">Service Type</div>
<div class="col-sm-1 tabledHeader">Synchronised</div>
<div class="col-sm-1 tabledHeader">Singleton</div>
<div class="col-sm-2 tabledHeader"></div>
</div>
<div id="myListOutput"></div>
</div>
In bootstrap 3.5 this works fine. In 4 every col is on a new line when they should be in-line.
If I remove the wrapping divs such as the myListOutput and myDynamicList the layout is corret. Cols side by side filling the comlete row and each row on a new line.
I need the wrapping divs in order to get a hook in the DOM to append my child elements to but this throws the layout
How should this be done in bootstrap 4.
why don't you wrap each line of the table body (inside the div with id="myListOutput") with a div that has a 'row' class and set flex-wrap to nowrap :
<div id="myDynamicList">
<div class="row flex-nowrap" id="myHeaderRow">
<div class="col-4 tabledHeader">Service Id</div>
<div class="col-4 tabledHeader">Service Type</div>
<div class="col-2 tabledHeader">Synchronised</div>
<div class="col-1 tabledHeader">Singleton</div>
<div class="col-1 tabledHeader"></div>
</div>
<div id="myListOutput">
<div class="row flex-nowrap">
<div class="col-4"> first </div>
<div class="col-4"> second </div>
<div class="col-2"> third </div>
<div class="col-1"> fourth </div>
<div class="col-1"> fifth </div>
</div>
<div class="row flex-nowrap">
...
</div>
...
</div>
</div>
The way I got it to work in the end was to add another set of row and col classes like this...
<div id="myDynamicList" style="display:none;" class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4 tabledHeader">Service Id</div>
<div class="col-sm-4 tabledHeader">Service Type</div>
<div class="col-sm-1 tabledHeader">Synchronised</div>
<div class="col-sm-1 tabledHeader">Singleton</div>
<div class="col-sm-2 tabledHeader"></div>
</div>
</div>
</div>
<div class="row" id="listBody">
<div class="col-sm-12" id="myListOutput"></div>
</div>
Actually I don't know how to describe the issue. I have designed a model, in which I have specify some elements in class row. But after 3 elements it leaves unnecessary spaces. Is there any issue with bootstrap class row?.Checkout the link. Click on register
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-4 standard">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 school_name">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 occupation">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 father_income">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 blood_group">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 type_of_wastage">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 photo">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 edit_photo" style="display: none;">
<div class="form-group">
</div>
</div>
<div class="col-sm-4 city">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 address">
<div class="form-group">
</div>
</div>
</div>
The Bootstrap grid syntax is wrong. A row in Bootstrap contains 12 columns. If you have already 12 columns in a row, you must open a new row. In your case, you must open a new row after you used the col-sm-4 class 3 times. So it must look like this:
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
set some min-height to all columns in register
.modal-body .col-sm-4 {
min-height: 86px;
}
You can't put all these columns in one row. with col-sm-4, you can have only 3 columns per row. after that, you need to create another row. Because in bootstrap grid system there are 12 columns per row. If you need all hose in one row, you have to use col-sm-1. But I don't think it would be a good idea. Better thing is, since you have 10 elements here, either use col-sm-4 in 4 rows or col-sm-3 in 3 rows.
You have write wrong syntax.One row in Bootstrap contains 12 blocks only. That's why unnecessary space is being shown.
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.
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 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