bs4 simple social network post

This bootstrap snippet called "bs4 simple social network post" 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: social-network,posts

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 posts-content">
    <div class="row">
        <div class="col-lg-6">
            <div class="card mb-4">
              <div class="card-body">
                <div class="media mb-3">
                  <img src="http://bootdey.com/img/Content/avatar/avatar3.png" class="d-block ui-w-40 rounded-circle" alt="">
                  <div class="media-body ml-3">
                    Kenneth Frazier
                    <div class="text-muted small">3 days ago</div>
                  </div>
                </div>
            
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus commodo bibendum. Vivamus laoreet blandit odio, vel finibus quam dictum ut.
                </p>
                <a href="javascript:void(0)" class="ui-rect ui-bg-cover" style="background-image: url('http://bootdey.com/img/Content/avatar/avatar3.png');"></a>
              </div>
              <div class="card-footer">
                <a href="javascript:void(0)" class="d-inline-block text-muted">
                  <small class="align-middle">
                    <strong>123</strong> Likes</small>
                </a>
                <a href="javascript:void(0)" class="d-inline-block text-muted ml-3">
                  <small class="align-middle">
                    <strong>12</strong> Comments</small>
                </a>
                <a href="javascript:void(0)" class="d-inline-block text-muted ml-3">
                  <i class="ion ion-md-share align-middle"></i>&nbsp;
                  <small class="align-middle">Repost</small>
                </a>
              </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-4">
              <div class="card-body">
                <div class="media mb-3">
                  <img src="http://bootdey.com/img/Content/avatar/avatar1.png" class="d-block ui-w-40 rounded-circle" alt="">
                  <div class="media-body ml-3">
                    Kenneth Frazier
                    <div class="text-muted small">3 days ago</div>
                  </div>
                </div>
            
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus commodo bibendum. Vivamus laoreet blandit odio, vel finibus quam dictum ut.
                </p>
                <a href="javascript:void(0)" class="ui-rect ui-bg-cover" style="background-image: url('http://bootdey.com/img/Content/avatar/avatar1.png');"></a>
              </div>
              <div class="card-footer">
                <a href="javascript:void(0)" class="d-inline-block text-muted">
                  <small class="align-middle">
                    <strong>123</strong> Likes</small>
                </a>
                <a href="javascript:void(0)" class="d-inline-block text-muted ml-3">
                  <small class="align-middle">
                    <strong>12</strong> Comments</small>
                </a>
                <a href="javascript:void(0)" class="d-inline-block text-muted ml-3">
                  <i class="ion ion-md-share align-middle"></i>&nbsp;
                  <small class="align-middle">Repost</small>
                </a>
              </div>
            </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 {
    background:#eee;
}
.posts-content{
    margin-top:20px;    
}
.ui-w-40 {
    width: 40px !important;
    height: auto;
}
.default-style .ui-bordered {
    border: 1px solid rgba(24,28,33,0.06);
}
.ui-bg-cover {
    background-color: transparent;
    background-position: center center;
    background-size: cover;
}
.ui-rect {
    padding-top: 50% !important;
}
.ui-rect, .ui-rect-30, .ui-rect-60, .ui-rect-67, .ui-rect-75 {
    position: relative !important;
    display: block !important;
    padding-top: 100% !important;
    width: 100% !important;
}
.d-flex, .d-inline-flex, .media, .media>:not(.media-body), .jumbotron, .card {
    -ms-flex-negative: 1;
    flex-shrink: 1;
}
.bg-dark {
    background-color: rgba(24,28,33,0.9) !important;
}
.card-footer, .card hr {
    border-color: rgba(24,28,33,0.06);
}
.ui-rect-content {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}
.default-style .ui-bordered {
    border: 1px solid rgba(24,28,33,0.06);
}

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 4.1.1

Created: Thursday September 13, 21:23

Views: 1