<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 ----------> <div class="container"> <div class="row"> <h2>list Inline Table view</h2> <div class="table"> <ul> <li class="titile">country</li> <li class="odd">India</li> <li class="even">US</li> <li class="odd">England</li> <li class="even">Japan</li> </ul> <ul> <li class="titile">city</li> <li class="odd">Mumbai</li> <li class="evev">Washington</li> <li class="odd">London</li> <li class="even">Tokyo</li> </ul> <ul> <li class="titile">city</li> <li class="odd">Mumbai</li> <li class="evev">Washington</li> <li class="odd">London</li> <li class="even">Tokyo</li> </ul> </div> </div> </div>

.table{background:None;} .table ul{float:left;margin:0px;padding:0px;} .table ul li{list-style:none;padding:4px 9px;} .table ul li.title{font-weight:bold;background:#333;color:#fff;}