How to Properly Style List Item with Icon and Title - html

Question

I have a li (list item) which contains four elements. 2 of the elements I would like to align to left and the other 2 to the right. The li is part of a page using the Bootstrap framework and FontAwesome project: http://pctechtips.org/apps/todo/
Here's the li
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-plus-square-o" aria-hidden="true"></i> Pay Car Insurance
<i class="fa fa-pencil" aria-hidden="true"></i>
<i class="fa fa-trash-o" aria-hidden="true"></i>
</li>

Answer 1

The only thing you need to do in your case (to make it work with native Bootstrap 4 classes only and without any css hacking) is to add the ml-auto (margin-left:auto) class to the third element i.e. the pencil icon.
Then you just add a bit of padding to the plus and the pencil icon by adding the pr-3 (padding-right) class to both. That's it!
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="add-item text-center col-sm-12 col-md-10 col-lg-8 mb-4">
<h1 class="heading-4">Todo List Items</h1>
<ul id="list" class="list-group mt-4 pb-4">
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-plus-square-o pr-3" aria-hidden="true"></i>Pay Car Insurance
<i class="fa fa-pencil ml-auto pr-3" aria-hidden="true"></i>
<i class="fa fa-trash-o" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</div>
And if you want to turn those icons into links, you'll need to add the ml-auto class to the anchor like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="add-item text-center col-sm-12 col-md-10 col-lg-8 mb-4">
<h1 class="heading-4">Todo List Items</h1>
<ul id="list" class="list-group mt-4 pb-4">
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-plus-square-o pr-3" aria-hidden="true"></i>Pay Car Insurance
<i class="fa fa-pencil" aria-hidden="true"></i>
<i class="fa fa-trash-o" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</div>

Answer 2

<li class="list-group-item justify-content-between align-items-center">
<i class="fa fa-plus-square-o left" aria-hidden="true"></i>
<span class="left marg_left">Pay Car Insurance </span>
<i class="fa fa-pencil right marg_left" aria-hidden="true"></i>
<i class="fa fa-trash-o right " aria-hidden="true"></i>
</li>
in css ::
.marg_left {
line-height: 16px;
margin-left: 12px;
}
.left {
float: left;
}
.right {
float: left;
}
.marg_right{
margin-right:12px;
}

Answer 3

you can try add class="pull-right" or class="pull-left"