How to position sidebar in bootstrap?

Question

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.

• The text in .text div does not have static height, it will change
• The .content will have same height every time

Answer 1

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!