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>