How can I get these panels to stay inside their wells when the browser window is resized (particularly to the width of a mobile device)? It'd probably be best to resize the well too. I have some overlapping issues as well.
Here's full width:
Here's mobile width (ish):
I'd like that Summary to be in the Volume & Fees well, on its own line, not overlapping with the other wells.
Here's the HTML:
<div class="container">
<div class="row clearfix" id="content-row">
<div class="col-md-12 column">
<div class="well" id="volume-fees-well">
<div class="row clearfix" id="volume-fees-row">
<div class="col-md-9 column" id="volume-fees-chart">
<div class="panel panel-primary" id="volume-fees-panel">
<div class="panel-heading">
<h3 class="panel-title">
Volume & Fees
</h3>
</div>
<div class="panel-body">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="panel panel-primary" id="volume-fees-summary-panel">
<div class="panel-heading">
<h3 class="panel-title">
Summary
</h3>
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
<div class="well" id="vehicle-class-well">
I'm using D3 for the charts, which is what the svg is for.
I'm using the Bootswatch Yeti theme and the standard Bootstrap.css. The only CSS I've overridden from the Bootstrap.css is:
#content-row {
margin-top: 50px;
}
#volume-fees-row, #vehicle-class-row, #consignor-map-row, #buyer-map-row {
height: 450px;
}
.panel {
max-width: 100%;
}
.panel-body {
height: 400px;
}
Please let me know if you have any questions!
How can I get these panels to stay inside their wells when the browser window is resized
Just use the .col-xs-* class (instead of col-md-*):
<div class="container">
<div class="row clearfix" id="content-row">
<div class="col-xs-12 column">
<div class="well" id="volume-fees-well">
<div class="row clearfix" id="volume-fees-row">
<div class="col-xs-9 column" id="volume-fees-chart">
<div class="panel panel-primary" id="volume-fees-panel">
<div class="panel-heading">
<h3 class="panel-title">
Volume & Fees
</h3>
</div>
<div class="panel-body">
<svg></svg>
</div>
</div>
</div>
<div class="col-xs-3 column">
<div class="panel panel-primary" id="volume-fees-summary-panel">
<div class="panel-heading">
<h3 class="panel-title">
Summary
</h3>
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
<div class="well" id="vehicle-class-well">
Related
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 defined two panels each one inside a col-md-6 class like this. One of the panels will contain a map from google maps API, while the second panel has information about the map in a table. I want the first panel to have the same height of the second panel, because the map size I am using is fixed (e.g 250px), otherwise the map has height 0. My panels look like this:
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 1</h3>
</div>
<div class="panel-body">
<div id="map" style="width: 100%;height: 250px"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 2</h3>
</div>
<div class="panel-body">
A table
</div>
</div>
</div>
</div>
You can use jQuery for this:
HTML:
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 1</h3>
</div>
<div class="panel-body">
<div id="map"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel 2</h3>
</div>
<div class="panel-body">
A table with content
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
var panelHeight = $('.panel-info .panel-body').height();
$('#map').css('height', panelHeight);
});
$(window).resize(function () {
var panelHeight = $('.panel-info .panel-body').height();
$('#map').css('height', panelHeight);
});
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'm trying to implement below designs using grid layout:
This is what i tried but not what i wanted.
http://jsfiddle.net/tomalex0/3fesK/3/
<div>
<div class="col-md-9 col-md-push-3 row-one">1</div>
<div class="col-md-3 col-md-pull-9 row-two">2</div>
<div class="col-md-9 col-md-push-3 row-three">3</div>
</div>
I don't want to use absolute to make it work, as the footer comes under the absolute div.
Please let me know if its possible.
<div>
<div class="col-xs-12 col-sm-9 pull-right">1</div>
<div class="col-xs-12 col-sm-3 pull-left">2</div>
<div class="col-xs-12 col-sm-9 pull-right">3</div>
</div>
http://jsfiddle.net/isherwood/28RsL/
Here is a bootply demonstrating most of your solution. You will need to include cases for other viewports to make this work on all of them, but most of it is done for you. What I did was make multiple containers named 2 to build the desktop layout, and hide it for the mobile layout and vice versa.
<div class="container">
<div class="row">
<div class="col-md-4 hidden-sm">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">2</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-md-8 col-sm-12">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">1</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-sm-12 hidden-lg">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">2</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-md-8 col-md-offset-4 col-sm-12">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">3</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
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.