I am using Bootstrap grid as follows:
<div class="row">
<div class="col-md-6 col-sm-12"> Column A </div>
<div class="col-md-6 col-sm-12"> Column B </div>
</div>
Which obviously shows Column A on the left and Column B on the right.When move to smaller screens it will be A on top and B below.
Is there a way to keep A on the left and B on the right on larger screens, but let B be on top and A below on small screens?
Thank you.
You can use Bootstrap Push and Pull.
body,
html {
padding-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
<div class="row">
<div class="col-md-6 col-md-push-6">
<div class="alert alert-info">B</div>
</div>
<div class="col-md-6 col-md-pull-6">
<div class="alert alert-danger">A</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 hidden-sm hidden-xs"> Column A </div>
<div class="col-md-6 col-sm-12"> Column B </div>
<div class="col-sm-12 col-xs-12 hidden-lg hidden-md"> Column A </div>
</div>
you can add a duplicate column from A after B.
Hide the first A when the screen is sm or xs.
And hide the second A when screen is lg or md.
Related
I have a problem with columns on bootstrap, I don't find how resolves my problem.
I would like it to look like its on pc :
and on mobile :
with the following row and columns,
someone has an idea how doing it ?
<div class="container">
<div class="col-sm-4">
1
</div>
<div class="col-6">
2
</div>
<div class="col-sm-4">
3
</div>
</div>
You can set the order using the Bootstrap order classes order-* and order-sm-*.
In your example:
Column 1 - we don't need to give this a class as it's always in the position it was created in.
Column 2 is order-sm-2 order-3 so it appears 2nd on screens bigger than 576px, and 3rd on all others.
Column 3 isorder-sm-3 order-2 so it appears 3rd on screens bigger than 576px, and 2nd on all others.
Example with sm breakpoint:
.row div {
border: 1px solid #ccc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row justify-content-center">
<div class="col-4 col-sm-4"> 1 </div>
<div class="col-sm-4 col-6 order-sm-2 order-3"> 2 </div>
<div class="col-4 col-sm-4 order-sm-3 order-2"> 3 </div>
</div>
</div>
Example with large breakpoint using exactly the same classes except using a larger breakpoint, so you can compare the results in the snippet:
.row div {
border: 1px solid #ccc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row justify-content-center">
<div class="col-4 col-lg-4"> 1 </div>
<div class="col-lg-4 col-6 order-lg-2 order-3"> 2 </div>
<div class="col-4 col-sm-4 order-lg-3 order-2"> 3 </div>
</div>
</div>
I have this code:
<div class="row">
<div class="col-lg-3">
<div class="ava-block">
</div>
</div>
<div class="col-lg-6">
...
</div>
<div class="col-lg-3">
....
</div>
</div>
How I can hide first col-lg-3 on mobile and update col-lg-6 to col-lg-9?
I don't need show col-lg-3 on mobile devices. But if I hide on css with media then col-lg-6 is not resize to full width.
It sounds like you want something like this. Use the display utils to show/hide the column. Use col for the col-lg-6 so that it always fills the remaining width.
<div class="container-fluid">
<div class="row">
<div class="col-3 d-none d-lg-block">
<div class="ava-block border">
3
</div>
</div>
<div class="col">
<div class="ava-block border">
6-9
</div>
</div>
<div class="col-3">
<div class="ava-block border">
3
</div>
</div>
</div>
</div>
Demo: https://www.codeply.com/go/gyuRoUt68s
To hide a div on mobile you have to use the css class .d-none .d-sm-block and to make a div only big on mobile you have to use .col-xs-9
So:
<div class="row">
<div class="d-none d-sm-block col-lg-3">
<div class="ava-block">
</div>
</div>
<div class="col-xs-9 col-lg-6">
...
</div>
<div class="col-lg-3">
....
</div>
</div>
Check Bootstrap's documentation on display
I need to realize a pretty weird layout and i'm actually using bootstrap.
I have 3 boxes: A, B and C where A.height = B.height + C.height.
On mobile, they should render in the following order:
|B|
|A|
|C|
While on desktop i need the following layout:
|A||B|
| ||C|
(Basically A is the left column while B and C are on the right)
I can't figure out how C should be positioned.
Actually i have this code, it is perfect on mobile but on desktop produces the following layout:
|A||B|
| |
|C|
Code:
<div class="container">
<div class="col-sm-12 col-md-6 col-md-push-6">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6">A</div>
<div class="col-sm-12 col-md-6">C</div>
</div>
Otherwise, putting B and C in the same box works great in desktop but produces
|B|
|C|
|A|
on mobile.
Do you have any suggestion?
Following structure will fix your problem:
<div class="container">
<div class="col-xs-12 col-md-6 pull-right">B</div>
<div class="col-xs-12 col-md-6">A</div>
<div class="col-xs-12 col-md-6 pull-right">C</div>
</div>
.box-B,
.box-C {
background: green;
height: 200px;
}
.box-A {
background: blue;
height: 400px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-12 col-md-6 pull-right box-B">B</div>
<div class="col-xs-12 col-md-6 box-A">A</div>
<div class="col-xs-12 col-md-6 box-C pull-right">C</div>
</div>
Try the C like this:
<div class="container">
<div class="col-sm-12 col-md-6 col-md-push-6">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6">A</div>
<div class="col-sm-12 col-md-6 coll-md-offset-6">C</div>
</div>
OR:
<div class="container">
<div class="col-sm-12 col-md-6 col-md-push-6">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6">A</div>
<div class="col-sm-12 col-md-6 pull-right">C</div>
</div>
To change their view in phones or tablets you can use the implemented classes for it for example:
<div class="col-lg-12 col-xs-6">
<p></p>
</div>
<div class="col-lg-12 col-xs-6">
<p></p>
</div>
Like this in laptops, desktop you will see full width and in phone you will see both divs aligned in one row.
You can allso use col-xs-offset-* to move the div positions but you gotta make shure that you have space.
For Example:
--- THIS IS WRONG --- Because you have only 12 cols and you are setting 2 + 2 offsets so that means you need total of 16 cols.
<div class="col-lg-12 col-xs-6 col-xs-offset-2">
<p></p>
</div>
<div class="col-lg-12 col-xs-6 col-xs-offset-2">
<p></p>
</div>
--- THE RIGHT WAY ---
<div class="col-lg-12 col-xs-4 col-xs-offset-2">
<p></p>
</div>
<div class="col-lg-12 col-xs-4 col-xs-offset-2">
<p></p>
</div>
The classes in bootstrap are:
lg - desktop
md - laptop
sm - small devices (tablets)
xs - extra small devices (phones)
together with them you can use col-**-offset-** or col-**-hidden or col-**- visible
But once again if you are going to use offset make sure you are not going above 12 cols
Hope this will help you!
using rows and pull-right you can get the effect you're looking for:
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-md-push-6 pull-right">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6 pull-right">A</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 pull-right">C</div>
</div>
</div>
that should do the trick.
What I am trying to do is to have two columns of 3 nested pink squares each, at the large and med settings, then on small screen tablet a single column with 3 pink squares then another single column with 3 pink squares under that. Then at the xs mobile level I'm trying to again have two columns but with 1 column of nested pink squares in each. I thought this is what my css is requesting, but that's not what is happening :( What am I doing wrong here?
Here's a plunker
Here's the html:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle</h4>
<div ng-repeat="x in things">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle 2</h4>
<div ng-repeat="x in things2">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
</div>
It seems like you're confused by the number at the end of the class.
While nesting .col-xs-6 inside another .col-xs-6, you will get a column which takes only 50% of the width.
It's a primary principle of 12 column grid. Divide 100% / 12 = 8.33333333333% and you will get width property of a single column in percents, please have in mind that the width in percents is calculated according to the parent width.
Bootstrap's grid is not informative while nesting.
Eg. think of .col-xs-6 as width: 50%;, .col-xs-4 is width: 33.33333%;
halfzebra is right. If you you nest columns you always have new 12 columns inside another one.
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
This will fill col-md-6
</div>
</div>
</div>
And like in example above I always like to use rows when Im starting one.
I don't know if I got you right but you could do something like this:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
<div class="row">
<div class="col-md-12">
<h4>My Subtitle</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
<div class="row">
<div class="col-md-12">
<h4>My Subtitle 2</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things2">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
</div>
</div>
Keep in mind that your red boxes are not always fitting in to the columns. I changed width to 100% so you can see how columns are acting.
Plunker: http://plnkr.co/edit/EE4eWrrGIJ0lFdPBcq7T?p=preview
I am trying to build a mobile-first header. I have a single div class="row" with 4 columns on a single line for viewports of md, lg, but when the viewport drops to sm, xs I push 2 columns to a new row, and at this point the row and/or fluid-container does not resize (grow in height) causing a cut-off that only shows the top two columns.
Is there a way to prevent this, or to tell Bootstrap 3's row or container to grow?
Customer and total are cut off on xs and sm views, the gray area is a new div with the main page's content:
<div class="container-fluid">
<div class="row">
<!-- Sales Order # -->
<div class="col-xs-6 col-md-2 sp-sales-order">
<div ng-controller="tabTitleCtrl">
<div class="sp-header-text">
{{subtitle}}
</div>
<div>
{{title}}
</div>
</div>
</div>
<!-- Button Block -->
<div class="col-xs-6 col-md-4 col-md-push-4 sp-sales-button">
<div ng-include="toolbarPath">
</div>
</div>
<!-- Totals -->
<div class="col-xs-6 col-xs-push-6 col-md-2 col-md-push-4 sp-sales-total">
<div class="row">
<div class="col-sm-12 sp-header-text">
Total
</div>
<div class="col-sm-12">
{{Total | currency}}
</div>
</div>
</div>
<!-- Customer Input Box -->
<div class="col-xs-6 col-xs-pull-6 col-md-3 col-md-offset-1 col-md-pull-6 sp-sales-customer">
<div ng-include="headerPath"></div>
</div>
</div>
</div>
Try this. I built it from scratch to get away from the extra classes in your code so you could clearly see what's going on. I'm basically just relying on Bootstrap to stack the cols for me at different display widths - without overdoing the classes.
I think this is what you're going for.
Here's a Fiddle
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
Invoice
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<button class="btn btn-default">Void</button>
<button class="btn btn-default">Post</button>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="form-group">
<select class="form-control">
</select>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
Totals
</div>
</div>
</div>