<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>BLOG</h2> <div class="blogs_sec LatestBlog"> <ul> <li> <div class="icon_box float-left"> <div class="top">21</div> <div class="bott">Jun</div> </div> <div class="right_text"><a href="http://www.karosearch.com/">Top 40 Startup Ideas For Your Small Business</a></div> </li> <li> <div class="icon_box float-left"> <div class="top">21</div> <div class="bott">Jun</div> </div> <div class="right_text"><a href="http://www.dkstudio.in/">Top 40 Startup Ideas For Your Small Business</a></div> </li> </ul> </div> </div>

body a { transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all; } ol, ul, ul.QLinks { list-style: none; } .blogs_sec ul > li { padding-bottom: 20px; width: 100%; display: inline-block; margin-top: 10px; } .blogs_sec .icon_box { width: 63px; margin-right: 15px; } .blogs_sec .icon_box .top { background: #d5d5d7; color: #1d1d29; padding: 2px 20px; border-top-left-radius: 2px; border-top-right-radius: 2px; font-size: 17px; font-weight: 500; text-align: center; } .blogs_sec .icon_box .bott { background: #e52e2f; color: #fff; padding: 1px 16px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; font-size: 15px; text-align: center; } .blogs_sec .right_text { width: calc(100% - 63px); } .blogs_sec .right_text a { color: #c8c8c8; line-height: 22px; font-size: 13px; padding: 3px 0 0; display: block; }