title: Adding padding to bootstrap table cells
body: <p>I have a flask application, with a little UI. I am having some formatting issues with Table cells especially when the data in cells is too much to fit in first line and spills over.</p>
  
  <p>here are the details:
  1. Using Bootstrap/Bootswatch template (Bootstrap 3.0)</p>
  
  <ol start="2">
  <li>The issue:
  I am displaying a table (code below), Each row is a list of links that I generate from my jinja2 template. Things are all aligned where there are a few
  items in <code>&lt;td&gt;&lt;/td&gt;</code>, however if I have more items then it spills over and the 
  buttons tend to overlap and touch teach other. </li>
  </ol>
  
  <p>I am looking for a way to maintain some alignment cell regardless of how many buttons I display on the row and maintain some padding between the buttons.</p>
  
  <ol start="2">
  <li>Code snippet</li>
  </ol>
  
  <p>` </p>
  
  <pre><code>&lt;table class="table table-striped table-hover"&gt;
  &lt;thead&gt;
  &lt;th&gt; Environment &lt;/th&gt;&lt;th&gt;Roles&lt;/th&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;h5&gt;Some Label&lt;/h5&gt;
  &lt;/td&gt;
  &lt;td&gt;
   &lt;a href="/connect/url/DUMMY/" class="btn btn-info" data-toggle="tooltip" 
    data-placement="top" title="... test title" &gt;DUMMY&lt;/a&gt;
   &lt;a href="/connect/url/DUMMY1/" class="btn btn-info" data-toggle="tooltip" 
    data-placement="top" title="... test title" &gt;DUMMY1&lt;/a&gt;
   &lt;a href="/connect/url/DUMMY2/" class="btn btn-info" data-toggle="tooltip" 
    data-placement="top" title="... test title" &gt;DUMMY2&lt;/a&gt;
   &lt;a href="/connect/url/DUMMY3/" class="btn btn-info" data-toggle="tooltip" 
    data-placement="top" title="... test title" &gt;DUMMY3&lt;/a&gt;
   &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;h5&gt;Another&lt;/h5&gt;
  :
  &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/tbody&gt; 
  &lt;/table&gt;
  </code></pre>