5

Im fairly new to bootstrap and the concept of responsive design.

I was reading over the bootstrap docs and following some tutorials on w3schools. All mentions col- must = 12 in a single row class. They also mention you can combine different col classes and sizes example <div class="col-md-3 col-xs-6">

What I am not getting is when should you break the viewport with the </row> class when you combine different col sizes ?

Consider the following, where I want a mobile device to display 2 rows and 2 columns and on desktop a single column with 4 rows

<div class="container">
            <div class="row">

                <div class="col-md-3 col-xs-6">
                </div>

                <div class="col-md-3 col-xs-6">
                </div>

                <div class="col-md-3 col-xs-6">
                </div>

                <div class="col-md-3 col-xs-6">
                </div>

           </div><!--/row -->
       </div><!--/container -->  

Considering all columns inside rows must = 12, the row class would need to be closed on different points for mobile and desktop...?

How would I tackle the above problem, hope the question makes sense.

Thank you

Timothy Coetzee
  • 5,626
  • 9
  • 34
  • 97
  • Do you want "a single column with 4 rows" on desktop, or "a single row with 4 coumns" on desktop? – Carol Skelly Feb 28 '17 at 11:21
  • A row, sorry if this sounds stupid but what is the difference between a "single column with 4 rows" AND a "single row with 4 coumns"...? Im guessing it would probably be a single row with 4 coumns in this case... – Timothy Coetzee Mar 01 '17 at 05:37
  • Looking at your code I was thinking "single row with 4 coumns" because you have `col-md-3`, but your question says "on desktop a single column with 4 rows". The difference: http://www.codeply.com/go/2Tth8yqZdC That's why the other answers use `col-md-12` which won't work in your case, but your question should say "**on desktop a single row with 4 columns**". – Carol Skelly Mar 01 '17 at 11:24

4 Answers4

3

Your code is correct and doesn't need more .rows. The W3schools tutorial is misleading, and it's wrong to say ".col-*-* should always add up to 12 for each row".

It's ok to have more (or less) than 12 column units in a Bootstrap .row. It's known as column wrapping, and will simply make the extra columns wrap to the next line...

From the Bootstrap docs:

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"

That's why there are examples in the Bootstrap docs that demonstrate using more than 12 columns in a single .row. When using column wrapping you do need to be aware of responsive resets (known as "clearfix") if the columns vary in height.

There are many responsive scenarios (like your example) where it's necessary to have column units exceeding 12 in a single .row element. It's a common misconception that column units must be 12 or less in a single .row.

Similar Questions..

Bootstrap what will happen if I put more than 12 columns in a row?

Bootstrap 3 - row can I have columns add up to more then 12?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
2

Just change the "col-md-3" class to "col-md-12" in all divs to show 4 rows and single column on desktop and two rows and two columns on mobile.

<div class="container">
        <div class="row">

            <div class="col-md-12 col-xs-6">
            </div>

            <div class="col-md-12 col-xs-6">
            </div>

            <div class="col-md-12 col-xs-6">
            </div>

            <div class="col-md-12 col-xs-6">
            </div>

       </div><!--/row -->
   </div><!--/container -->
Arun
  • 21
  • 3
0

It's just proper nesting..the problem that you have mentioned in your question can be solved in the following way-- As you can see a mobile device will display 2 rows and 2 columns and on desktop a single column will have 4 rows-- Although it can be achieved using many other div nesting methods, I have shown only one such configuration to achieve your desired layout.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
       <style type="text/css">
        .btn-xs {
          display: inline-block;
          margin-right: 2%;
        }
       </style>
       </head>
       <body>
       
       <div class="container">
            <div class="row">

                <div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
                AAAAAAA
                </div>

                <div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
                BBBBBBBBBB
                </div>
                </div>
                <div class="row">
                <div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
                CCCCCCCCCCC
                </div>

                <div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
                DDDDDDDDDDD
                </div>

           </div><!--/row -->
       </div><!--/container -->  

</div>
</body>
</html>
neophyte
  • 6,540
  • 2
  • 28
  • 43
0

The .row class is not required inside a .container, but it is a good idea to include it anyways when you start incase you want multiple rows later on.

All that .row really does is make sure that all of the divs inside of it appear on their own line, separated from the previous and the following .rows