CODEWITHSUNDEEP
htmltwitter-bootstrap-3grid-system
Michael Richardson
Michael Richardson

Reputation: 194

Bootstrap grid system columns under eachother

I am having a bit of a problem with the bootstrap grid system. I created my own navigation div at the top of the page. It all works fine for the larger screen sizes. When I reduce the size of the screen to xs, it breaks. Here is what I'm going for:

| logo | link 1 | link 2 | link 3 | link 4|

The above is for all screens except xs. For xs I'm getting:

| logo | link 1 |
|      | link 2 |
|      | link 3 |
|      | link 4 |

And what I want is:

| logo   |
| link 1 |
| link 2 |
| link 3 |
| link 4 |

Here is my code:

<div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
    <div class="row">
        <div class="col-xs-12 col-md-6">
            <a href="/"><h1 class="logo">LOGO</h1></a>
        </div>
    </div>
    <div class="row navbar navigation">
        <div class="col-xs-12 col-md-6 navLinks">
            <div class="col-xs-12 col-md-3 navLink">
                <h4 class="links"><a href="videos.html">LINK 1</a></h4>
            </div>
            <div class="col-xs-12 col-md-3 navLink">
                <h4 class="links"><a href="photos.html">LINK 2</a></h4>
            </div>
            <div class="col-xs-12 col-md-3 navLink">
                <h4 class="links"><a href="about-us.html">LINK 3</a></h4>
            </div>
            <div class="col-xs-12 col-md-3 navLink">
                <h4 class="links" id="contactLink"><a>LINK 4</a></h4>
            </div>
        </div>
    </div> 
</div>

Upvotes: 1

Views: 4409

Answers (1)

Reuben Gomes
Reuben Gomes

Reputation: 878

Load it as one full row remove the. Class row from the div class=row navbar

Remove the div row closing tag for row logo section and put it at the end

Upvotes: 1

Related Questions