How can i create 3 panels in bootstrap side by side?
I try with this with out luck:
<div class="panel panel-default">
<div class="panel-heading">Main panel</div>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">panel 1</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">panel 2</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="panel-heading">panel 3</div>
</div>
</div>
</div>
</div>
</div>
Result:
Main panel
PANEL 1
PANEL 2
PANEL 3
You could have to use col-lg-x col-md-x col-sm-x classes where x is the column number.
It is working fine for me after adding proper media width columns. You can check it http://bootply.com/98480 .
If you added col-sm-x classes only, then it will not apply to the devices where viewport is less than 768px.
Related
I'm not sure if this is a bootstrap bug or I am just not understanding the grid system. I would like the two headers (This Guy, That Guy) to align:
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h3>This Guy</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h3>That Guy</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've been playing around with the grid system and in the bottom panel and column widths 1-7 all align the left margins but 9+ column width has a different left alignment.
So my question: Is there a way to align the contents of 6 and 12 column width rows in different panels using Bootstrap 3?
I think you're going to have to make your own offset class to make this work.
Every time you start a new row your starting a new column context of 12 columns. Your This Guy text is a 10 wide column offset by 1 inside of a 6 wide column. Your That Guy text is also a 10 wide column offset by 1 but it is inside of a 12 wide column. Bootstrap uses percentages so the size of .col-md-offset-1 will be different since the containers that .col-md-10 .col-md-offset-1 are in are different sizes.
Solution: create your own offset class, something like .col-md-offset-0-5.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
#media ( min-width: 992px ) {
.col-md-offset-0-5 {
margin-left: 4.1666666%;
}
}
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h3>This Guy</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-10 col-md-offset-0-5">
<h3>That Guy</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am using Bootstrap for my webpage and having trouble with aligning panels.
I have many panels not all in the same size and they do not align as I would like them to do.
I would like to have panel three directly below panel 1.
.
my page
<div class="container">
<div class="col-md-6 pull left">
<div class="panel panel-warning">
<div class="panel-heading"><h3 class="panel-title">1</h3></div>
<div class="panel-body">
<div class="list-group">
App 1
App 1_2
</div>
</div>
</div>
</div>
<div class="col-md-6 pull left">
<div class="panel panel-danger">
<div class="panel-heading"><h3 class="panel-title">2</h3></div>
<div class="panel-body">
<div class="list-group">
App 2
App 2_3
App 2_4
App 2_5
App 2_6
App 2_7
App 2_8
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-md-6 pull left">
<div class="panel panel-success">
<div class="panel-heading"><h3 class="panel-title">3</h3></div>
<div class="panel-body">
<div class="list-group">
App 3
App 3_1
</div>
</div>
</div>
</div>
</div>
I'm guite new to bootstrap and I'm trying to create a bootstrap grip that should look something like this:
Is it possible to have the blue primary box in the same grid as the rest, but only using the HTML tags? Or do I have to create my own CSS rules to achive this?
I have tried nesting the rows etc. But so far, I have not been able to achieve a good looking result.
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
You can do this, but you have to use Flexbox to get right panel same height as left side panels
Fiddle
#media(min-width: 992px) {
.content {
display: flex;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
}
.right .panel {
display: flex;
flex-direction: column;
flex: 1;
}
.right .panel .panel-body {
flex: 1;
}
}
<div class="content">
<div class="col-md-9 left">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 right">
<div class="panel panel-info">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
Use panel-primary class of bootstrap instead of panel-default
Also you should use col-md-3 to fix this panel on right side
for example
<div class="row">
<div class="col-md-9">
<!--something here-->
</div>
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">Panel 1</div>
<div class="panel-body">Content Body</div>
</div>
</div>
</div>
See official doc for other informations
Yes, it's possible. You should start by creating one row with two columns. The first column will have 3 rows inside it and then more columns inside. Keep in mind the grid layout works from 1-12, so if your left part has a size of 9 then your panel on the right should take the remaining 3 for its column size.
It goes something like this:
<div class="row">
<div class "col-md-9">
<div class="row">
<div class="col-md-4">
*insert panel here*
</div>
<div class="col-md-4">
*insert panel here*
</div>
<div class="col-md-4">
*insert panel here*
</div>
</div>
<div class="row">
<div class="col-md-4">
*insert panel here*
</div>
<div class="col-md-4">
*insert panel here*
</div>
<div class="col-md-4">
*insert panel here*
</div>
</div>
<div class="row">
<div class "col-md-4">
*insert panel here*
</div>
<div class="col-md-4">
*insert panel here*
</div>
<div class="col-md-4">
*insert panel here*
</div>
</div>
</div>
<div class="col-md-3">
*insert panel here*
</div>
</div>
When using Bootstrap Grid It should as simple as to add style="float: right;" to the
<div class="container">
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-3" style="float:right;">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body" style="height: 300px;">
content body
</div>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
You will need to add two columns, then place the panels within these columns. The first columns' sizing will be 9 and 3.
The "Standard" panels will go inside the first column and the "Blue" panel will go into the second panel.
<div class="col-md-3">
// Standard panels.
<div class="col-md-9">
// First row.
<div class="col-md-12">
// Wide panel
</div>
// Second row.
<div class="col-md-4">
// smaller panel
</div>
<div class="col-md-4">
// smaller panel
</div>
<div class="col-md-4">
// smaller panel
</div>
</div>
// Blue panel
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
Inside the first column, the standard panels have been sized as 12 for the full width panel and 4 for each of the smaller panels. This is because the sizing is relative to the parent. The parent column has a width of 9 and so the child column sizing will be sized in 12th's of that 9. Hope this makes sense.
I have this 3-column row in Bootstrap that looks like this:
At some break point, it flips vertical and becomes ordered top to bottom with the ABC list showing last as expected. I would like to know if there's a feature (like a data attribute) of Bootstrap that will move the ABC list of the third column to the vertical top of the row.. maybe an index or something implemented by Bootstrap. If not, this is the HTML snippet in question - is the same result achievable with CSS?
<div class="row">
<div class="panel panel-default col-md-4">
<div class="panel-heading">
<h3 class="panel-title">Weekly News</h3>
</div>
<div class="panel-body">
Panel body
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading">
<h3 class="panel-title">Daily Events</h3>
</div>
<div class="panel-body">
Panel body
</div>
</div>
<div class="list-group col-md-4">
A
B
C
</div>
</div>
You can use .col-md-push-* and .col-md-pull-* to reorder your columns.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">
<div class="list-group">
A
B
C
</div>
</div>
<div class="col-md-4 col-md-pull-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Weekly News</h3>
</div>
<div class="panel-body">
Panel body
</div>
</div>
</div>
<div class="col-md-4 col-md-pull-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Daily Events</h3>
</div>
<div class="panel-body">
Panel body
</div>
</div>
</div>
</div>
</div>
JSFiddle
Bootstrap link: Column ordering
I am using Twitter Bootstrap to make a new website. I am having an issue with the responsive side to this.
You can view my current site now: http://www.monroeorm.com/SNOA/
When you resize the page the sidebars and primary content boxes aren't in the order I need them in. When I resize the page, such as on mobile, sidebar1 shows up before the primary content. I am trying to make it display after the content once the site is resized or viewed in mobile.
Here's what I've got so far:
HTML:
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Sidebar1</h3>
</div>
<div class="panel-body">
Sidebar1
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Primary Content</h3>
</div>
<div class="panel-body">
Primary Content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Sidebar2</h3>
</div>
<div class="panel-body">
Sidebar2
</div>
</div>
</div>
</div>
</div>
CSS:
http://www.monroeorm.com/SNOA/css/bootstrap.css
I'm probably making this harder than it seems - is there any way to get this achieved?
Is missing "col-sm-12 col-xs-12" on declaration >> http://leoncio.me/dev/stack/20338694.html
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Sidebar1</h3>
</div>
<div class="panel-body">
Sidebar1
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Primary Content</h3>
</div>
<div class="panel-body">
Primary Content
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Sidebar2</h3>
</div>
<div class="panel-body">
Sidebar2
</div>
</div>
</div>
</div>
</div>
You could use flexbox and then add a media query to reorder the divs when the browser width is a certain size.