CODEWITHSUNDEEP
htmltwitter-bootstrap
Cliff Crerar
Cliff Crerar

Reputation: 443

Bootstrap grid not stacking

I have written the HTML below I am using bootstrap 3.3.7, I have been bushwacking through the web and tweaking CSS and jQuery for 3 days now and I am not finding a solution.

I cannot get the grid to stack in mobile view. It worked when I coded the layout and then something unknown to me happened and I cannot repair it. Please help.

    <div id="idport"> <!--Portfolio-->
        <h2 class="mheading">Portfolio</h2>

        <div class="row" style="margin:0">
            <div class="col-xs-2 thumbnail">
                <a href="#" Title="Some website">
                    <img src="Spacer.png" alt="Some website">
                </a>
                <p>This is a title</p>  
            </div>              
            <div class="col-xs-2 thumbnail">
                <a href="#" Title="Some website">
                    <img src="Spacer.png" alt="Some website">
                </a>
                <p>This is a title</p>                      
            </div>
            <div class="col-xs-2 thumbnail">
                <a href="#" Title="Some website">
                    <img src="Spacer.png" alt="Some website">
                </a>
                <p>This is a title</p>                      
            </div>
            <div class="col-xs-2 thumbnail">
                <a href="#" Title="Some website">
                    <img src="Spacer.png" alt="Some website">
                </a>
                <p>This is a title</p>                      
            </div>
            <div class="col-xs-2 thumbnail">
                <a href="#" Title="Some website">
                    <img src="Spacer.png" alt="Some website">
                </a>
                <p>This is a title</p>                      
            </div>
        </div>
    </div> <!--end Portfolio-->

Upvotes: 3

Views: 2417

Answers (2)

lehel
lehel

Reputation: 451

It may be caused by multiple issues:

  • you put a margin: 0; on the row - by default, the row has a negative horizontal margin, by overriding this, elements don't fit any more
  • you may be modifying the wdith/margin of the columns with the .thumbnail class and thus breaking the stacking
  • change col-xs-2 into col-xs-12 to make it stack one below the other (and add another class, for example col-sm-2 to have the original layout on tablet and higher resolutions) - more info about that here

Upvotes: 1

j08691
j08691

Reputation: 207963

If you want them to stack as small resolutions then you need to tell Bootstrap that. What you have now says that each div should take up two columns at the smallest (xs) resolutions and above. So instead use:

<div class="col-xs-12 col-sm-2 thumbnail">

This says at the smallest resolutions make each div span all 12 columns, but on small screens (sm) and above, occupy two columns per div.

Upvotes: 5

Related Questions