Blog Post

Blog post bootstrap 4 snippet

Download Files

Download Files contains - HTML,CSS,JS,Images Files

With cover and overlapped profile picture

                                        
                                      /* ------------------------------------------------------------------- */
/* Import Section
---------------------------------------------------------------------- */
@import url("base.css");    /* Default Reset, Typography, Forms, etc. */
@import url("bootstrap.min.css");   /* Bootstrap 4.3.1 */
@import url("https://fonts.googleapis.com/css?family=Pacifico");
@import url("https://fonts.googleapis.com/css?family=Rokkitt");
@import url("https://fonts.googleapis.com/css?family=Abhaya+Libre");
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap");

/* ==========================================================================
   Header Section
   ========================================================================== */
#Intro {
    padding-top: 87px;
    position: relative;
    z-index: 1;
}
#Intro.blog_banner {
    background-color: #252442;
    background-size: cover;
    background-position: center top;
    height: 800px;
    padding: 0;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}
#Intro.post_banner {
    position: relative;
}

#Intro.blog_banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: none;
    background: linear-gradient(to bottom,#1c1231 0%,#1c1231 14%,rgba(28,18,49,.3) 100%);
}
#Intro.post_banner::after {
    display: block;
    content: "";
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    height: 200px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 1px rgba(255,255,255,0);
    transform: skewY(-4deg);
    -webkit-backface-visibility: hidden;
    outline: 1px solid transparent;
    -webkit-transform-style: preserve-3d;
}
#Intro .container {
    padding-top: 65px;
    padding-bottom: 65px;
    position: relative;
    z-index: 3;
}
#Intro.blog_banner .container {
    padding-bottom: 0;
    height: 100%;
}
#Intro.blog_banner .container .blog_featured {
    max-width: 850px;
    margin: 0 auto;
    position: relative;
    padding-top: 150px;
}
#Intro.blog_banner .container .blog_featured .blog_meta {
 font-family: Roboto Slab,serif;
    font-size: 15px;
    line-height: 19px;
    margin-bottom: 10px;
    font-weight: 600;
}
#Intro.blog_banner .container .blog_featured .blog_meta .span-reading-time{
 color: #fff;
    font-size: 15px;
    line-height: 19px;
    margin-bottom: 10px;
    font-weight: 600;
}
#Intro.blog_banner .container .blog_featured a {
    color: #ffc303;
    font-size: 16px;
    line-height: normal;
}
#Intro.blog_banner .container .blog_featured h1 {
    font-size: 39px;
    line-height: 40px;
    margin-bottom: 15px;
    max-width: none;
    font-family: Roboto Slab,serif;
    color: #fff;
    font-size-adjust: none;
}




#BlogPost {
 display: block;
    background: #fff;
    position: relative;
    z-index: 2;
}
#BlogPost .blog_author {
 position: relative;
 top: -140px;
    margin-top: -140px;
}
img {
    max-width: 100%;
}
#BlogPost .blog_author img {
    border-radius: 50%;
    margin-bottom: 15px;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #4e496a;
}
#BlogPost .blog_author h3{
 font-family: Roboto Slab,serif;
    font-size: 20px;
    line-height: 40px;
    font-weight: 600;
}
#BlogPost .blog_author h3 a {
 font-family: Roboto Slab,serif;
    font-size: 20px;
    line-height: 25px;
    font-weight: 600;
}
a:not(.btn) {
    transition: all .2s linear;
    color: #0fb4bb;
}
#BlogPost .blog_author h3 small {
    display: block;
    font-size: 14px;
    line-height: 17px;
    color: #4e496a;
}

.content {
    max-width: 700px;
    margin: 0 auto 150px auto;
    margin-top: -110px;
}
#BlogPost .lead {
 font-family: Roboto Slab,serif;
    font-weight: 400;
}
.content p {
 font-family: Roboto Slab,serif;
    font-size: 17px;
    line-height: 25px;
    margin-bottom: 35px;
}      
                                        
                                    

                                        
                                      Js      
                                        
                                    

More Bootstrap UI Components

Simple Feature Block

145 0 features,BS4

No-Nonsense Pricing

156 0 pricing,BS4

Elegeant Pricing Plan Widget

176 0 pricing,BS4

Clean Bootstrap 5 Navigation

181 0 navigation.BS5

Business Hero

162 1 hero

Multi-purpose Contents section

157 0 contents,BS4

Bootstrap Contact Us Section

175 0 contact us,BS4

Simple Footer Block

168 0 footer,BS4

Tired of Opening One Strap After Another?

Go to Pricing and start using AJAX Filter Options, no need to open multiple pages.

Get Started