How do i make Bootstrap columns responsive on all devices?

Question

I'm currently developing a Login/Register page but I need help with the columns. The page currently looks like this on desktop 1920x180: http://prntscr.com/cl4ms8

I am using <div class="col-xs-6"> on both of the forms so they are evenly split on the page. How would I go across making it so it will be responsive on all devices as it currently looks like this on an iPhone 6: http://prntscr.com/cl4ndb

Answer 1

Bootstrap ships with 4 tiers of grids, which have class prefixes of;

• .col-xs- , (<768px)

• .col-sm- , (≥768px)

• .col-md- , (≥992px)

• .col-lg- , (≥1200px)

If you've applied a column class of "col-xs-6" what you are saying is that from 0px to 767px i want this column to be 50% of the containers width. And unless you add another class for the next grid tier, it will continue to be 50% of the parent on wider screens as well. So not only up to 768px but beyond unless you add another class.

Your problem here is that most mobiles are simply too narrow to show two columns for this purpose. So change "col-xs-6" to "col-xs-12". And add "col-sm-6" as well.

<div class="col-xs-12 col-sm-6">

That will mean that from 768px and up, the columns wil be 50%.

The reason why the layout looks broken though is probably because your input's have a width or min-width that is greater than the 50% width of the container and are therefore wider than the column grid they are nested in.

Answer 2

You elements with the col-xx-n classes need to be children or descendants of an element with the class container-fluid.

So, this will be responsive:

<div class="container-fluid">
  <div class="col-md-4">This div takes up 1/3 of the available width on a desktop</div>
  <div class="col-md-8">This div takes up 2/3 of the available width on a desktop</div>
</div>