<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul class="capabilites"> <li> 24 hours, 7 days a week</li> <li> Airport Service</li> <li> Corporate Accounts Available</li> <li> Wheelchair Accessible Vehicles</li> <li> “Greener” Hybrid Vehicles Available</li> </ul>

.capabilites { color: #fff; font-size: 16px; } .capabilites ul { list-style: none; padding: 10px; margin: 0; --bullet-size:18px; } .capabilites li { font-size: 16px; margin-bottom: 2px; position: relative; padding-left: 30px; font-weight:500; } .capabilites li:before, .capabilites li:after{ content: ""; position: absolute; border-radius: 50%; } .capabilites li:before{ height: 20px; width: 20px; left: 0; top: 2px; border: 2px solid red; } .capabilites li:after{ height: 10px; width: 10px; left: 5px; top: 7px; background-color: #faa501; } .capabilites li { margin: 8px 0; float: left; width: 100%; color:red; }