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