What Is The Purpose Of Using Multiple Bootstrap Column Sizes?

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs What is the purpose of using multiple Bootstrap column sizes? Ask Question Asked 9 years, 4 months ago Modified 5 months ago Viewed 12k times 14

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?

• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Jul 3 at 23:44 informatik01 16.4k1111 gold badges7878 silver badges108108 bronze badges asked Aug 20, 2015 at 4:13 o_in25o_in25 14111 gold badge11 silver badge66 bronze badges 2

• Its mobile up. So if you only need 1 size col-xs-6 is enough. If you want different sizes in different breakpointa you specify more. One example is having 2 cols as in your example in all breakpoints but mobile like: <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div> – mindore Commented Aug 20, 2015 at 4:20
• In @mindore's example "col-sm-6 col-xs-12" would accomplish the same thing since md and lg will inherit the sm setting. That would get you two column spanning the width of the element on tablets and above and would give you one column spanning the entire width on phones. – Steve Hiner Commented Jun 15, 2017 at 17:13

Add a comment |

4 Answers 4

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 15

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> Share Improve this answer Follow answered Aug 20, 2015 at 4:19 Steve SandersSteve Sanders 8,65122 gold badges3232 silver badges3333 bronze badges 3

• I'm looking at getbootstrap.com/docs/3.3/css/#grid-options and it says for xs only 'less than' 768 where as every other size is 'greater than or equal'. So does this behavior not apply for 'xs'? – Matt Wilde Commented Apr 10, 2018 at 21:44
• "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". Can you explain how? Does it use javascript to achieve this? – ANewGuyInTown Commented Sep 13, 2019 at 6:14
• Downvoted because this: "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." that is not true! check this link and try to resize the window of your browser and you will see the difference! jsfiddle.net/eyLafr6u – lewis4u Commented Jun 13 at 14:15

Add a comment | 12

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.

Share Improve this answer Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge answered Aug 20, 2015 at 4:20 Guruprasad J RaoGuruprasad J Rao 29.7k1515 gold badges108108 silver badges205205 bronze badges 2

• 1 Your addendum seems to be backwards or it's worded poorly. It implies that if you want to show 1 col in xs you should use col-xs-1 but col-xs-1 would make the content only take up one of the 12 columns. You have to use col-xs-12 if you want one visible column. I see no reason why you'd want to use your "col-xs-1 col-sm-3 col-md-6 col-lg-12" example since it means the content will take up progressively more of the width as the screen gets larger. That's going to make annoyingly wide content on big screens and tiny content on little screens. "col-xs-12 col-sm-6 col-lg-3" would work better. – Steve Hiner Commented Jun 15, 2017 at 17:09
• @SteveHiner.. Thanks for pointing out.. Updated the Addendum.. :) – Guruprasad J Rao Commented Jun 15, 2017 at 18:17

Add a comment | 2

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 you 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.

Share Improve this answer Follow edited Jul 4 at 0:29 informatik01 16.4k1111 gold badges7878 silver badges108108 bronze badges answered Aug 20, 2015 at 4:19 PraveenPraveen 23622 silver badges1111 bronze badges Add a comment | -2

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.

Share Improve this answer Follow answered Aug 20, 2015 at 4:18 Joseph HaysJoseph Hays 1155 bronze badges 2

• 1 This is totally wrong. Go look at getbootstrap.com/examples/grid to understand the grid. "col-xs-1" means on phones you want the content to take up 1 of the 12 columns. "col-lg-6" means on large screens you want the content to take up half of the 12 columns. Your example would make the content get smaller on small screens and bigger on big screens which makes no sense. "col-lg-1 col-md-6 col-xs-12" would make a lot more sense. As the size of screen goes down you want the content to progressively take up more columns so it will be bigger and easier to read. – Steve Hiner Commented Jun 15, 2017 at 17:04
• I'm not sure how I made this mistake, a little embarrassing really. Probably had something to do with the four-in-the-morningness of it all. Thanks for the correction. – Joseph Hays Commented Oct 5, 2017 at 6:12

Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• css
• twitter-bootstrap

or ask your own question.

• The Overflow Blog
• You should keep a developer’s journal
• The real 10x developer makes their whole team better
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Linked

2 Why would I ever not use multiple col sizes?

Related

4 Why does Twitter Bootstrap let me have more than 12 columns? 3 equally large columns in Twitter Bootstrap 5 Why the need for different column classes in Twitter Bootstrap 3? 38 What's the difference between Bootstrap Spans & Columns 0 How does various cols differ in bootstrap 0 Bootstrap different sizes inside same column 2 Bootstrap row and col explanation 2 Bootstrap - do we have to use rows and columns? 0 Bootstrap columns conventions 3 Columns in Bootstrap

Hot Network Questions

• Extract signer information from portable executable (PE)
• Would the poulterer's be open on Christmas Day for Scrooge to buy their prize turkey?
• A Christmas Word Search
• Four fours, except with 1 1 2 2
• Is there an MVP or "Hello world" for chess programming?
• POVM Post measurement state
• How to define a common time between two clocks? - clock synchronization in special relativity
• Can we no longer predict the behavior of a particle with a definite position?
• A self-crossing image
• How does Heidegger account for the imagination and mental images in his monism?
• What is the expect lower bound for the Goldbach's function?
• Why is Curl licensed under an MIT-like license despite using a GPL library?
• Liquefaction of gases in the absence of gravity
• Is it possible to shrink back a GoPro battery?
• What's the name of the form of the song "12 Days of Christmas"?
• How can jitter be higher than the clock period?
• How can I attach a second subpanel to this main?
• Mixing between the tonic and dominant in melodic dictation
• What word(s) were used to identify the Van Dyke style of beard in the 17th century?
• Do you lose the right of attribution if you're charged with a crime?
• Does Psalm 104:4 imply that HaShem created the angels on Day 2?
• Visual aspect of an iron star
• Using eigenvalues of an differential operator to numerically solve another differential equation and use the solutions to perform integration
• How to make the spacing between these circles consistent?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html