sidebar without collapse bootstrap 3

Question

Objective:

I want to create a bootstrap 3 layout sidebar without collapse like bitbucket. I want to do without writing or (minimum) custom styles.

What I have tried:

<div class="row">
 <div class="col-lg-2" >
   <div class="row">
     <div class="col-lg-3" style="border:1px solid red;">menu</div>
     <div class="col-lg-9" style="border:1px solid red;">left menu</div>
   </div>
 </div>
 <div class="col-lg-7" style="border:1px solid red;">
   <div class="row">
     <div class="col-lg-6">content</div>
     <div class="col-lg-6">content</div>
   </div>
 </div>
</div>

Problem : I've to split the content into 3 section

1. left sidebar(no collapse),
2. small content(col-**-1)
3. main content

But the left menu creates problem, I want the width of column(0.5) just col-**-0.5 to maintain the responsiveness.

Please suggest

Answer 1

As you mentioned that you need col-**-0.5 which is not possible. You need to set that using custom css .You can check this for your reference . You can either do in this way

 <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-xs-2 text-center" style="border:1px solid red;height: -webkit-fill-available;"> <div class="row"> <div class="col-lg-12" style="border:1px solid red;">menu</div> <div class="col-lg-12"> menu-1</div> <div class="col-lg-12"> menu-2</div> </div> </div> <div class="col-xs-3" style="border:1px solid red;"> <div class="row"> <div class="col-lg-12">content</div> <div class="col-lg-12">content</div> </div> </div> <div class="col-xs-7" style="border:1px solid red;"> <div class="row"> <div class="col-lg-12">content</div> <div class="col-lg-12">content</div> </div> </div> </div> </div>