<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"> <div class="col-md-12"> <h3>List Type Sitemap with Gradient Background Color - </h3> </div> <div class="col-md-12"> <div class="lisitemap-section"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Our Story</a></li> <li><a href="#">About Us</a></li> <li><a href="#">How It Works?</a></li> <li><a href="#">Our Principles</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> <div class="col-md-12"> <p>Choose color from your requirement.</p> </div> </div> </div>

.lisitemap-section ul>li { padding: 8px; font-size: 18px; background: #f12711; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #f5af19, #f12711); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #f5af19, #f12711); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ list-style: none; margin: 1px; } .lisitemap-section li>a { color: #fff; } .lisitemap-section li>a:hover { color: #29ad3a; }