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
Related
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>
I'm building a responsive front with Bootstrap 4 and I can't do what I want.
I made the result I want on codepen but I'm trying to avoid duplicate code for desktop+mobile.
<p>On desktop</p>
<div class="container-fluid">
<div class="row">
<div class="col col-md-3">
<div class="picture">PICTURE</div>
</div>
<div class="col col-md-9">
<div class="row">
<div class="col col-md-8 ">
<div class="content-a">ContentA</div>
</div>
<div class="col col-md-4">
<div class="button">Button</div>
</div>
</div>
<div class="row">
<div class="col col-md-12">
<div class="content-b">Content B</div>
</div>
</div>
</div>
</div>
</div>
<p>On mobile</p>
<div class="container-fluid">
<div class="row">
<div class="col col-md-6">
<div class="picture">PICTURE</div>
</div>
<div class="col col-md-6">
<div class="content-a">Contant A</div>
</div>
<div class="col col-md-12">
<div class="content-b">Contant B</div>
</div>
<div class="col col-md-12">
<div class="button">Button</div>
</div>
</div>
</div>
https://codepen.io/sanchou/pen/YzyXaQW
Is this possible to make? How could I achieve that?
You could consider implementing your layout using flexbox:
Bootstrap Flex
You can change the order of 'Content B' and 'Button' using order class.
Keep in mind that some older browsers might not support it though.
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-->
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.