Two Side-by-Side Tables in Bootstrap

Question

Is it possible to display two tables, side-by-side, in Bootstrap 3?

Each tried making each one col-md-6 and, although it shrinks the width, they don't wrap next to each other (instead one is on top of the other in the full-width view).

 <div class="table-responsive">             <table class="table table-striped">               <thead>                 <tr>                   <th class="col-md-1">#</th>                   <th class="col-md-2">Header</th>                   <th class="col-md-3">Header</th>                 </tr>               </thead>               <tbody>                 <tr>                   <td class="col-md-1">1,001</td>                   <td class="col-md-2">1,001</td>                   <td class="col-md-3">1,001</td>                 </tr>                 <tr>                   <td class="col-md-1">1,001</td>                   <td class="col-md-2">1,001</td>                   <td class="col-md-3">1,001</td>                 </tr>                  <tr>                   <td class="col-md-1">1,001</td>                   <td class="col-md-2">1,001</td>                   <td class="col-md-3">1,001</td>                 </tr>               </tbody>             </table>           </div>           <h2 class="sub-header">Latest Incidents</h2>           <div class="table-responsive">             <table class="table table-striped">               <thead>                 <tr>                   <th class="col-md-1">#</th>                   <th class="col-md-2">Header</th>                   <th class="col-md-3">Header</th>                 </tr>               </thead>               <tbody>                 <tr>                   <td class="col-md-1">1,001</td>                   <td class="col-md-2">1,001</td>                   <td class="col-md-3">1,001</td>                 </tr>                 <tr>                   <td class="col-md-1">1,001</td>                   <td class="col-md-2">1,001</td>                   <td class="col-md-3">1,001</td>                 </tr>                  <tr>                   <td class="col-md-1">1,001</td>                   <td class="col-md-2">1,001</td>                   <td class="col-md-3">1,001</td>                 </tr>               </tbody>             </table> 

Answer 1

You need to wrap each table in a col-6 div, as opposed to applying col-6 to the table itself. Here is your code with col-xs-6 wrapped around:

<div class="col-xs-6">   <h2 class="sub-header">Subtitle</h2>   <div class="table-responsive">     <table class="table table-striped">... 

And here it is in action: http://www.bootply.com/lbrQZF3152