I want take 1/3 width of a single row for all device.
Is there any other option to do instead of this code....
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8"></div>
</div>
Since Bootstrap is defined mobile first, you should be able to just define the xs size, like so:
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-8"></div>
</div>
use col-xs-4 it can act md-4 and lg-4 on larger devices.
you cannot use md-8 there is only 12 grids.
Related
Unfortunately Bootstrap in Beta version drops push-* and pull-*classes, so I don't have idea how to reorder columns in xs and sm devices from:
[column_1] [column_2] [column_3]
to:
[column_1][column_3]
[column_2]
Any ideas?
There are new Reordering helper classes.
Place the divs in HTML as you want them to appear in mobile:
<div class="container">
<div class="row">
<div class="col-6 col-md-4">
[column_1]
</div>
<div class="col-6 col-md-4 order-md-12">
[column_3]
</div>
<div class="col-6 col-md-4 order-md-1">
[column_2]
</div>
</div>
</div>
[column_1] will stay first and unordered. Reorder [column_3] with .order-md-12(will be last for md-size and up) and [column_2] .order-md-1(will be first for md-size and up)
Check jsfiddle
https://codepen.io/TheNoviceProgrammer/pen/JJzvQq
For the desktop and iPad I want the div to display it as
|1||2| Which it is displaying.
but on sm(small) and xs(extra small) mobile device I want it to display it as
|2|
|1|
I have tried bootstrap's push and pull for xs and sm but it's not working. Whereas using push(col-md-push-xx) and (col-md-push-xx)pull for xs and sm the layout of iPad and Desktop changes to |2|1| while mobile display remains the same as
|1|
|2|
I think I may have used the classes in div in a wrong way, If someone can help me out it would be much appreciated. Thanks.
My HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2 col-xs-12 col-xs-offset-0 col-sm-12 col-sm-offset-0 col-sm-offset-right-0 col-xs-offset-right-0">
<div class="row">
<div class=" col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0 col-md-6 col-lg-4 col-lg-offset-2">
<div>Labels & a bootstrap well</div>
</div>
<div class=" col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0 col-md-6 col-lg-4 col-lg-offset-0 col-lg-offset-right-2">
<div>Labels & a Table Gridview</div>
</div>
</div>
</div>
<div class="col-md-1 col-lg-2"></div>
</div>
</div>
After using col-md-push and pull it overlaps as below for tablet and desktops:
[![enter image description here][5]][5]
While in mobile device its still showing same as the mobile screenshot above.
Demo Pen
Yep your instincts are correct that push and pull are the way to go. They should be: col-md-push-6 and col-md-pull-6 for Bootstrap 3. Here's a link to a pen that will help you. Also remember that the class sizing is inherent, you can call col-xs-12 and the small break point will inherit the 12 column width as well.
HTML:
<div class="container-fluid">
<div class="row">
<div class="well col-xs-12 col-md-6 col-md-push-6">Labels & a bootstrap well</div>
<div class="grid col-xs-12 col-md-6 col-md-pull-6">Labels & a Table Gridview</div>
</div><!-- row -->
</div><!-- container-fluid -->
i have 3 col in medium view in bootstrap shown in above image ie.
i want to achieve this type of view in small view is col-sm-*
my code is
<div class="col-md-8">
<div class="col-md-12">A</div>
<div class="col-md-12">C</div>
</div>
<div class="col-md-4">
<div class="col-md-12">B</div>
</div>
IN THIS way i can achieve my target in medium view but cant achieve in small view.how can i achieve the both view as well as in medium and small view as shown in image.
I suggest reading bootstrap css doc also this
But try this:
<div class="row">
<div class="all a col-sm-12 col-md-6">A</div>
<div class="all b col-sm-12 col-md-6">B</div>
<div class="clearfix"></div>
<div class="all c col-sm-12 col-md-6">C</div>
</div>
You can remove the <div class="clearfix"></div> if you don't care about the height mismatch
Here's a working jsfiddle
It's a bit of a stretch, but you could try this:-
<div class="col-md-8">
<div class="col-md-12">A</div>
<div class="col-md-12 visible-sm visible-xs">B</div>
<div class="col-md-12">C</div>
</div>
<div class="col-md-4 hidden-sm hidden-xs">
<div class="col-md-12">B</div>
</div>
Frankly, I can't think of any other solution using just HTML and CSS. Although, if scripts were involved, it would be a different case.
First of all, you shouldn't assign columns without rows, so you should have something like:
<div class="row">
<div class="col-md-8 col-xs-12">A</div>
<div class="col-md-4 pull-right col-xs-12">B</div>
<div class="col-md-8 col-xs-12">C</div>
</div>
So you pull right your B Div (therefore not clearing the next div, and spacing it out). And with col-xs-12 you assure that float won't be present in mobile.
Heres a pen
Now, if you want to remain with your code, I guess Shan answer is the best one.
Well, you could have the height of B and work with margins so the positioning go right, but that isn't considered best practices and could cause some bugs.
Can I mix different columns (col-xs-, col-sm- etc) in my layout?
For example, I have:
<div class="col-xs-12">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
and more many col-xs columns.
But now for example, I want to change first column from full width to half in tablets and monitors, so I added "col-sm-6 col-sm-offset-3" and remove "col-xs-12" because "col-sm-6" means "col-xs-12":
<div class="col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
And it works, but this is correct with bootstrap grid system and standards?
Or Maybe I have to add "col-sm-*" to others? :
<div class="col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12 col-sm-12">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
Or maybe I have to keep "col-xs-12"?
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
Or maybe I have to keep "col-xs-12" and add "col-sm-*" to others to have identical types in all divs?
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12 col-sm-12">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
Which versions is correct? How do I properly mix different types of columns?
Bigger sizes override smaller sizes (e.g. col-sm will override col-xs unless the screen is smaller than col-sm). Personally I always add a col-xs and I only add the bigger sizes when I need them.
Example:
<!-- full width on phones and half on anything bigger -->
<div class="col-xs-12 col-sm-6">
...
</div>
This information is all found in Bootstrap's Documentation. It is perfectly fine to add multiple col-*-* classes to a <div> element:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
...
</div>
Is a perfectly viable class structure, that renders different column sizes depending on the current size of the viewport. If xs, it would be a full-width column. Small is half, medium is a 3rd and large is a 4th (based on a 12 column layout.)
If you need more information, take a look here:
Bootstrap Grid System
All the other answers explain what overrides what, but to answer your question about what you have to have, the default is 100% width. So if you only specify:
<div class="col-sm-6">
...
</div>
then when you get smaller than 768px it will go from 50% (6 columns) to 100 (12 columns)
Column sizing will default with the smallest size first (xs) with subsequent classes overriding the original size.
For example:
<div class="col-xs-12"></div>
Will appear as with 100% width on all browsers.
The following will appear as 100% on mobile browsers and 50% on tablets and up.
<div class="col-xs-12 col-sm-6"></div>
Bootstrap comes with a 12 columns grid system that must be placed within rows.
My question is, does the column number / row must be 12 (or less), or can I have a layout like the following
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
My understanding was that columns number within a row mustn't exceed 12, so based on my previous snippet, I would have made something like this
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
Is there anything I missed ?
Bootstrap allows you to "stack columns", the following is taken from their docs:
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Also from their docs:
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
Here, the col-xs values add up to 24, with a clearfix adding the required break
Patrick answer is correct but wanted to go into more detail since I was confused after reading documentation.
Depending on what you're going for having more than 12 columns without doing specific divs for multiple rows can make sense.
12 columns is as much as you can fit on 1 row.
More than 12 columns will cause multiple rows.
By default when you go down to the XS size it acts like col-xs-12. This is where you see it stacking the columns. You can change this behavior if you add a col-xs-n
More detailed jsfiddle Example
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-2">
Navigation
</div>
<div class="col-sm-6 col-md-5">
Editor
</div>
<div class="col-sm-6 col-md-5">
Display
</div>
</div>
</div>
In this example when viewing at medium size you see first column take up 2 columns and then the other two divs split the remaining columns. When you shrink it down to small the first div will then be a whole new row and the remaining divs will split 50/50. Then when you shrink down further to xs it will still do default behavior and stack columns evenly.
It makes sense to use this approach when you want all columns on one row in one resolution but want multiple rows in a different resolution. If you always want two rows then it would make more sense to make separate divs for each row.
Yes and no...
See example fiddle
You can have a layout like the one you specify, however it wont necessarily work per Bootstraps intended functionality, and as such its usually a good idea to follow their recommended row structure.
Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases.
Instead of
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
You should do, e.g:
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
Within a row, the sum of the numbers following the hyphen in each column definition should add up to 12.
However.... if you decide to use their (Bootstrap's ) less fies, then you can set the #grid-columns to any value, not just 12.
http://getbootstrap.com/customize/#grid-system
If you are using Bootstrap 4, you create a custom 10 columns grid easily, using their SASS mixins for the grid.
$grid-columns: 10; // This is where you define the number of columns you need/want
#if $enable-grid-classes {
.row-odd-col {
#include make-row();
> {
#if $enable-grid-classes {
#include make-grid-columns();
}
}
}
}
You can then use them like this-
<div class="row-odd-col">
<div class="col-md-5 col-lg-2">1</div>
<div class="col-md-5 col-lg-2">2</div>
<div class="col-md-5 col-lg-2">3</div>
<div class="col-md-5 col-lg-2">4</div>
<div class="col-md-5 col-lg-2">5</div>
</div>
For more details, check here - https://getbootstrap.com/docs/4.0/layout/grid/#sass-mixins
For making a responsive design of a website, first learn bootstrap or css grid layouts. It is also a good approach for making a responsive design. With bootstrap firstly learn grid system and learn the. Max an min widths for different devices and then set no. Of columns for each device and also set
#media (min-widtth: px) and (max-width: px) {}
And set individuals property for each device like phones, tablets, laptop and desktops for perfect fit.
Yes the sum of all columns in a row must be 12 or less. The answer above is correct, using:
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
will give you the same effect as your example above. 12 columns is pretty standard across most CSS grid systems.