title: Bootstrap 4 align right in cell
body: <p>I'm currently writing an interface for a ticket system that uses Bootstrap 4's grid system to position components about the system. As you can see from the screenshot below, the UI has two container-fluid divs stacked. The top div aligns perfectly, the second one I am struggling with.</p>
  
  <p>I want it to render like this (without the pink - the pink is showing the two cols):</p>
  
  <p><a href="https://i.stack.imgur.com/Qry39.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qry39.png" alt="how I would like to render"></a></p>
  
  <p>however it is rendering like this:</p>
  
  <p><a href="https://i.stack.imgur.com/iv4Ul.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iv4Ul.png" alt="how it is currently rendering"></a></p>
  
  <p>The code that renders this is as follows:</p>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container-fluid container-navbar"&gt;
      &lt;div class="row navbar"&gt;
          &lt;div class="col"&gt;
              logo goes here
          &lt;/div&gt;
          &lt;div class="col text-center help-desk"&gt;
              help desk.
          &lt;/div&gt;
          &lt;div class="col text-right"&gt;
              &lt;i aria-hidden="true" class="fa fa-bars" id="settings-menu" &gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container-fluid"&gt;
    &lt;div class="row ticket-summary-navbar"&gt;
      &lt;div class="col text-right"&gt;
        &lt;div class="global-ticket-summary"&gt;
          &lt;ul&gt;
            &lt;li &gt;
              &lt;p class="ticketCount" &gt;5&lt;/p&gt;
              &lt;p class="nameLabel" &gt;User1&lt;/p&gt;
            &lt;/li&gt;
            &lt;li &gt;
              &lt;p class="ticketCount" &gt;3&lt;/p&gt;
              &lt;p class="nameLabel" &gt;User2&lt;/p&gt;
            &lt;/li&gt;
            &lt;li &gt;
              &lt;p class="ticketCount" &gt;8&lt;/p&gt;
              &lt;p class="nameLabel" &gt;User3&lt;/p&gt;
            &lt;/li&gt;
            &lt;li &gt;
              &lt;p class="ticketCount" &gt;6&lt;/p&gt;
              &lt;p class="nameLabel" &gt;User4&lt;/p&gt;
            &lt;/li&gt;
            &lt;li &gt;
              &lt;p class="ticketCount" &gt;2&lt;/p&gt;
              &lt;p class="nameLabel" &gt;User5&lt;/p&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col"&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>body{
      background-color: #ababab;
  }
  
  .navbar{
      color: white;
      background-color: rgba(58, 191, 195, 1);
      height: 75px;
      padding-left: 10px;
      padding-right: 10px;
  }
  
  .container-navbar{
      padding-left: 0px;
      padding-right: 0px;
      min-width: 490px;
  }
  
  .help-desk{
      font-size: 30px;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
  }
  
  #settings-menu{
      font-size: 25px;
      cursor: pointer;
  }
  
  .ticket-summary-navbar{
      background-color: #f7f7f7;
      height: 90px;
  }
  
  .global-ticket-summary {
      font-family: 'Roboto', sans-serif;
      color: #1b1b1b;
      font-weight: 200;
  }
  
  .global-ticket-summary ul {
      list-style-type: none;
  }
  
  .global-ticket-summary ul li {
      text-align: center;
      float: left;
      width: 100px;
  }
  
  .global-ticket-summary ul li .ticketCount {
      font-size: 22pt;
      margin-bottom: -4px;
      cursor: pointer !important;
  }
  
  .global-ticket-summary ul li .nameLabel {
      font-size: 11pt;
      /*margin-bottom: 0;*/
      color: #656565;
      cursor: pointer !important;
  }
  </code></pre>
  
  <p>As you can see it renders the &lt;ul&gt; in the middle, even though I have the text-right directive. </p>
  
  <p>I can certainly get it working by adding "float:right;" to the UL - which positions correctly horizontally, however it then no longer aligns vertically correctly (it snaps to the top of the div). I have searched in many places for a solution, however all point to using the navbar for Bootstrap, which isn't relevant in this case.</p>
  
  <p>Is there a way I can have the UL align right to its parent div without resorting to padding/margin CSS hacks? </p>
  
  <p>Plunkr link also: <a href="https://next.plnkr.co/plunk/y4EYmtpgwRvHkjuI" rel="nofollow noreferrer">https://next.plnkr.co/plunk/y4EYmtpgwRvHkjuI</a></p>