Bootstrap grid system col of two high - html

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-->

Related

Merge columns in Bootstrap vertically

i simply want to join two columns in Bootstrap vertically. Here is the code:
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
Here is an illustration of what i mean:

You can do it this way
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
1
</div>
<div class="col-md-12">
2
</div>
</div>
</div>
<div class="col-md-6">
3
</div>
</div>
</div>

Maybe something like this?
<div class="row">
<div class="col-6">
<div class="row " >
1.
</div>
<div class="row ">
2.
</div>
</div>
<div class="col-6 ">
3.
</div>
</div>

Setting columns in bootstrap grid

Im working on a grid in bootstrap, now I have 4 cols in a row, but I need to set it in two rows (each with two columns) when the screen size is set to md (or sm). How I can get that?
<div class="container">
<div class="row">
<div class="col">
<div class="panel panel-blue">This is a column.</div>
</div>
<div class="col">
<div class="panel panel-purple">This is a column.</div>
</div>
<div class="col">
<div class="panel panel-purple">This is a column.</div>
</div>
<div class="col">
<div class="panel panel-purple">This is a column.</div>
</div>
<div class="col">
<div class="panel panel-purple">This is a column.</div>
</div>
</div>
</div>

It's already in the Documentation https://getbootstrap.com/docs/4.3/layout/grid/#responsive-classes
You can use
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="panel panel-blue">This is a column.</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="panel panel-purple">This is a column.</div>
</div>
<div class="col">
<div class="panel panel-purple">This is a column.</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="panel panel-purple">This is a column.</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="panel panel-purple">This is a column.</div>
</div>
</div>
</div>

Instead of:
<div class="col">
use:
<div class="col-md-6">
Bootstrap uses a 12 column layout by default.
Of course, have a look at the official documentation for more info.

Finally I got it, just setting
col-sm-6 col-md-auto

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.

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>