1

I'm planning to align these to two divs(the ones containing h3 tags) horizontally but every time I resize my browser the other div keeps on stacking below the first div. Here's a part of the code. Where did I do wrong?

<section id="main-content" " ng-controller="studCtrl">
      <section class="wrapper">
        <h3><i class="fa fa-angle-right"></i>Administrative Module</h3>
          <div class="row mt">
              <div class="col-lg-12">
                <div class="content-panel">
                    <div class="container-fixed">
                        <div class="row">
                                <div class="col-lg-6 ">
                                    <h3>Lost and Found List</h3>
                                </div>
                                <div class="col-lg-6">
                                    <h3 class="text-right">Button here</h3>
                                </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                <thead>
                                  <tr >
                                      ...
                                  </tr>
                                 </thead>
                                 <tbody>
                                   ...
                                 </tbody>
                            </table>
                        </div>
                    </div>
                 </div>

               </div><!-- /content-panel -->
           </div><!-- /col-lg-12 -->
          </div><!--/row mt -->

         </section><!--/wrapper -->
  </section><!-- /MAIN CONTENT -->
2
  • Probably unrelated, but you started off with a typo. Extra quote in <section id="main-content" " ng-controller="studCtrl">
    – j08691
    Jul 9, 2015 at 2:51
  • oh sorry about that. Thanks.
    – Kael
    Jul 9, 2015 at 2:57

2 Answers 2

0

Most likely it's your browser resizing is not going beyond the media query widths for the 'large' column definitions. Try the xs or sm instead to find the desired breaks.

<div class="col-xs-6"> ... </div>

The above would always break 2 columns.

The link below shows the details of the media queries underlying. For this answer, the relevant breaks are:

Prefix      Break
.col-xs-    auto
.col-sm-    ~372px/col-6 (750px for container)
.col-md-    ~486px/col-6 (970px for container)
.col-lg-    ~582px/col-6 (1170px for container)

Link: http://getbootstrap.com/css/#grid-media-queries

0
0

You have to see how aspects of the Bootstrap grid system work across multiple devices with a handy table. Grid options

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, e.g. 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.

  • col-xs-* for extra small devices Phones (<768px)
  • col-sm-* for small devices Tablets (≥768px)
  • col-md-* for medium devices Desktops (≥992px)
  • col-lg-* Large devices Desktops (≥1200px)

Thus, you must change your code to these below:

<div class="col-md-6">
   <h3>Lost and Found List</h3>
</div>
<div class="col-md-6">
   <h3 class="text-right">Button here</h3>
</div>

Or, incase if you want two divs always horizontal even for mobile device.

<div class="col-xs-6">
   <h3>Lost and Found List</h3>
</div>
<div class="col-xs-6">
   <h3 class="text-right">Button here</h3>
</div>

Your Answer

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 or ask your own question.