Geek Answers Handbook

Best approach for splitting Bootstrap grid columns

I split the Bootstrap columns as follows.

<div class="container-fluid"> <div class="row"> <div class="col-md-3">A</div> <div class="col-md-6"> <div class="col-md-12">B1</div> <div class="col-md-12"> <div class="col-md-8">B1.1</div> <div class="col-md-4">B1.2</div> </div> <div class="col-md-12"> <div class="col-md-10">B2.1</div> <div class="col-md-2">B2.2</div> </div> </div> <div class="col-md-3">C</div> </div> </div>

Visual layout of this code

Below is the visual layout of this code.

Is my grid column division right or wrong?

+8
css twitter-bootstrap twitter-bootstrap-3
source share
4 answers

Always wrap the column inside the row to avoid css scratch when resizing or something like that

 <div class="container-fluid"> <div class="row"> <div class="col-md-3">A </div> <div class="col-md-6">B <div class="row"> <div class="col-md-12">B1</div> </div> <div class="row"> <div class="col-md-8">B1.1</div> <div class="col-md-4">B1.2</div> </div> <div class="row"> <div class="col-md-10">B2.1</div> <div class="col-md-2">B2.2</div> </div> </div> <div class="col-md-3">C </div> </div> </div>
+6
source share

You should add row divs for children inside B.

 <div class="container-fluid"> <div class="row"> <div class="col-md-3"> A </div> <div class="col-md-6"> <div class="row"> <div class="col-md-12">B1</div> </div> <div class="row"> <div class="col-md-8">B1.1</div> <div class="col-md-4">B1.2</div> </div> <div class="row"> <div class="col-md-10">B2.1</div> <div class="col-md-2">B2.2</div> </div> </div> <div class="col-md-3"> C </div> </div> </div>
+5
source share

Just add the div row inside B for each row of columns inside: b , b1.1, b1.2 and b2.1, b2.2 . This should help.

 <div class="container-fluid"> <div class="row"> <div class="col-md-3"> A </div> <div class="col-md-6"> <div class='row'> <div class="col-md-12">B1</div> </div> <div class='row'> <div class="col-md-8">B1.1</div> <div class="col-md-4">B1.2</div> </div> <div class='row'> <div class="col-md-10">B2.1</div> <div class="col-md-2">B2.2</div> </div> </div> <div class="col-md-3"> C </div> </div> </div>
+4
source share

You should always wrap your columns inside a row for a better layout with no spaces in the columns or clearfix for the layout at intervals:

 <div class="container-fluid"> <div class="row"> <div class="col-md-3">A</div> <div class="col-md-6"> <div class="clearfix"> <div class="col-md-12">B1</div> </div> <div class="clearfix"> <div class="col-md-12"> <div class="clearfix"> <div class="col-md-8">B1.1</div> <div class="col-md-4">B1.2</div> </div> </div> </div> <div class="clearfix"> <div class="col-md-12"> <div class="clearfix"> <div class="col-md-10">B2.1</div> <div class="col-md-2">B2.2</div> </div> </div> </div> </div> <div class="col-md-3">C</div> </div> </div>

You may be interested to see this Q / A, Remove padding from columns .

+2
source share

More articles:


All Articles