Geek Answers Handbook

Where to place the bootstrap class

I am new to bootstrap and the concept of responsive design.

I read the download documents and followed some w3schools tutorials. All references to col- must = 12 in the same row class. They also mention that you can combine different col classes and example sizes <div class="col-md-3 col-xs-6">

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

Consider the following, where I want the mobile device to display 2 rows and 2 columns, and on the desktop one 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 -->

Given all the columns inside rows must = 12, should the row class be closed at different points for mobile and desktop computers ...?

How would I solve this problem, I hope the question makes sense.

thanks

+3
html css html5 twitter-bootstrap responsive-design
source share
4 answers

Your code is correct and does not need more .row s. The W3schools study guide is misleading , and it’s incorrect to say: “ .col-*-* must always contain up to 12 for each line.”

Good to have more (or less) than 12 columns in Bootstrap .row . It is known as column wrap and will simply make additional columns wrap to the next row ...

From Bootstrap Docs :

"If more than 12 columns are placed in one row, each group of additional columns will, like one block, turn into a new row

This is why there are examples in Bootstrap docs demonstrating the use of more than 12 columns in one .row . When using column wrappers, you need to know responsive resets (known as "clearfix") if the columns differ in height.

There are many responsive scenarios (like your example) where you want columns to be more than 12 in a single .row element. This is a common misconception that column units should be 12 or less in one .row.

Related questions ..

Download, what happens if I put more than 12 columns per row?

Bootstrap 3 is a row, can I have columns to add more than 12?

+2
source share

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

 <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 -->
+1
source share

This is just proper nesting. The problem that you mentioned in your question can be solved as follows: As you can see, the mobile device will display 2 rows and 2 columns, and on the desktop one column will contain 4 rows - Although this can be achieved using many other methods expanding the div, I showed only one such configuration to achieve the 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>
0
source share

The .row class is not required inside the .container, but it is a good idea to include it anyway when you start by wanting a few lines later.

All that .row really does is make sure that all its divs inside are displayed on a separate line, separated from the previous and next .rows

0
source share

More articles:


All Articles