title: How to create a sidebar with react-router and style the buttons
body: <p>I want to create a sidebar with buttons as shown in the image. I want to have the button to be dark grey when it is active. I have the bootstrap code but if I apply bootstrap using the css file and javascript file in the public/index.html then the navigation bar images comes to the middle of the navigation bar so I want to use the react-bootstrap for my sidebar. </p>
  
  <p><a href="https://i.stack.imgur.com/DjNGy.jpg" rel="nofollow noreferrer">https://i.stack.imgur.com/DjNGy.jpg</a></p>
  
  <p>this is the bootstrap code. how do I use react router's Link instead of  tags? for react bootstrap we generally use &lt;'Row'> &lt;'Col'> so how do we use these many "col" classes "col-sm-2 col-md-2 col-lg-2 col-xl-2". I'm also confused with ul tags in react-bootstrap as to how to use them with nav pills and other classes</p>
  
  <pre><code>&lt;nav class="d-none d-md-block col-sm-2 col-md-2 col-lg-2 col-xl-2 sidebar"&gt;    
          &lt;div class="sidebar-sticky"&gt;
                  &lt;ul class="nav nav-pills  nav-fill flex-column" role="tablist" style="margin-top:42px;"&gt;
                          &lt;li class="nav-item"&gt;
                            &lt;a class="nav-link active" data-toggle="pill" href="#/!" style="text-align:left;"&gt;
                              &lt;img src="/images/windows.png" style="height:20px;"&gt;
                              Dashboard&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                            &lt;a class="nav-link" data-toggle="pill" href="#!people" style="text-align:left;"&gt;
                                  &lt;img src="/images/people.png" style="height:20px;"&gt;                                
                              People&lt;/a&gt;
                          &lt;/li&gt;
                  &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
  </code></pre>
  
  <p>css for the sidebar</p>
  
  <pre><code>.sidebar {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 100;
      padding: 48px 0 0;
  }
  </code></pre>