CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
mohsenJsh
mohsenJsh

Reputation: 2108

bootstrap with two col and one of them has fix width

I use bootstrap 3 for styling and I have two div:

<div class="container">
  <div class="row">
    <div id="sidebar" class="col-md-3"></div>
    <div id="main" class="col-md-9"></div>
  </div>
</div>

I change .container style to width:96%

Now I want that (for large and desktop devices):

how can I do this?

Edit: and by fix width I mean something like #sidebar{ width:245px; } not percent

Upvotes: 2

Views: 108

Answers (1)

alamnaryab
alamnaryab

Reputation: 1484

try the following css and change different values on the basis of your requirements.

#sidebar{
  background:#DDD;
}
#main{
  background:#999;
}
@media screen and (min-width: 1100px) {
   .row{/*this selector should not be row as you may be using row for other objects too*/
     display:table;
     width:100%;
     padding:0px;
   }
   #sidebar.col-md-3{
     padding:0px;
     margin:0px;
     display:table-cell;
     width:250px;
     background:red;
   }
   #main.col-md-9{
     padding:0px;
     margin:0px;
     display:table-cell;
     background:green;   
   }
}

EDITED: give fixed width to sidebar in pixels and do not assign with to right div

there is another way to do it without using custom css

<div class="container">
    <div class="row">
        <div class="col-xs-3 col-lg-3 bg-success" style="width:200px;">sdfsf</div>
        <div class="container-fluid bg-warning">fluid</div>
    </div>
</div>

Upvotes: 3

Related Questions