Bootstrap snippet: News Widget

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: news blog,widget



<div class="container"> <div class="row"> <div class="col-md-6 news-item"> <img src="http://lorempixel.com/400/400/nature/5/" alt="news"> <div class="decor-info descr"> <h5 class="m-b-md"><a href="#">Name of the article in one row</a></h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni dolore alias doloremque, impedit enim tenetur, esse mollitia repellendus nemo, rem recusandae quisquam quam.</p> <a class="readmore" href="#">Read more</a> </div> </div> <div class="col-md-6 news-item"> <img src="http://lorempixel.com/400/400/nature/1/" alt="news"> <div class="decor-danger descr"> <h5 class="m-b-md"><a href="#">Name of the article in one row</a></h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni dolore alias doloremque, impedit enim tenetur, esse mollitia repellendus nemo, rem recusandae quisquam quam.</p> <a class="readmore" href="#">Read more</a> </div> </div> </div> <div class="row"> <div class="col-md-6 news-item"> <img src="http://lorempixel.com/400/400/nature/2/" alt="news"> <div class="decor-primary descr"> <h5 class="m-b-md"><a href="#">Name of the article in one row</a></h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni dolore alias doloremque, impedit enim tenetur, esse mollitia repellendus nemo, rem recusandae quisquam quam.</p> <a class="readmore" href="#">Read more</a> </div> </div> <div class="col-md-6 news-item"> <img src="http://lorempixel.com/400/400/nature/3/" alt="news"> <div class="decor-info descr"> <h5 class="m-b-md"><a href="#">Name of the article in one row</a></h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni dolore alias doloremque, impedit enim tenetur, esse mollitia repellendus nemo, rem recusandae quisquam quam.</p> <a class="readmore" href="#">Read more</a> </div> </div> </div> </div>
body{margin-top:20px;} .news-item img { width: 100%; max-height: 250px; height: 250px; overflow: hidden; object-fit: cover; } .news-item .descr { padding: 30px; color: #fff; text-align: center; height: 250px; } .decor-success { background-color: #46be8a !important; } .decor-info { background-color: #39bee8 !important; } .decor-primary { background-color: #7266ba !important; } .decor-warning { background-color: #f2a654 !important; } .decor-danger { background-color: #ff69b4 !important; } .decor-primary-hue { background-color: #585b9c !important; } .news-item .descr h5 a { color: #fff; text-decoration: none; } .m-b-md, .news-item { margin-bottom: 30px !important; } .news-item .descr a.readmore:hover { text-decoration: none; } .news-item .descr a.readmore { display: inline-block; border: 1px solid #fff; border-radius: 30px; color: #fff; font-size: 24px; padding: 8px 22px; }
Dey-Dey

News Widget

Dey-Dey
  Apr 17th, 21:55
56 Views