<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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"> <h2>Categories</h2> <div class="row"> <div class="col-md-6"> <div class="category-list-card"> <div class="category-image"> <img src="http://crushlobby.com/bootsnipp_img/vege.png"> </div> <div class="category-name"> <h3>Fruits & Vegetables</h3> <p>Fruit & Vegetable Baskets, Fruits, Vegetables, Cut Fresh & Herbs, Mangoes</p> </div> <div class="right-arrow-div"> <i class="fa fa-angle-right"></i> </div> </div> </div> <div class="col-md-6"> <div class="category-list-card"> <div class="category-image"> <img src="http://crushlobby.com/bootsnipp_img/grocery.png"> </div> <div class="category-name"> <h3>Grocery & Staples</h3> <p>Pulses, Atta & Other Flours, Rice & Other Grains, Dry Fruits & Nuts, Edible Oils, Ghee & Vanaspati, Spices, Salt & Sugar, Organic Staples</p> </div> <div class="right-arrow-div"> <i class="fa fa-angle-right"></i> </div> </div> </div> </div> </div>

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css); @import url('https://fonts.googleapis.com/css?family=PT+Sans'); body{ font-family: 'PT Sans', sans-serif; color:#666; } p{font-size:13px;} .category-list-card{ background-color: #fff; border-radius: 3px; border: 1px solid #eee; cursor: pointer; display: block; margin: 5px 15px; padding: 8px 0; } .category-image{ display: inline-block; text-align: center; height: 160px; vertical-align: top; width: 208px; margin-right:15px; } .category-name{ display: inline-block; margin-left: 10px; font-size: 18px; margin-top: 42px; width: 49%; } .right-arrow-div{ float:right; margin-right:10px; margin-top:70px; font-size:20px; } .categor-name h3{ color: #333; margin-bottom: 10px; }