I'm learning about the grid in Twitter Bootstrap 3 and there's something I don't understand...sorry if this is a dumb question.
I understand that media queries make the width of the container class different each time eg. a viewport with a minimum width of 768px makes the container class be 750 px wide. ....a viewport with a minimum width of 1200px makes the container class be 1170px etc.
However why is there a need to have different classes for columns such as .col-md-2 and .col-lg-2 as in both these cases the value is 8.333333333333332%; and then .col-md-3 and .col-lg-3 are both 25% and so on
25% of 750px would still give you propotionally the same as 25% of 1170px
You have four different classes so you can have four different layouts, depending on screen size.
The key part of the Bootstrap grid system that I see most people misunderstanding is that you do not need all four classes - xs, sm, md, and lg. The browser will take the smallest one and apply that until it reaches a larger one.
So for instance, col-xs-4 would be applied at all screen sizes if no other sizes are ever applied. Adding col-sm|md|lg-4 to the same div is completely unnecessary.
As a side note, I also see col-xs-12 col-sm-4 a lot as well, which is also unnecessary. col-xs-12 is implied if you set a sm or larger class. Actually, 12 column is implied for any size smaller than the smallest declared. So if you just put col-lg-4, then col-xs|sm|md-12 is implied.
So if you want your layout to look exactly the same at all resolutions, just use xs. If you want it to look a certain way on tablets and up, but just be stacked on phones, then just use sm. If you want that div to be 3 on phones, 4 on tablets, and 6 on desktops and up, then you need col-xs-3 col-sm-4 col-md-6.
.col-xs-, .col-sm-, .col-md-, and .col-lg- all refer to different viewport sizes for there columns each is there so you can set your columns different on different devices. If you refer to this table (http://getbootstrap.com/css/#grid-options) it will show you each size that corresponds to each one of the differing classes.
Basically they look and act the same as you pointed out, but they are set up using different media queries so they differ in this factor. This is so you can have different spanning columns on different devices. let's say you like a column span of four for your medium to large devices a span of six for your small/tablet devices and a span twelve for your extra-small/phone devices. You should only have to worry about your medium and small devices in this case the large will inherit it's span from your medium declaration and the extra-small should automatically be 12 if not set. (I'm not positive on that last part but that's what it seems to be.)
So all you have to do is add .col-md-4 to all your divs as well as a .col-sm-6 and this will execute the above said layout.
Related
I am a beginner in using bootstrap 3. But I have a div which should span 6 columns on Desktop, Mobile and Tablet-Landscape and span 8 columns on Tablet-Portrait.
I am tyring to create my own css classes, since I am not aware of another way.
<div class="my-col-xs-ld-6 td-col-xs-ld-offset-3 td-col-sm-pr-8 td-col-sm-pr-offset-3">
Content here
</div>
Css
#media screen and (min-width: 768px) and (orientation:landscape) {
.td-col-xs-ld-6 {
}
}
#media screen and (orientation:landscape) {
.td-col-xs-ld-offset-3 {
}
}
I understand that I have two create different orientation for each class. But I am stuck here, didn't know how I can implement this.
This can help you:
the grid system limits:
https://v4-alpha.getbootstrap.com/layout/grid/#grid-options
And the usual size of each of the most used devices with their sizes:
https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/
Now, compare the sizes of each one and set the columns according to your need, for example, a device (tablet) in portrait can achieve 1024px, so you can use col-md-2 or col-lg-2 (this will create 6 same sized columns inside one row) and for a larger screen, such as more than 1024px, you use col-xl-2 (it will create 6 columns in one row).
Always remember that bootstrap grid system uses a total of 12 columns inside one row, so you can split those 12 in many ways, but it need to sum always 12 in the end. for example:
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
EDIT
So, if i understood correct, you want to create your own CSS style for columns like bootstrap have, not use bootstrap.
So, this is the basic bootstrap style for all kinds of columns, you can use this base:
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
now, for each size you want, you will need to define widths, preferable in %, to be more responsive. (Example: for 4 columns, divide 100%, the total width, in 4, so 25%, or something similar [remember that if you have margin, you need to subtract from the width])
Use media queries for at least 4 device sizes, example: less than 576px, less than 768px, less than 992px ,and bigger than 992px...
What is the difference among col-lg-* , col-md-* and col-sm-* in Twitter Bootstrap?
Updated 2020...
Bootstrap 5
In Bootstrap 5 (alpha) there is a new -xxl- size:
col-* - 0 (xs)
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px
col-xxl-* - 1400px
Bootstrap 5 Grid Demo
Bootstrap 4
In Bootstrap 4 there is a new -xl- size, see this demo. Also the -xs- infix has been removed, so smallest columns are simply col-1, col-2.. col-12, etc..
col-* - 0 (xs)
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px
Bootstrap 4 Grid Demo
Additionally, Bootstrap 4 includes new auto-layout columns. These also have responsive breakpoints (col, col-sm, col-md, etc..), but don't have defined % widths. Therefore, the auto-layout columns fill equal width across the row.
Bootstrap 3
The Bootstrap 3 grid comes in 4 tiers (or "breakpoints")...
Extra small (for smartphones .col-xs-*)
Small (for tablets .col-sm-*)
Medium (for laptops .col-md-*)
Large (for laptops/desktops .col-lg-*).
These grid sizes enable you to control grid behavior on different widths. The different tiers are controlled by CSS media queries.
So in Bootstrap's 12-column grid...
col-sm-3 is 3 of 12 columns wide (25%) on a typical small device width (> 768 pixels)
col-md-3 is 3 of 12 columns wide (25%) on a typical medium device width (> 992 pixels)
The smaller tier (xs, sm or md) also defines the size for larger screen widths. So, for the same size column on all tiers, just set the width for the smallest viewport...
<div class="col-lg-3 col-md-3 col-sm-3">..</div> is the same as,
<div class="col-sm-3">..</div>
Larger tiers are implied. Because col-sm-3 means 3 units on sm-and-up, unless specifically overridden by a larger tier that uses a different size.
xs(default) > overridden by sm > overridden by md > overridden by lg
Combine the classes to use change column widths on different grid sizes. This creates a responsive layout.
<div class="col-md-3 col-sm-6">..</div>
The sm, md and lg grids will all "stack" vertically on screens/viewports less than 768 pixels. This is where the xs grid fits in. Columns that use the col-xs-* classes will not stack vertically, and continue to scale down on the smallest screens.
Resize your browser using this demo and you'll see the grid scaling effects.
This article explains more about how the Bootstrap grid
The bootstrap docs do explain it, but it still took me a while to get it. It makes more sense when I explain it to myself in one of two ways:
If you think of the columns starting out horizontally, then you can choose when you want them to stack.
For example, if you start with columns:
A B C
You decide when should they stack to be like this:
A
B
C
If you choose col-lg, then the columns will stack when the width is < 1200px.
If you choose col-md, then the columns will stack when the width is < 992px.
If you choose col-sm, then the columns will stack when the width is < 768px.
If you choose col-xs, then the columns will never stack.
On the other hand, if you think of the columns starting out stacked, then you can choose at what point they become horizontal:
If you choose col-sm, then the columns will become horizontal when the width is >= 768px.
If you choose col-md, then the columns will become horizontal when the width is >= 992px.
If you choose col-lg, then the columns will become horizontal when the width is >= 1200px.
From Twitter Bootstrap documentation:
small grid (≥ 768px) = .col-sm-*,
medium grid (≥ 992px) = .col-md-*,
large grid (≥ 1200px) = .col-lg-*.
Let's un-complicate Bootstrap!
Notice how the col-sm occupies the 100% width (in other terms breaks into new line) below 576px but col doesn't. You can notice the current width at the top center in gif.
Here comes the code:
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Bootstrap by default aligns all the columns(col) in a single row with equal width. In this case three col will occupy 100%/3 width each, whatever the screen size. You can notice that in gif.
Now what if we want to render only one column per line i.e give 100% width to each column but for smaller screens only? Now comes the col-xx classes!
I used col-sm because I wanted to break the columns into separate lines below 576px. These 4 col-xx classes are provided by Bootstrap for different display devices like mobiles, tablets, laptops, large monitors etc.
So,col-sm would break below 576px, col-md would break below 768px, col-lg would break below 992px and col-xl would break below 1200px
Note that there's no col-xs class in bootstrap 4.
This pretty much sums-up. You can go back to work.
But there's bit more to it. Now comes the col-* and col-xx-* for customizing width.
Remember in the above example I mentioned that col or col-xx takes the equal width in a row. So if we want to give more width to a specific col we can do this.
Bootstrap row is divided into 12 parts, so in above example there were 3 col so each one takes 12/3 = 4 part. You can consider these parts as a way to measure width.
We could also write that in format col-* i.e. col-4 like this :
<div class="row">
<div class="col-4">col</div>
<div class="col-4">col</div>
<div class="col-4">col</div>
</div>
And it would've made no difference because by default bootstrap gives equal width to col (4 + 4 + 4 = 12).
But, what if we want to give 7 parts to 1st col, 3 parts to 2nd col and rest 2 parts (12-7-3 = 2) to 3rd col (7+3+2 so total is 12), we can simply do this:
<div class="row">
<div class="col-7">col-7</div>
<div class="col-3">col-3</div>
<div class="col-2">col-2</div>
</div>
and you can customize the width of col-xx-* classes also.
<div class="row">
<div class="col-sm-7">col-sm-7</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-2">col-sm-2</div>
</div>
How does it look in the action?
What if sum of col is more than 12? Then the col will shift/adjust to below line. Yes, there can be any number of columns for a row!
<div class="row">
<div class="col-12">col-12</div>
<div class="col-9">col-9</div>
<div class="col-6">col-6</div>
<div class="col-6">col-6</div>
</div>
What if we want 3 columns in a row for large screens but split these columns into 2 rows for small screens?
<div class="row">
<div class="col-12 col-sm">col-12 col-sm TOP</div>
<div class="col col-sm">col col-sm</div>
<div class="col col-sm">col col-sm</div>
</div>
You can play around here: https://jsfiddle.net/JerryGoyal/6vqno0Lm/
I think the confusing aspect of this is the fact that BootStrap 3 is a mobile first responsive system and fails to explain how this affects the col-xx-n hierarchy in that part of the Bootstrap documentation.
This makes you wonder what happens on smaller devices if you choose a value for larger devices and makes you wonder if there is a need to specify multiple values. (You don't)
I would attempt to clarify this by stating that...
Lower grain types (xs, sm) attempt retain layout appearance on smaller screens and larger types (md,lg) will display correctly only on larger screens but will wrap columns on smaller devices.
The values quoted in previous examples refer to the threshold as which bootstrap degrades the appearance to fit the available screen estate.
What this means in practice is that if you make the columns col-xs-n then they will retain correct appearance even on very small screens, until the window drops to a size that is so restrictive that the page cannot be displayed correctly.
This should mean that devices that have a width of 768px or less should show your table as you designed it rather than in degraded (single or wrapped column form).
Obviously this still depends on the content of the columns and that's the whole point. If the page attempts to display multiple columns of large data, side by side on a small screen then the columns will naturally wrap in a horrible way if you did not account for it. Therefore, depending on the data within the columns you can decide the point at which the layout is sacificed to display the content adequately.
e.g. If your page contains three col-sm-n columns bootstrap would wrap the columns into rows when the page width drops below 992px.
This means that the data is still visible but will require vertical scrolling to view it. If you do not want your layout to degrade, choose xs (as long as your data can be adequately displayed on a lower resolution device in three columns)
If the horizontal position of the data is important then you should try to choose lower granularity values to retain the visual nature. If the position is less important but the page must be visible on all devices then a higher value should be used.
If you choose col-lg-n then the columns will display correctly until the screen width drops below the xs threshold of 1200px.
TL;DR
.col-X-Y means on screen size X and up, stretch this element to fill Y columns.
Bootstrap provides a grid of 12 columns per .row, so Y=3 means width=25%.
xs, sm, md, lg are the sizes for smartphone, tablet, laptop, desktop respectively.
The point of specifying different widths on different screen sizes is to let you make things larger on smaller screens.
Example
<div class="col-lg-6 col-xs-12">
Meaning: 50% width on Desktops, 100% width on Mobile, Tablet, and Laptop.
Device Sizes and class prefix:
Extra small devices Phones (<768px) - .col-xs-
Small devices Tablets (≥768px) - .col-sm-
Medium devices Desktops (≥992px) - .col-md-
Large devices Desktops (≥1200px) - .col-lg-
Grid options:
Reference: Grid System
.col-xs-$ Extra Small Phones Less than 768px
.col-sm-$ Small Devices Tablets 768px and Up
.col-md-$ Medium Devices Desktops 992px and Up
.col-lg-$ Large Devices Large Desktops 1200px and Up
One particular case : Before learning bootstrap grid system, make sure browser zoom is set to 100% (a hundred percent). For example : If screen resolution is (1600px x 900px) and browser zoom is 175%, then "bootstrap-ped" elements will be stacked.
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">class="col-lg-4"</div>
<div class="col-lg-4">class="col-lg-4"</div>
</div>
</div>
Chrome zoom 100%
Browser 100 percent - elements placed horizontally
Chrome zoom 175%
Browser 175 percent - stacked elements
well it's used to tell bootstrap how many columns are to be placed in a row depending on the screen size-
col-xs-2
would show only 2 columns in a row in extra small(xs) screen, in the same way as sm defines a small screen, md(medium sized), lg(large sized),
but according to bootstrap smaller first rule, if you mention
xs-col-2 md-col-4
then 2 columns would be shown in every row for screen sizes from xs upto sm(included) and changes when it gets next size i.e. for md up to lg(included)
for a better understanding of screen sizes try running them in various screen modes in chrome's developer mode(ctr+shift+i) and try various pixels or devices
I see divs on projects like <div class="col-lg-8 col-xs-12 col-md-6> and I wanted to know why there's 3 grid classes instead of 1. Is it for mobile?? But how the browser will decode which one is for mobile? Is there a specific classes sequence <div class="(PC) col-lg-8 (LAPTOPS) col-xs-12 (MOBILE)col-md-6>?
And If I use the col-offset option, it will offset all the classes or
just the class before it?
Thanks in advance!
GO HERE FOR MORE INFORMATION
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Grid Classes The Bootstrap grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger
desktops)
The classes above can be combined to create more dynamic and
flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for
xs and sm, you only need to specify xs.
According to your question, you see 3 classes used, there are 4 basic classes -
col-lg-x , 2. col-md-x , 3. col-sm-x , 4. col-xs-x.
-lg --> Large desktops.
-md --> laptops/desktops.
-sm --> tablets.
-xs --> mobile screens.
And "-x" stands for numeric value of width in terms of blocks, ranging between 1 and 12.
Our screen is basically divided into 12 parts by the bootstrap (in every screen size - lg, md, sm, xs)
12 being the whole screen in all the cases.
So, you can choose the amount of block space width you want to assign to some block based on the screen size.
So, if you choose -
<div> class="col-lg-8 col-xs-12 col-md-6">
you are telling your browser to allow the <div> to have
// col-lg-8 -- 8 blocks of space on large screens
// col-xs-12 -- 12 (whole screen) of space on small(mobile) screens
// col-md-6 6 blocks (half the screen) in medium sized screens (laptops/desktops)
ALSO
They are the classes , no sequence matter at all.
The browser won't decode that stuff, it's the Js's files of Bootstrap which will care of it, for the browsers.
// LG - larger computer
// MD - computer
// SM - tablet
// XS - smartphone
If you inspect with your inspector theses class, you'll see for example that col-8 correspond to :
.col-8 {
width: 50%;
max-width: 50%;
}
So it takes 50% width of his parent. And if your set a class at col-4, it will be at 50% less width than col-8, so :
.col-4 {
width: 25%;
max-width: 25%;
}
When you add "sm", it mean that it will be triggered only for mobile, "md" for tablet.
Maybe this is a very simple question, but I am wondering if you can setup multiple layouts based on window size, and have them apply based off the users current window size?
Right now I use bootstrap with C# and I set one standard size like col-md-#, and then let everything below that just fall apart into pieces as elements start overlapping. This makes the site at least readable on small screens but it is still a mess since everything is all broken apart.
Example md/lg layout
moving to a smaller screen (sm/xs) then breaks those elements into pieces, which cascade vertically.
What I am wondering is if I can maybe setup a col-xs/sm-12, and then re-arrange the elements (or re-size items like images/tables/divs) to better suite a smaller screen. Basically have/display different layouts when moving from different screen sizes.
Is it possible that instead of just breaking the elements apart (like above) for smaller screens, to in fact run a different style for smaller screen sizes (below)?
TLDR: Does bootstrap currently support multiple layouts that are determined by window size, rather than having just one layout, and breaking everything apart for anything smaller?
If so, can a simple example be given showing two layouts being enacted by different window sizes.
Yes.
If your using bootstrap 3, you can simply define the layout for xs, which will then scale up until something bigger takes over.
for example
col-xs-6 col-md-12
col-xs-6 col-md-12
col-xs-12
col-xs-12
So when its on xs, it will display as 6 columns, then medium up will display on 12 columns.
The above is better described here http://getbootstrap.com/css/#grid
you can also use push/pull to adjust the ordering http://getbootstrap.com/css/#grid-column-ordering
i'm trying to create a portfolio kind of style layout, with different widths for the columns.
The issue i'm having is that the layout breaks in the row that has a 5col div on the left and a 7col on the right.
When it's the other way around (7col | 5col) it seems to work fine. That's a weird behaviour.
Does anyone know why this might be happening?
To demo this bug, just resize your window.
http://codepen.io/anon/pen/lqsgC
Cheers,
Thales Macedo
It doesn't exactly "break", what happens is actually intended behavior.
You are using the .col-md-* which means that columns will be formed only if the viewport is "medium" as defined by TBS3. Otherwise, they will stack. This is what you are observing because resizing the window eventually leads to a small (or extra-small) viewport and the columns will display stacked.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
If you would like for the columns to always show up, you need to use .col-xs-* instead.