title: Bootstrap table with a sidebar
body: <p>I've been reading about the grid system and played around with my code over and over, but can't get the website to look like how I want it to. I want a sidebar next to a "content" area (basically a table). </p>
  
  <p><strong><a href="http://i.imgur.com/HdA4M4K.png" rel="nofollow">Here is an image to help the visual</a></strong>.  Top is how my page looks now, and bottom is what I really it to look like.</p>
  
  <p>This is proving difficult as I want a button to the top right of table. Can you critique my current code? Sorry it is rather messy, and I am a noob at Bootstrap. </p>
  
  <p>Sidenote: This must be mobile compatible. </p>
  
  <pre><code>&lt;div class="row"&gt;
       &lt;div class="continer-fluid"&gt;
           &lt;div class="row-fluid"&gt;
               &lt;h2 class="col-sm-7"&gt;Your Off-Boarding Checklist&lt;/h2&gt;
               &lt;a class="btn btn-default btn-lg col-sm-1 pull-right" id="addtask" href="#"&gt;Add Task &amp;raquo;&lt;/a&gt;
  
               &lt;table class="table table-condensed table-hover table-striped table-bordered col-sm-12"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;
                          Complete Paperwork
                          &lt;span class="glyphicon glyphicon-menu-right pull-right" aria-hidden="true"&gt;&lt;/span&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
               &lt;/table&gt;
  
              &lt;div class="col-sm-3 pull-right container-fluid" id="sidebar"&gt;
                 &lt;h2&gt;Your Last Day&lt;/h2&gt;
                 &lt;h3&gt;July 1, 2015&lt;/h3&gt;
              &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>