Search code examples
htmlcsstwitter-bootstraprowcol

Trying to understand how to use Bootstrap Row/Columns?

I am trying to make it so on a large screen there are 4 columns, a medium screen there are 2 and on an extra small screen just 1. The large and extra small work, but I'm assuming the medium does not simply because col-6 4 times would make it 24 instead of 12 columns. Here is my code:

<div class="row">
            <div class="col-xs-12 col-med-6 col-lg-3">
                <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
            </div>
            <div class="col-xs-12 col-med-6 col-lg-3">
                <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
            </div>
            <div class="col-xs-12 col-med-6 col-lg-3">
                <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
            </div>
            <div class="col-xs-12 col-med-6 col-lg-3">
                <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
            </div>
</div>

How would I be able to make this work so that the medium column only has 2 columns?

Solution

  • You've used wrong class for medium screen size. It should be col-md-6 instead of col-med-6

    And if you declare 4 columns of col-md-6, it will rearrange the columns such that the first two (total of 12) will occupy the first row and the next two will be arranged in the second row.