1

I am teaching myself how to use Bootstrap columns, ran into a small problem.

When I resize my browser to the smallest size possible (or even halfway through, really) to make the css kick in the columns, instead of resizing to fit in 4 images for row it just becomes a single string of images like so:

Image example

Here is my html, I am using bootstrap 3. Any help would be appreciated.

<section class="container" style="padding-bottom: 60px;">
    <div class="row">

        <div class="col-md-6">
            <h2>Passion, precision and simplicity</h2>
            <p>
                Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Maecenas metus nulla, 
                commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor 
                convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas 
                metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, 
                sodales tempor convallis et, iaculis ac massa.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, 
                <strong>commodo a sodales sed</strong>, dignissim pretium nunc. Nam et lacus neque. 
                Ut enim massa, sodales tempor convallis et, <strong>iaculis ac massa</strong>.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed,
                dignissim pretium nunc. Nam et <a href="#">lacus neque</a>. Ut enim massa, sodales tempor convallis 
                et, iaculis ac massa.
            </p>

            <!-- divider -->
            <div class="divider styleColor">
                <i class="fa fa-leaf"></i>
            </div>

            <!-- brands -->
            <div class="row">
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/1.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/2.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/3.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/4.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/5.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/6.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/7.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/8.jpg" alt="">
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div>
                <img alt="" class="img-responsive" src="../assets/images/demo/people/woman.jpg">
            </div>
        </div>
    </div>
</section>
Improve this question
4
  • 1
    You have too many columns in the row with the images. Max is 12 per row. Commented Feb 3, 2015 at 14:49
  • 1
    Your .col-md-3, according to BS docs, is a column set at the md breakpoint. If you want columns for their tablet, you'd use .col-sm-3 or whatever flavor you want. Depending on what you need, you can mix/match columns and breakpoints, like this: .col-xs-6 .col-sm-4 .col-md-3 which would equate to two columns XS, 3 columns SM and 4 columns MD (and LG). Take some time to really read their docs, it'll pay dividends in any responsive design. Commented Feb 3, 2015 at 14:51
  • I will, sorry for the dumb-ish question. Commented Feb 3, 2015 at 14:54
  • 1
    There are no dumb questions, only dumb answers. This question is not one of those at all. All the answers so far have relevance and good information. Commented Feb 3, 2015 at 15:00

4 Answers 4

Reset to default
5

Use the smaller breakpoints like col-sm-* to make the vertical stacking happen at a narrower width. Or, you can use col-xs-* to make the columns never stack.

http://bootply.com/4JKga3vGjl

Note: Contrary to popular opinion, there's no problem having columns that total more than 12 units in a single row. It simply causes the row to wrap. From the docs (http://getbootstrap.com/css/#grid)..

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Wish I could vote your answer twice, for the 12 columns point. Some folks get pretty dogmatic about that.
1

I suggest you to take a look at the doc.

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

And in a row, you should have only, on total, the number 12. Like 4 times col-md-3, or 2x4+2x2, etc

In your case, that could be something like this.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<section class="container" style="padding-bottom: 60px;">
    <div class="row">

        <div class="col-md-6">
            <h2>Passion, precision and simplicity</h2>
            <p>
                Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Maecenas metus nulla, 
                commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor 
                convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas 
                metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, 
                sodales tempor convallis et, iaculis ac massa.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, 
                <strong>commodo a sodales sed</strong>, dignissim pretium nunc. Nam et lacus neque. 
                Ut enim massa, sodales tempor convallis et, <strong>iaculis ac massa</strong>.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed,
                dignissim pretium nunc. Nam et <a href="#">lacus neque</a>. Ut enim massa, sodales tempor convallis 
                et, iaculis ac massa.
            </p>

            <!-- divider -->
            <div class="divider styleColor">
                <i class="fa fa-leaf"></i>
            </div>

            <!-- brands -->
            <div class="row">
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/1.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/2.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/3.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/4.jpg" alt="">
                </div>
				</div>
				<div class="row">
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/5.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/6.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/7.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/8.jpg" alt="">
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div>
                <img alt="" class="img-responsive" src="../assets/images/demo/people/woman.jpg">
            </div>
        </div>
    </div>
</section>

Improve this answer

1 Comment

There's no problem with the columns totaling more than 12.. "If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line" ___ getbootstrap.com/css/#grid
1

It seems that you need to add col-sm-3 and col-xs-3 in addition to col-md-3, to handle your columns in lower sizes.

Check this bootply.

Improve this answer

Comments

1

you are using the classes "col-md-..." this targets medium devices. To set up your layout for smaller devices use "col-xs"

Note, that you can use both "col-xs-12 col-md-6" will display the element in 100% width on small devices and 50% width on medium devices and up.

In the bootstrap grid system, there are only 12 colums per row. you are trying to use only 12 per row.

check out http://getbootstrap.com/css/#grid-example-basic

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.