In bootstrap I have a grid structure with 3 panels as in the attached image:
<div class="row">
<div class="col-md-3">
<div class="panel">
<!-- This is table panel on the left -->
</div>
</div>
<div class="col-md-9">
<div class="panel">
<!-- Section 1 panel -->
</div>
</div>
<div>
<div class=" row">
<div class="col-md-9 col-md-offset-3">
<div class="panel">
<!-- Section 2 panel -->
</div>
</div>
</div>
Of course as the number of rows in the table increases, the Section 3 panel goes down... How can I make the Section 3 panel stay below the Section 1 panel?
You can just move your panel 3 after your panel 1 like so:
<div class="row">
<div class="col-md-3">
<div class="panel">
...
This is table panel on the left
...
</div>
</div>
<div class="col-md-9">
<div class="panel">
...
Section 1 panel
...
</div>
<div class="panel">
...
Section 2 panel
...
</div>
</div>
<div>
Related
I'm trying to build a vertical row layout using Bootstrap, only problem is that when I adjust the height it pushes the other column down the page and out of place. I have drawn up a quick example of what I'm trying to do. Is this possible using Bootstrap or would a custom CSS have to be written? layout
<div class="row">
<div class="col-3">
<div class="row">
<div class="col-12"> ... </div>
<div class="col-12"> ... </div>
</div>
</div>
<div class="col-3"> ... </div>
<div class="col-3"> ... </div>
<div class="col-3">
<div class="row">
<div class="col-12"> ... </div>
<div class="col-12"> ... </div>
</div>
</div>
</div>
Is below layout possible in bootstrap row and column (or in CSS in general?) - The id of column would have to stay in that order for mobile view.
[1][2]
[3][2]
[2]
[2]
[2]
<div class="row">
<div class="col-md-3">Block 1 - sidebar</div>
<div class="col-md-9">Block 2 - will be long - main content </div>
</div>
<div class="row">
<div class="col-md-3">Block 3 - will continue as a sidebar.
</div>
</div>
I would have something like this:
[Sidebar][Main]
And the Sidebar as:
[1]
[3]
So the final result would be:
<div class="row">
<div class="sidebar col-md-3">
<div class="row">
<div class"main col-md-3">
Sidebar 1
</div>
<div class"main col-md-9">
Sidebar 3
</div>
</div>
</div>
<div class"main col-md-9">
Main
</div>
</div>
I have the following structure
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
box 1
</div>
</div>
<div class="row">
<div class="col-md-12">
box 2
</div>
</div>
</div>
<div class="col-md-4">
box 3
</div>
</div>
</div>
Is there a possibility with bootstrap to easily show the following order on small screens?
|box1|
|box3|
|box2|
I could not figure out how to swap rows in this manner. Thank you
Instead of putting the box column in other row. you can have all the box column in same row. You can achieve the column order in bootstrap using col-sm-push-* or col-sm-pull-* utility.
Check demo here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="content">
<h1>Column 1</h1>
</div>
</div>
<div class="col-sm-4 col-sm-push-4">
<div class="content">
<h1>Column 3</h1>
</div>
</div>
<div class="col-sm-4 col-sm-pull-4">
<div class="content">
<h1>Column 2</h1>
</div>
</div>
</div>
</div>
In bootstrap 3 i'm trying to create a list of vertical panels as can be seen on this link for the search results filters. It has one main panel and multiple panels inside this main panel. I m trying the following html and styles but unable to create the desired layout of panels. Any ideas ? thanks
<div class="panel panel-default col-md-3">
<div class="panel-heading">Refine Search</div>
<div class="panel-body">
<div class="panel panel-default">
<!-- Default panel contents 1 -->
<div class="panel-heading">Panel heading 1</div>
<div class="panel-body">
<p>...</p>
</div>
</div>
<div class="panel panel-default">
<!-- Default panel contents 2 -->
<div class="panel-heading">Panel heading 2</div>
<div class="panel-body">
<p>...</p>
</div>
</div>
</div>
</div>
I found a missing div, and you should probably do your column definition in a parent div tag to fix the formatting issues. Here is a JSFiddle with the solution: http://jsfiddle.net/hbqau1h6/1/
<div class="row">
<div class="col-md-3"><!-- Added containing column definition -->
<div class="panel panel-default">
<div class="panel-heading">Refine Search</div>
<div class="panel-body">
<div class="panel panel-default">
<!-- Default panel contents 1 -->
<div class="panel-heading">Panel heading 1</div>
<div class="panel-body">
<p>...</p>
</div>
</div>
<div class="panel panel-default">
<!-- Default panel contents 2 -->
<div class="panel-heading">Panel heading 2</div>
<div class="panel-body">
<p>...</p>
</div>
</div>
</div> <!-- Missing div here -->
</div>
</div>
<div class="col-md-9">
<h2>Search results</h2>
...
</div>
</div>
The following code shows "1 2 3":
<div class="row">
<div class="col-md-3">
1
</div>
<div class="col-md-6">
2
</div>
<div class="col-md-3">
3
</div>
</div>
How can I have the main contents on top on smaller screens (phones); "2 1 3"?
You could do this..
<div class="row">
<div class="col-md-6 col-md-push-3">
2
</div>
<div class="col-md-3 col-md-pull-6">
1
</div>
<div class="col-md-3">
3
</div>
</div>
Demo: http://bootply.com/91812