CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
blaataap
blaataap

Reputation: 229

Converting non responsive three column lay-out to bootstrap three column lay-out

So i have an website using a three column lay-out with a fixed width of 1000px. I want to convert this to an bootstrap responsive lay-out. What i did was the following:

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-push-2">Main</div>
        <div class="col-lg-2 col-lg-pull-8">Left</div>
        <div class="col-lg-2">Right</div>
    </div>
</div>

I've set the container width for @media (min-width: 1200px) to width : 1000px. The problem i have now is that my sidebars are to small and the middle column is too wide. Changing the left and right col to col-lg-3 makes the colum to wide and the center column to small. I know bootstrap works with percentage so my question is, is this just how bootstrap works and i have to deal with it? Or is it somehow possible to set an fixed width to the sidebars? or is there an other way to make this happen?

thanks

Upvotes: 0

Views: 183

Answers (1)

Rvervuurt
Rvervuurt

Reputation: 8963

This is how Bootstrap works. If you want to adapt it to your own liking, you should give your Main, Left and Right divs a class of their own and just adapt the % in your CSS.

Just be aware that creating your own %-width DOES NOT make it responsive! What I mean to say is that your divs will resize according to the browser-width, resulting in a very skinny website on mobile phones. Best is to combine this solution with Bootstrap, so Bootstrap takes over whenever your browser gets under X pixels wide, or to write your own @media and change the look of your website according to the width of the page.

Edit: Of course you could also try and override the bootstrap width in your own CSS, but this might result in some weird things when you use the same col-width again on another page.

Upvotes: 1

Related Questions