<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="list-inline-mb-0"> <li class="list-inline-item">Item 1</li> <li class="list-inline-item">Item 2</li> <li class="list-inline-item">Item 1</li> <li class="list-inline-item">Item 2</li> <li class="list-inline-item">Item 1</li> </ul> <ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> <li>Fifth</li> </ul>

ul { display: flex; list-style: none; } li:not(:first-child):before { content: "|"; padding: 5px; } li:nth-child(2){ color:red; } li:nth-child(3){ color:red; }