Bootstrap panels not aligned as I wish - html

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>

Related

Twitter Bootstrap grid layout

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.

Bootstrap grid system col of two high

How would one achieve the setup shown in this image using the Bootstrap grid system? The green rectangles represent Bootstrap panels and the orange rectangle represents a Bootstrap Jumbotron.
(Don't bother the text in the image)
This is the code I have at the moment (the %%%CONTENT%%% are being replaced with PHP so don't bother them):
<div class="jumbotron" style="background-color:rgba(231,231,231,0.5);">
<div class="container">
<h1>%%%JUMBOTRON%%%</h1>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">%%%TITEL%%%</div>
<div class="panel-body">
%%%CONTENT%%%
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-8">
<div class="panel panel-primary">
<div class="panel-heading">%%%TITEL%%%</div>
<div class="panel-body">
%%%CONTENT%%%
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">%%%TITEL%%%</div>
<div class="panel-body">
%%%CONTENT%%%
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">%%%TITEL%%%</div>
<div class="panel-body">
%%%CONTENT%%%
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">%%%TITEL%%%</div>
<div class="panel-body">
%%%CONTENT%%%
</div>
</div>
</div>
</div>
</div>

your structure should be:
-Nav
-Jumbotron
-Row separated in 2 halfs
-The second half contains 2 rows of full width
something simmilar to this:
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- ... rest of your nav configuration -->
</nav>
<div class="jumbotron">
<div class="container">
<h1>Jumbo!</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
left side
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
right side 1
</div>
</div>
<div class="row">
<div class="col-md-12">
right side 2
</div>
</div>
</div>
</div>
</div>

Here is an example using Panels as described in the original question:
<div class="row">
<div class="jumbotron" style="background-color:rgba(231,231,231,0.5);">
<div class="container">
<h1>%%%JUMBOTRON%%%</h1>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-md-6"><!--Column Left-->
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">%%%TITLE%%%</div>
<div class="panel-body">%%%CONTENT%%%<br/>Note: The height of this panel is independent of the others<br/>You could set the height using CSS if needed.</div>
</div>
</div>
</div><!--End Column Left-->
<div class="col-md-6"><!--Column Right-->
<div class="panel-group">
<div class="panel panel-success">
<div class="panel-heading">%%%TITLE%%%</div>
<div class="panel-body">%%%CONTENT%%%</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">%%%TITLE%%%</div>
<div class="panel-body">%%%CONTENT%%%</div>
</div>
</div>
</div><!--End Column Right-->
</div><!--End Container-->
</div><!--End Row-->

Move Bootstrap 3rd column to top of row after responding to breakpoint

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

Need help changing order of boxes when screen resized

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.

How can I add text on the left and right of my Panel Title?

I'm using Twitter Bootstrap to take away a lot of the CSS work for me. I want to use their Panels for a sort of "Post" by a User. I'd like to have the Title section include Edit/Delete Hyperlinks on the RIGHT side of the Title, while the Title itself is aligned on the left.
I've tried this with no success:
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">#vModel.Title <span class="text-right">Hey</span></h3>
</div>
<div class="panel-body">
#vModel.Blog
</div>
</div>
</div>
Title should be aligned on the left (as it does by default) but I want the additional text "Hey" to show up on the RIGHT side.
EDIT:
http://getbootstrap.com/dist/css/bootstrap.css

Twitter bootstrap has two class which can help you.
First is .text-right and second is .pull-right so add this two class and see.

tiny clearfix does it
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title pull-left">
Works fine for me!
</div>
<div class="panel-title pull-right">Text on the right</div>
<div class="clearfix"></div>
</div>
<div class="panel-body">Panel content</div>
</div>
You can try it here http://jsfiddle.net/b1Lec5ge/

Add float:right and remove text-align: right
.text-right {
float:right;
}

Working solution for question
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-4 text-left panel-title">#vModel.Title</div>
<div class="col-md-8 text-right"><a>hyperlink1</a> <a>hyperlink2</a></div>
</div>
</div>
<div class="panel-body">
...
</div>
</div>
Each section of panel can hold row(s) with col-xx-xx
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-4 text-left">Header left</div>
<div class="col-md-4 text-center">Header center</div>
<div class="col-md-4 text-right">Header right</div>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6 text-right">Body left align right</div>
<div class="col-md-6 text-left">Body right align left</div>
</div>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-3 text-center">Footer 1/4 center</div>
<div class="col-md-3 text-center">Footer 2/4 center</div>
<div class="col-md-3 text-center">Footer 3/4 center</div>
<div class="col-md-3 text-center">Footer 4/4 center</div>
</div>
</div>
</div>
Here you have a snipplet with col-xs-xxx for match small screen. Documentation here.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-xs-4 text-left">Header left</div>
<div class="col-xs-4 text-center">Header center</div>
<div class="col-xs-4 text-right">Header right</div>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 text-right">Body left align right</div>
<div class="col-xs-6 text-left">Body right align left</div>
</div>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-3 text-center">Footer 1/4 center</div>
<div class="col-xs-3 text-center">Footer 2/4 center</div>
<div class="col-xs-3 text-center">Footer 3/4 center</div>
<div class="col-xs-3 text-center">Footer 4/4 center</div>
</div>
</div>
</div>

Left and right buttons in panel header. You can replace these buttons with links.
<div class="panel-heading text-right">
<div class="nav"><!-- clears floated buttons -->
<div class="btn-group pull-left" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"><i class="fa fa-toggle-on"></i>
</label>
</div>
<div class="btn-group pull-right" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"><i class="fa fa-trash"></i>
</label>
</div>
</div>
</div>

I think this can help too. You can use both bootstrap rows and columns to divide the panel into two, like I did here:
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<p>Text on left</p>
</div>
<div class="col-md-6">
<p>Text on right</p>
</div>
</div>
</div>
</div>