Bootstrap 4 align right in cell - html

Question

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.
I want it to render like this (without the pink - the pink is showing the two cols):
however it is rendering like this:
The code that renders this is as follows:
HTML:
<div class="container-fluid container-navbar">
<div class="row navbar">
<div class="col">
logo goes here
</div>
<div class="col text-center help-desk">
help desk.
</div>
<div class="col text-right">
<i aria-hidden="true" class="fa fa-bars" id="settings-menu" ></i>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row ticket-summary-navbar">
<div class="col text-right">
<div class="global-ticket-summary">
<ul>
<li >
<p class="ticketCount" >5</p>
<p class="nameLabel" >User1</p>
</li>
<li >
<p class="ticketCount" >3</p>
<p class="nameLabel" >User2</p>
</li>
<li >
<p class="ticketCount" >8</p>
<p class="nameLabel" >User3</p>
</li>
<li >
<p class="ticketCount" >6</p>
<p class="nameLabel" >User4</p>
</li>
<li >
<p class="ticketCount" >2</p>
<p class="nameLabel" >User5</p>
</li>
</ul>
</div>
</div>
<div class="col">
</div>
</div>
</div>
CSS:
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;
}
As you can see it renders the <ul> in the middle, even though I have the text-right directive.
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.
Is there a way I can have the UL align right to its parent div without resorting to padding/margin CSS hacks?
Plunkr link also: https://next.plnkr.co/plunk/y4EYmtpgwRvHkjuI

Answer 1

Put the text align on the global-ticket-summary div, and if that doesn't work put it in the UL. Text align only works for the direct child elements I believe

Answer 2

You can use flexbox to align content. Just put this .flex-container class into your code to right align child elements.
.flex-container {
display: flex;
justify-content: flex-end;
align-items: center;
}
If you are new to css i will recommend you to take a look into flexbox.

Answer 3

You want to put ul in right side of col. Correct me! if i misunderstood your question.
So, you need to do the following in your style.css file,
just replace with following css code.
.global-ticket-summary ul {
list-style-type: none;
text-align: right!important;
}
.global-ticket-summary ul li {
float: left;
width: 100px;
}

Answer 4

Use flex utilities for bootstrap 4. Add following classes to the first column (which is having text-right): d-flex, justify-content-end.
...
<div class="container-fluid">
<div class="row ticket-summary-navbar">
<div class="col d-flex justify-content-end">
...
It is aligning as you want to the right.
For reference here is link to flex utility for bootstrap 4 : https://getbootstrap.com/docs/4.0/utilities/flex/