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
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 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>
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.
I can't get these two wells on the same row to align correctly. I want the titles and the wells to be on the same line. This is my code, but its on Bootply as well.. Here Link to Bootply
Plus I can't get the "Help Credentials" title to left align with the well..
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-1">
<h2>Add your credentials</h2>
<div class="col-md-5 well">Stuff</div>
</div>
<div class="col-md-5 col-md-offset-1">
<h2>Help credentials</h2>
<div class="col-md-5 well col-md-offset-1">
Stuff
</div>
</div>
You're nesting columns without the required rows. Try this:
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-5">
<h2>Add your Amazon credentials</h2>
<div class="well">Stuff</div>
</div>
<div class="col-sm-5 col-md-offset-1">
<h2>Help credentials</h2>
<div class="well">stuff</div>
</div>
</div>
</div>
</div>
Demo
http://getbootstrap.com/css/#grid-nesting
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>-->