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>
Related
In my app i have following, typical for bootstrap view structure:
<div class="row">
<div class="col-lg-9">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</div>
content length inside panel class may be different for each column. Moreover, in one on them part of it is being displayed only when user press a button.
How to ensure that each column will always have the same height? I can setup same column height with use of display: flex as below:
.col-md-4 {
display: flex;
}
all 3 columns have same height. But panels not. How to achieve it?
If the .col-md-4 items have height defined already you can simply add .h-100 (height: 100%) to panels class="h-100 panel panel-default".
https://getbootstrap.com/docs/4.0/utilities/sizing/
in bootstrap 4 all columns have display flex & the height of columns is the same. so the content in every column has an effect on another column so if the inside content has full height all of them be the same height.
you need to add h-100 class on content in columns.
like <div class="h-100 panel panel-default"> </div>
be attention this tag should not have vertical margins.
how can I center my main container horizontally, using excising bootstrap classes
here is the container:
<div class="container-fluid main-container">
<div class="col-md-10 content">
<div class="panel panel-default">
<div class="panel-heading">
Edit existing questions
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
The way it looks now
Here you go with a solution https://jsfiddle.net/w4gLtcz5/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid main-container">
<div class="row">
<div class="col-md-offset-1 col-md-10 content">
<div class="panel panel-default">
<div class="panel-heading">
Edit existing questions
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
In bootstrap, by default there is 12 columns.
Since your container is occupying 10 columns out of 12, so started your container from 2 column instead of column 1. So that in both the side of the container you will have equal space.
I considered col-md-10 is your number of columns
I have added col-md-offset-1.
Please use col-xs-offset-x
Instead of x you can write number between 1 to 12.
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns:
Your code will be.
<div class="container-fluid main-container">
<div class="col-md-10 content col-xs-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
Edit existing questions
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
Reference link https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
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>
I am wanting to line two panels up alongside each other.
I currently have one panel (12 wide) which is above and I want two panels to sit below it next to each other to be 6 wide) however the second panel won't line alongside the first panel:
HTML
.panel-heading {
background: #666;
color: #FF7800;
font-family: sans-serif;
}
.panel-body {
background: #999;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
</div>
I have tried floating the panel left but this has no effect, any help would be great. Thanks
You need to use only one container
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
You don't need to make new rows for every panel, and you don't need a new container either.
Also, if your goal was to have this be a two-column thing on all screen sizes, you need to use the col-xs-* classes.
.panel-heading {
background: #666;
color: #FF7800;
font-family: sans-serif;
}
.panel-body {
background: #999;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
<div class="col-xs-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
<div class="col-xs-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
Bootstrap by default makes a row go full width.
Try moving both 6's into the same row, that should let them sit next to each other.
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body"> Panel Conent </div>
</div>
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body"> Panel Conent </div>
</div>
</div>
</div>
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>