I am new to the bootstrap grid system, and I want to reorder the <div> regions for mobiles.
This is the layout I have for the desktop view:
And this is what I want for mobile phones:
My current HTML code:
<div class="col-md-3">
<div id="A"> A </div>
<div id="B"> B </div>
</div>
<div class="col-md-9">
C
</div>
Currently, if I view the page on a mobile phone the order is A->B->C because A & B are both inside the first column. But I don't know how to achieve the A->C->B order. So how do I do this?
This probably isn't the most elegant way to go about it, but you could just hide element B when switching to mobile and show a different element B with the same content that's below element C in the dom by using bootstrap's "hidden-xs" and "visible-xs" classes. Something like this...
<div class="row">
<div class="col-md-3 col-xs-12">
<div id="A"> A </div>
<div id="B" class="hidden-xs"> B </div>
</div>
<div class="col-md-9 col-xs-12">
C
</div>
<div id="B" class="col-xs-12 visible-xs"> B </div>
</div>
I'd also recommend referring to the the official bootstrap documentation for more info
The md in col-md-9 stands for medum devices, which means all devices with a screen resulution up to 992px.
Here you will find a table with col-xs, col-sm. col-md and col-lg resultions.
You can use them to define col-xs-12 to your elements. This will tell the browser that on devices which apply to the xs definition the column takes all the 12 grid parts. You can apply several rules like for example:
<div class="col-xs-12 col-md-6">foo</div>
This means the element is 12 on xs and 6 on md devices.
Related
guys. I have a little problem here working with bootstrap. I am trying to make a div container with a row containing 3 columns equally proportioned in width :
<div class="row">
<div class="col-md-4" style="background:red;">logo</div>
<div class="col-md-4" style="background:blue;">content</div>
<div class="col-md-4" style="background:yellow;">content+imgs</div>
</div>
</div>
The problem I have is that I want the column with 'logo' to be the second one (after 'content') on xs/sm devices or at resizing the browser window. I tried with push and pull, but I want the columns to be one above each other, not inline, as at the md devices. I have no clue how to do that, any help? :)
Using order classes with bootstrap, you can change the order of the columns responsively.
This example will put the second column first on XS and SM screens.
<!--bootstrap 4-->
<div class="row">
<div class="col-md-4 order-2 order-md-1">first</div>
<div class="col-md-4 order-1 order-md-2">second</div>
<div class="col-md-4 order-3 order-md-3">third</div>
</div>
edit:
For bootstrap 3 (3.3.7) you will need to use push & pull classes. In your case, you would have to make the logo the second column. Mobile counts as the starting point in bootstrap development.
<!-- bootstrap 3 -->
<div class="row">
<div class="col-md-4 col-md-push-4" style="background-color:red;">content</div>
<div class="col-md-4 col-md-pull-4" style="background-color:blue;">logo</div>
<div class="col-md-4" style="background-color:yellow;">content+imgs</div>
</div>
I am a complete beginner and I am learning Bootstrap. I want to know how to determine which column system I need to use in my website. Suppose I have a row with 3 columns. Now I have 3 options.
Option 1:
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
Option 2:
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
</div>
Option 3:
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
Now my question is, As I want my website to be responsive which class I need to apply. I want my website to render properly irrespective of device selected. I understood that they are meant for different devices. Does that mean, I need to write 3 different css style code (I doubt it). So, what shall I put in my code?
P.S: I saw this link SO LINK and I understood it. But still I am confused, what to put in my code? Shall I put sm,lg or md?
These define the width of the screen at which the layout will collapse. For example, in .col-md-, the layout will be horizontal until the screen width is less than 970px, at this point, the layout will collapse. However, if you use .col-lg-, the layout will be horizontal until the screen width is less than 1170px, then it will collapse.
Bootstrap has 4 breakpoints, .col-xs-, .col-sm-, .col-md- and .col-lg-. You should use these depending on the content of the div. The best way to become familiar is to play around with each one and notice that the layout collapses at different points for each one when you decrease the width of your window. So to answer the question, you should choose whichever one collapses correctly for the content of your div. Hope this helps.
For a more detailed guide on the bootstrap grid system, take at look at this: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
I found it helpful to get a good understanding.
I generally use col-md prefix, so I guess your first option would work quite fine: col-md-4.
To add to the other suggestions you've received, remember that you can apply multiple Bootstrap column classes to the same div.
For example say you wanted 3 equal width columns on a wide viewport. Then as the viewport narrows this changes to one full width header with two equal width columns below, and on smartphones all three divs are stacked vertically, then you might use something like
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">column1
</div>
<div class="col-lg-4 col-md-6">colmun2
</div>
<div class="col-lg-4 col-md-6">column3
</div>
</div>
</div>
See this live https://codepen.io/panchroma/pen/EwVwpw
Or you might want to change the relative widths of your 3 columns at different viewports
<div class="row">
<div class="col-lg-6 col-md-4">
</div>
<div class="col-lg-3 col-md-4">
</div>
<div class="col-lg-3 col-md-4">
</div>
</div>
Or you might want to hide one of the columns at narrower viewports
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4 hidden-sm hidden-xs">
</div>
</div>
The important thing is that you can mix and match your classes to achieve the responsive behaviour that you need.
Once you get the hang of the grid sizing options you might also want to check out how to reorder columns. What often happens is that you need to have a different column order on desktop and mobile, and there will probably be times when you want to offset columns as well.
Good luck!
I am using Bootstrap 3 and on mobile devices I'd like to vertically stack all the div's (sidebar & content) and position the left sidebar below the main container (currently to the right of the left sidebar) on mobile (xs) devices. The HTML, looks like this
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-push-9"> Sidebar</div>
<div class="col-sm-9 col-xs-pull-3"> Main Container</div>
</div>
The problem with above is that, using col-xs-push-9 on sidebar and col-xs-pull-3 on main container they appear in reverse order on large(lg) medium(md) and (sm) devices. I do not want to reverse the order but only want to have the left sidebar below the main container on extra small mobile devices.
I want a bootstrap solution not a JS / jQuery solution.
Pls help.
Regards,
dk
If you think "mobile-first", layout the columns in the desired mobile order first, then use push/pull to adjust the columns for larger screens..
<div class="container">
<div class="row">
<div class="col-sm-9 col-sm-push-3"> Main Container</div>
<div class="col-sm-3 col-sm-pull-9"> Sidebar</div>
</div>
</div>
http://codeply.com/go/8g4UL0J43K
Bootstrap inherits properties for larger grids from the properties set for smaller grids. Therefore you have to set the pull and push to 0 for grids larger than xs, sm, like this:
<div class="container">
<div class="row">
<div class="col-xs-3 col-xs-push-9 col-sm-push-0"> Sidebar</div>
<div class="col-xs-9 col-xs-pull-3 col-sm-pull-0"> Main Container</div>
</div>
</div>
In Bootstrap 4 you use ".order-*-{n}"
This example has 3 columns. On a large view they are evenly spaced and in the same order as the HTML. On a medium view, HTML columns 1 and 3 are half width and across from each other while the middle HTML column is dropped to the bottom and full width. On small views they are each full width in HTML column order 1,3,2.
<div class="row">
<div class="col col-sm-12 col-md-6 col-lg-4 order-1"></div>
<div class="col col-sm-12 col-md-12 col-lg-4 order-sm-last order-lg-2"></div>
<div class="col col-sm-12 col-md-6 col-lg-4 order-3"></div>
</div>
I'm fairly new to Bootstrap, and I understand how Bootstrap uses a 12-column grid. When I want to make utilize a Bootstrap grid, I traditionally do it like this:
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
</div>
I also understand that different column sizes are used for different screen sizes
<div class="row">
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
</div>
However, I've seen a lot of people do something similar to this:
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
...
</div>
<div class="col-xs-6 col-md-6 col-lg-6">
...
</div>
</div>
Why use multiple column sizes? Will the browser detect which one is appropriate to use?
There is absolutely no reason to have all three classes in this example:
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
...
</div>
<div class="col-xs-6 col-md-6 col-lg-6">
...
</div>
</div>
It is effectively the same as this:
<div class="row">
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
</div>
Bootstrap grid classes work on all sizes above the size specified, so applying col-xs-6 will cause that element to also contain 6 columns on any larger screen sizes, like sm, md, etc. I'm guessing that whoever is including all three classes in the first example does not have a firm understanding of how the Bootstrap grid system works.
You only need to include multiple classes if you want the element to be a different size on different screen sizes:
<div class="row">
<div class="col-xs-4 col-md-3 col-lg-2">
...
</div>
<div class="col-xs-8 col-md-9 col-lg-10">
...
</div>
</div>
Multiple col sizes are for different types of screens:
xs: Extra Small screens (phones)
sm: Screen like for tablets
md: Screen like Desktop
lg: Screen for larger desktops
Basically these will be defined in various media queries in bootstrap.css which helps browser to detect which one to use.
Learn more here
Addendum
The use of different col classes mentioned above should be in the only situation where you are specifying different column sizes for different screens. For ex: if you want 12 col in xs, 6 col in sm, 3 col in md and 2 col in lg, then you can use it as col-xs-12 col-sm-6 col-md-3 col-lg-2. Otherwise if they are going to be same for all the screens then you can use any one from above, as in col-lg-6. This will tell browser to use 6 cols irrespective of screen size.
Have a look at this page to get an idea
http://getbootstrap.com/examples/grid/
In general The idea behind using multiple col classes is to use different width percentages based on the screen size :
Example :
if u add a col-md-6 and a col-xs-12 on a element , when the screen size is near the medium breakpoint it will use 6 columns but when the screen size is small it would use the entire width
The method is usually used for screen sizes. It is so you don't end up with 7 columns on a 7-inch screen. For example; with <div class="col-xs-1 col-md-3 col-lg-6"> you can have 1 column on a phone, 3 columns on a large tablet and 6 columns on a desktop monitor.
I have a Bootstrap Page like this:
<div class="row">
<div class="col-md-6">
A
</div>
<div class="col-md-6">
B
</div>
</div>
Looks like:
-----
|A|B|
-----
So if I look at it on a mobile Device, the Column A is on top, but I want the B on top.
Is this possible?
I tried it with push an pull, but it didn't work.
Use Column ordering to accomplish this.
col-md-push-6 will "push" the column to the right 6 and col-md-pull-6 will "pull" the column to the left on "md" or greater view-ports. On any smaller view-ports the columns will be in normal order again.
I think what throws people off, is that you have to put B above A in your HTML. There may be a different way to do this where A can go above B in the HTML, but I'm not sure how to do it...
DEMO
<div class="row">
<div class="col-md-6 col-md-push-6">B</div>
<div class="col-md-6 col-md-pull-6">A</div>
</div>
view-port >= md
|A|B|
view-port < md
|B|
|A|
It's worth noting that if you are using columns that are not both equal to 6, then the push amount will not equal the initial column size.
If you have 2 columns (A & B) and wish for column A to be smaller and to the right on "sm" or greater viewports, but atop a mobile (xs) viewport, you would use the following:
<div class="row">
<div class="col-sm-4 col-sm-push-8">A</div>
<div class="col-sm-8 col-sm-pull-4">B</div>
</div>
Otherwise, the alignment of the columns will appear off.
Flexbox Direction
For Bootstrap 4, apply one of the following to your .row div:
.flex-row-reverse
For responsive settings:
.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse
In Bootstrap 4, let's say you want to have one order for large screens and a different order for smaller screens:
<div class="container">
<div class="row">
<div class="col-6 order-1 order-lg-2">
This column will be ordered second on large to extra large screens
</div>
<div class="col-6 order-2 order-lg-1">
This column will be ordered first on large to extra large screens
</div>
</div>
</div>
You can omit order-1 and order-2 above. Just added for clarity. Default order will be the order the columns appear in the html.
For more info https://getbootstrap.com/docs/4.1/layout/grid/#reordering
The below code work for me
.row {
display: flex;
flex-direction: column-reverse;
}
This is now done (in Bootstrap v4) by adding order-# classes.
See https://getbootstrap.com/docs/4.1/migration/#grid-system-1
Like this:
<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>
I have three bootstrap 4 columns of different sizes. As the screen gets smaller the third column is hidden, then when the screen gets smaller still and the divs are stacked the order changes so that column 2 is at the top.
<div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
<h3>LEFT HAND SECTION</h3>
<p>For news, links photos or comments.</p>
</div>
<div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
<h3>MAIN SECTION</h3>
<p>The main content for the page.</p>
</div>
<div class="col-xs-12 col-md-4 d-none d-md-block order-last">
<h3>BLANK SECTION</h3>
<p>Will usually just be blank.</p>
</div>
I hope this helps. I found it difficult to understand this but finally got there with the help of this thread, but it was a bit hit and miss.
I used:
.row {
display: flex;
flex-direction: row-reverse;
}
This worked for me on Bootstrap 4:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 order-md-last">
<%= render 'form'%>
</div>
<div class="col-md-8 order-md-first">
CONTENT
</div>
</div>
</div>
Bootstrap 4 includes classes for flex.
See: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/
<div class="row flex-column-reverse flex-md-row">
<div class="col-sm-10">
Col 1
</div>
<div class="col-sm-2">
Col 2
</div>
</div>
In Bootstrap V4 (Released January 18, 2018) You can use Reordering Classes. Info here under Reordering tab.
https://getbootstrap.com/docs/4.0/layout/grid/