Columns are not responsive in Bootstrap

Question

I'm trying to make the columns stack under each other when on mobile screen, but have them show side by side on desktop. I'm confused as hell, this should be super simple but I can't see my bug...

<section id="about">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-6 col-sm-12 col-xs-12">
                <img class="ratio" src="img/about1.jpg">
                <div class="about-heading">Our Services</div>
                <div>Replace this content with your own content. Content should be relevant, unique and written with the goal of providing the reader the type of information they are looking for while motivating them to take action.</div>
            </div>
            <div class="col-md-6 col-sm-12 col-xs-12">
                <img class="ratio" src="img/about2.jpg">
                <div class="about-heading">About Us</div>
                <div>Replace this content with your own content. Content should be relevant, unique and written with the goal of providing the reader the type of information they are looking for while motivating them to take action.</div>
            </div>
        </div>
    </div>
</section>

http://goo.gl/woSq0c

you might have overridden the default bootstrap behaviors in your ccs file! — Muhammad, Aug 23 '15 at 16:40
assuming I had overridden default behaviours, which file would I need to update, the style.css file or the bootstrap.css file — Jack Robson, Aug 23 '15 at 16:47
the style.css, you have noting to do with bootstrap.css because if you edit it it may cause some unwanted behaviors — Muhammad, Aug 23 '15 at 17:23
I would start by removing col-sm-12 col-xs-12 from your columns. — vanburen, Aug 23 '15 at 19:06

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

You only need one of col-md- col-sm- col-xs-.

See this answer for more info: https://stackoverflow.com/a/19865627/2181514.

Bootstrap has 12 columns, but both your columns are set to fill all 12, so they will never be next to each other. Use -6 only.

Change both

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

to just

<div class="col-md-6">

or

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

edited May 23 '17 at 12:22

Community

1
1

answered Aug 23 '15 at 19:51

freedomn-m

27,664
8
35
57

Columns are not responsive in Bootstrap

1 Answers1