title: Align text at each end of a column - Bootstrap
body: <p>I have a responsive table where the end column shows money figures. Currently it looks like this:
  <a href="https://i.stack.imgur.com/Fx0vN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fx0vN.png" alt="Text currently"></a></p>
  
  <p>But I want it to do this:</p>
  
  <p><a href="https://i.stack.imgur.com/FBBfi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FBBfi.png" alt="Desired result"></a></p>
  
  <p>There may not be any data so the <code>£</code> sign will be replace with <code>N/A</code> which should also be pulled to the right of the column.</p>
  
  <p>The data is fetched from MySQL but here is a simplified snippet of my code:</p>
  
  <pre><code>&lt;table id="mytable" class="table table-bordred table-striped"&gt;
  &lt;thead&gt;
      &lt;th&gt;Reference&lt;/th&gt;
      &lt;th&gt;Client&lt;/th&gt;
      &lt;th&gt;Description&lt;/th&gt;
      &lt;th&gt;Money&lt;/th&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;#1234&lt;/td&gt;
              &lt;td&gt;Josh Blease&lt;/td&gt;
              &lt;td&gt;Needs a new filter fixing&lt;/td&gt;
              &lt;td class='money'&gt;
                  &lt;div class='text-right'&gt;Budget: £123,456&lt;/div&gt;
                  &lt;div class='text-right'&gt;Value: £200,000&lt;/div&gt;
                  &lt;div class='text-right'&gt;Spent: N/A&lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>