CODEWITHSUNDEEP
responsive-designtwitter-bootstrap-3
Kevin Davis
Kevin Davis

Reputation: 2718

How to get bootstrap to display more columns in landscape mode

I would like to have some blocks of content display in one column in portrait mode (iPhone 5+ is 640px wide), and two columns when in landscape mode (iPhone 5+ is 1136px wide). My understanding reading the documentation (http://getbootstrap.com/css/#grid-media-queries) was that below 768px wide, Bootstrap would use the col-xs-* classes and that above 768px, Bootstrap would use the col-sm-* classes.

My markup looks something like:

<div class="col-xs-12 col-sm-6">some content</div>
<div class="col-xs-12 col-sm-6">some more content</div>

What am I missing here?

Upvotes: 1

Views: 1858

Answers (1)

moodyjive
moodyjive

Reputation: 1807

Remove the period before .col-sm-6 in the markup. Should be like this with only a space between:

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

Markup doesn't need the class indicator. Furthermore you only really need col-sm-6 because by default Bootstrap automatically goes to col-xs-12 below 768. 

<div class="col-sm-6"></div>

Upvotes: 1

Related Questions