CODEWITHSUNDEEP
htmlcsstwitter-bootstrapsidebar
Václav Zeman
Václav Zeman

Reputation: 616

How to position sidebar in bootstrap?

I'm trying to position sidebar on the right side in a site based on Bootstrap grid.

Well, this is very simplified layout that I've made - jsFiddle

I admit it's not the good use of bootstrap classes (rows etc.) but it works.

The problem is: the sidebar html code must be under the text and content (because of SEO), so it must be somehow positioned next to content (class .content).

I tried positioned it as an relative element but didn't have any luck.

Upvotes: 1

Views: 1598

Answers (1)

Rob Quincey
Rob Quincey

Reputation: 2896

Is this more what you were after?

<div class="container">
    <div class="row">
        <div class="col-xs-9 pull-right">
            <div class="col-xs-12 content">Main</div>
            <div class="col-xs-12 text">Lorem</div>
        </div>
        <div class="col-xs-3 sidebar pull-left">
            <p>sidebar</p>
        </div> 
    </div>
</div>

jsFiddle

Basically I've split your entire container 3 to 9, and then made your 'content' and 'text' blocks children of the '9' column. I then applied both the pull-left and pull-right class to the relevant containers.

I also fixed up your HTML a bit as it was missing a div tag. I also got rid of some of the text to make the code more readable to me!

Upvotes: 4

Related Questions