Matthew Rathbone
Reputation: 8259
How can I get these bootstrap columns to stack on top of each other?
I'm making a cheat-sheet with panels wrapped in size 6 columns, they are all part of the same row.
The problem I'm having is that I want the third column in the row to sit directly underneath the first one.
Instead it behaves 'properly' and forms a second aligned row, where the there is a gap between the first two elements and the row below.
How can I get the third panel to sit flush against the panel above it?
Upvotes: 5
Views: 5673
Answers (5)
vanburen
Reputation: 21653
Another (possibly simple) option would be to nest your columns and rows. See Grid Nesting. You can use two col-sm-6 as your main columns and place however many a new row in each with as many col-sm-12 columns as needed.
See example Snippet.
body {
padding-top: 50px;
}
code {
border-radius: 3px
}
.bs-callout+.bs-callout {
margin-top: -5px
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<section class="col-sm-6">
<div class="row">
<section class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Lorem Ipsum is simply dummy text of <b>ONE</b>
</div>
<div class="panel-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetti.</p>
</div>
<table class="table table-striped">
<tbody>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>List files matching a pattern</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Lorem Ipsum is simply dummy text of <b>TWO</b>
</div>
<div class="panel-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<table class="table table-striped">
<tbody>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>List files matching a pattern</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>List files matching a pattern</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Lorem Ipsum is simply dummy text of <b>THREE</b>
</div>
<div class="panel-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .</p>
</div>
<table class="table table-striped">
<tbody>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</section>
<section class="col-sm-6">
<div class="row">
<section class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Lorem Ipsum is simply dummy text of <b>FOUR</b>
</div>
<div class="panel-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<table class="table table-striped">
<tbody>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Lorem Ipsum is simply dummy text of <b>FIVE</b>
</div>
<div class="panel-body">
<p>Lorem Ipsum is simply dummy tex.</p>
</div>
<table class="table table-striped">
<tbody>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Lorem Ipsum is simply dummy text of <b>SIX</b>
</div>
<div class="panel-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<table class="table table-striped">
<tbody>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</section>
</div>
</div>Upvotes: 0
Ruan Mendes
Reputation: 92274
You can have the rows inside the columns, instead of the columns inside a row. See https://jsfiddle.net/mendesjuan/89t1g002/1/
<div class="row">
<div class="col-md-6">
<div class="panel">Content </div>
<div class="panel">Content </div>
</div>
<div class="col-md-6">
<div class="panel">Content</div>
<div class="panel">Content</div>
</div>
</div>
Upvotes: 5
fablexis
Reputation: 578
As @Farzad YZ says, bootstrap does not do that kind of arrangement, but there are many plugins based on javascript that will help you to achieve your goal. I recomend to you this: http://salvattore.com/
This plugin works perfectly with the responsive concept
Upvotes: 0
Shashank
Reputation: 2060
With you current HTML DOM structure, it is not possible what you wish. But if one modifies the DOM little bit then the desired result can be achived. I have made a sample here.
Please have a look at the both the codes of Old and New respectively:
HTML:
<div class="container">
<div class="row">
<h4>
OLD
</h4>
<div id="div1" class="cols col-xs-6">
<h2>
Div 1
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
<div id="div2" class="cols col-xs-6">
<h2>
Div 2
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
<div id="div3" class="cols col-xs-6">
<h2>
Div 3
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
<div id="div4" class="cols col-xs-6">
<h2>
Div 4
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
</div>
</div>
<div class="sep">
</div>
<div class="container">
<div class="row">
<h4>
NEW
</h4>
<div class="cols col-xs-6">
<h2>
Div 1
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
<div class="cols col-xs-6">
<h2>
Div 2
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
<div class="cols col-xs-6">
<h2>
Div 3
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
<div class="cols col-xs-6">
<h2>
Div 4
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
</div>
</div>
CSS:
.cols {
border: 1px solid red;
}
.sep{
border: 2px solid;
margin: 20px 0;
}
Upvotes: 0
Farzad Yousefzadeh
Reputation: 2551
This is not possible using twitter bootstrap's grid system. The grid worls with css float and right top floated element won't let the second row's columns to sit inline of the first row. What you want can be done using javascript libraries which provide a system that elements fill the blank spaces no matter what size and number.
I guess you can fulfill the need with masonry grid system.
Upvotes: 0
Related Questions
- How can I override Bootstrap CSS styles?
- How can I make Bootstrap columns all the same height?
- How can I get the data-id attribute?
- How do you get centered content using Twitter Bootstrap?
- How can I get my Twitter Bootstrap buttons to right align?
- Bootstrap columns are displayed underneath each other when using equal-width columns
- In Bootstrap, how do I get my elements to exactly left align?
- How make columns height independent from each other
- In Bootstrap how to get two rows with different dimensions beneath each other