News Widget

This bootstrap snippet called "News Widget" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: news blog,widget

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<div class="container">
<div class="row">
    <div class="col-md-6 news-item">
        <img src="https://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="https://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="https://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="https://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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


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;
}

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Mar 24th 2016, 00:07

Views: 174