Bootdey post lists

Bootstrap snippet. Bootdey post lists, this snippet 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: post,list,user

HTML code

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bootstrap snippet">
    <div class="row">
        <div class="post-list">
            <div class="row">
                <div class="col-sm-2">
                    <div class="picture">
                        <img alt="Opt wizard thumbnail" src="https://bootdey.com/img/Content/user_1.jpg">
                    </div>
                </div>
                <div class="col-sm-6">
                    <h4>
                        <a hre="#" class="username">Deyson Bejarano</a>
                        <label class="label label-info">#BootdeyFromDeyDey</label>
                    </h4>
                    <h5> 
                    <i class="fa fa-calendar"></i>
                    Aug 06, 12:48 
                    </h5>
                    <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit lectus, efficitur eu eros vel, luctus aliquet est. Sed sit amet ligula non mauris porta dignissim..</p>    
                </div>
                <div class="col-sm-4" data-no-turbolink="">
                    <a class="btn btn-info btn-download btn-round pull-right makeLoading" href="#">
                    <i class="fa fa-share"></i> View
                    </a>            
                </div>
            </div>
        </div>
        <div class="post-list">
            <div class="row">
                <div class="col-sm-2">
                    <div class="picture">
                        <img alt="Opt wizard thumbnail" src="https://bootdey.com/img/Content/user_2.jpg">
                    </div>
                </div>
                <div class="col-sm-6">
                    <h4>
                        <a hre="#" class="username">Starla muscle</a>
                        <label class="label label-info">#responsive</label>
                    </h4>
                    <h5> 
                    <i class="fa fa-calendar"></i>
                    Aug 06, 12:48 
                    </h5>
                    <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit lectus, efficitur eu eros vel, luctus aliquet est. Sed sit amet ligula non mauris porta dignissim....</p>    
                </div>
                <div class="col-sm-4" data-no-turbolink="">
                    <a class="btn btn-info btn-download btn-round pull-right makeLoading" href="#">
                    <i class="fa fa-share"></i> View
                    </a>            
                </div>
            </div>
        </div>
        <div class="post-list">
            <div class="row">
                <div class="col-sm-2">
                    <div class="picture">
                        <img alt="Opt wizard thumbnail" src="https://bootdey.com/img/Content/user_3.jpg">
                    </div>
                </div>
                <div class="col-sm-6">
                    <h4>    
                        <a hre="#" class="username">Barbao"s slim</a>
                        <label class="label label-info">#BootdeyRules</label>
                    </h4>
                    <h5> 
                    <i class="fa fa-calendar"></i>
                    Aug 06, 12:48 
                    </h5>
                    <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit lectus, efficitur eu eros vel, luctus aliquet est. Sed sit amet ligula non mauris porta dignissim....</p>    
                </div>
                <div class="col-sm-4" data-no-turbolink="">
                    <a class="btn btn-info btn-download btn-round pull-right makeLoading" href="#">
                    <i class="fa fa-share"></i> View
                    </a>            
                </div>
            </div>
        </div>
    </div>
</div>

CSS code

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

body{margin-top:20px;}

.post-list {
  position: relative;
  padding: 5px 0;
}

.post-list .picture {
  max-width: 400px;
  overflow: hidden;
  height: auto;
  border-radius: 6px;
}

.post-list .label{
    font-weight:normal;    
}

.post-list .picture {
  max-width: 210px;
}

.post-list .picture img {
  width: 100%;
}

.post-list h4 {
  font-size: 20px;
}

.post-list h5 {
  color: #888;
}

.post-list p {
  float: left;
}

.post-list:after {
  height: 1px;
  background: #EEEEEE;
  width: 83.3333%;
  bottom: 0;
  right: 0;
  content: "";
  display: block;
  position: absolute;
}

.post-list .btn-download {
  margin-top: 45px;
}

.btn-info {
  color: #1084FF;
  border-color: #269abc;
}

.btn-round {
  border-width: 1px;
  border-radius: 30px !important;
  opacity: 0.79;
  padding: 9px 18px;
}
.btn {
  border-width: 2px;
  background-color: rgba(0,0,0,0);
  font-weight: 400;
  opacity: 0.8;
  padding: 7px 16px;
}
                                    

Similar snippets

Bootstrap snippet bs4 social profile

bs4 social profile

View

Bootstrap snippet bs4 Trending Articles

bs4 Trending Articles

View

Bootstrap snippet bs4 project list with progress

bs4 project list with progress

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jul 4th 2015, 11:39

Views: 3.4K

Rated 5/5 based on 3 reviews