title: How to align two tables in the same row inside a Bootstrap Panel?
body: <p>I want to put side-by-side two tables in the same grid-row but tables just stack over when run the code below:</p>
  
  <pre><code>&lt;body&gt;
  ...
  &lt;div class="container-fluid"&gt;
  &lt;div class="starter-template"&gt;
  
  &lt;div class='panel panel-primary'&gt;
  &lt;div class='panel-heading'&gt;&lt;h1&gt;Main Title&lt;/h1&gt;&lt;/div&gt;
  &lt;div class='panel-body'&gt;
  
  &lt;div class='row-fluid'&gt;
   &lt;h4&gt;Title&lt;/h4&gt;
   &lt;div class='span4'&gt;
     &lt;table class='table table-bordered'&gt;
        &lt;thead&gt;
          &lt;tr&gt;&lt;th&gt;feat1&lt;/th&gt;&lt;th&gt;feat2&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
        &lt;tbody&gt;
        &lt;tr&gt;&lt;td&gt;132&lt;/td&gt;&lt;td&gt;value a&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;114&lt;/td&gt;&lt;td&gt;value b&lt;/td&gt;&lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;&lt;!--closes table1--&gt;
  
    &lt;div class='span4'&gt;
     &lt;table class='table table-bordered'&gt;
     &lt;thead&gt;
     &lt;tr&gt;&lt;th&gt;feat1&lt;/th&gt;&lt;th&gt;feat3&lt;/th&gt;&lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;&lt;td&gt;264&lt;/td&gt;&lt;td&gt;val b&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;val c&lt;/td&gt;&lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;&lt;!--closes table2--&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;&lt;!--closes div panel-body--&gt;
  &lt;/div&gt;&lt;!--closes div panel--&gt;
  &lt;/div&gt; &lt;!-- /.starter-template --&gt;
  &lt;/div&gt;&lt;!-- /.container --&gt;
  ...
  &lt;/body&gt;
  </code></pre>
  
  <p>The result is one table in all the row and then the second one below the first one.</p>