title: Bootstrap right-align inline <ul>
body: <p>I'm trying to find a solution to right-align my content for my container which is holding an inline un-ordered list. The issue that I'm having is that my list contains mixed content (text, links and icons).</p>
  
  <pre><code>    &lt;!-- Header --&gt;
  &lt;div class="container"&gt;
    &lt;div id="intro" class="text-right"&gt;
      &lt;ul class="list-inline"&gt;
        &lt;li&gt;&lt;a href="directions.php"&gt;5420 Bond Road, Louisville, MS 39339&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-facebook fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-twitter fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-instagram fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-google-plus fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Nav Bar --&gt;
  &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a class="navbar-brand" href="index.php"&gt;MCBC Louisville&lt;/a&gt;
      &lt;/div&gt;
      &lt;ul class="nav navbar-nav"&gt;
        &lt;li class="active"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>