bs4 beta timeline

This bootstrap snippet called "bs4 beta timeline" 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: timeline,profile

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="timeline-wrapper">
    <div class="pk-timeline">
        <div class="pk-tl-block">
            <div class="pk-tl-icon"><i class="fa fa-file-text-o"></i></div>
            <div class="pk-tl-info"><strong>11-17-2016</strong>
                <br>posted a new blog</div>
            <div class="pk-tl-content">
                <div class="pk-tl-avatar"><img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt=""></div>
                <div class="pk-tl-content-text">
                    <h5>Lorem ipsum dolor sit amet.</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam veritatis, excepturi sunt. Nobis maxime voluptate aspernatur vero quisquam provident sint mollitia debitis repellat, voluptas perspiciatis iusto, nulla fuga quia libero!</p>
                </div>
            </div>
            <!-- /.pk-tl-content -->
        </div>
        <!-- /.pk-tl-block -->
        <div class="pk-tl-block">
            <div class="pk-tl-icon"><i class="fa fa-photo"></i></div>
            <div class="pk-tl-info"><strong>11-17-2016</strong>
                <br>posted a new blog</div>
            <div class="pk-tl-content">
                <div class="pk-tl-avatar"><img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt=""></div>
                <div class="pk-tl-content-media"><img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt=""></div>
            </div>
            <!-- /.pk-tl-content -->
        </div>
        <!-- /.pk-tl-block -->
        <div class="pk-tl-block">
            <div class="pk-tl-icon"><i class="fa fa-photo"></i></div>
            <div class="pk-tl-info"><strong>11-17-2016</strong>
                <br>posted a new blog</div>
            <div class="pk-tl-content">
                <div class="pk-tl-avatar"><img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt=""></div>
                <div class="pk-tl-content-media"><img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt=""></div>
            </div>
            <!-- /.pk-tl-content -->
        </div>
        <!-- /.pk-tl-block -->
        <div class="pk-tl-block">
            <div class="pk-tl-icon"><i class="fa fa-file-text-o"></i></div>
            <div class="pk-tl-info"><strong>11-17-2016</strong>
                <br>posted a new blog</div>
            <div class="pk-tl-content">
                <div class="pk-tl-avatar"><img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt=""></div>
                <div class="pk-tl-content-text">
                    <h5>Lorem ipsum dolor sit amet.</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam veritatis, excepturi sunt. Nobis maxime voluptate aspernatur vero quisquam provident sint mollitia debitis repellat, voluptas perspiciatis iusto, nulla fuga quia libero!</p>
                </div>
            </div>
            <!-- /.pk-tl-content -->
        </div>
        <!-- /.pk-tl-block -->
    </div>
    <!-- /.pk-timeline -->
</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:#FCFCFC;    
}

.pk-timeline {
    position: relative
}

.pk-timeline:before {
    content: "";
    width: 2px;
    background-color: #eceeef;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2rem
}

@media (min-width:768px) {
    .pk-timeline:before {
        left: 50%
    }
}

.pk-tl-block {
    position: relative;
    padding: 1.5rem;
    padding-left: 2rem;
    margin-bottom: 1.5rem
}

.pk-tl-block:after {
    display: block;
    content: "";
    clear: both
}

.pk-tl-block:last-child {
    margin-bottom: 0
}

@media (min-width:768px) {
    .pk-tl-block {
        padding-left: 1.5rem;
        margin-bottom: 0
    }
}

.pk-tl-icon {
    width: 50px;
    height: 50px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-size: 1.13rem;
    font-weight: 600;
    border-radius: 500px;
    background: #60c84c;
    border: 5px solid #fff;
    box-shadow: 0 0 1px #ddd;
    position: absolute;
    top: 1.5rem;
    left: 9px
}

@media (min-width:768px) {
    .pk-tl-icon {
        top: calc(50% - 25px);
        left: calc(50% - 25px)
    }
}

.pk-tl-info {
    position: absolute;
    top: 1.5rem;
    left: 170px
}

@media (min-width:768px) {
    .pk-tl-info {
        top: calc(50% - 25px);
        left: calc(50% + 50px)
    }
    .pk-tl-block:nth-child(odd) .pk-tl-info {
        right: calc(50% + 50px);
        left: auto
    }
}

.pk-tl-content {
    position: relative;
    background: #fff;
    border-radius: .25rem;
    border: 1px solid #eceeef;
    box-shadow: 0 0 12px #eee;
    padding: .5rem;
    margin-left: 1.5rem;
    margin-top: 50px
}

@media (min-width:768px) {
    .pk-tl-content {
        width: 43%;
        margin: 0
    }
    .pk-tl-block:nth-child(odd) .pk-tl-content {
        float: right
    }
}

.pk-tl-avatar {
    width: 80px;
    height: 80px;
    padding: 5px;
    background: #fff;
    border: 1px solid #eceeef;
    border-radius: .25rem;
    position: absolute;
    top: -50px;
    left: 20px
}

.pk-tl-avatar img {
    width: 100%;
    height: 100%;
    border-radius: .25rem
}

@media (min-width:768px) {
    .pk-tl-avatar {
        top: calc(50% - 40px);
        right: -35px;
        left: auto
    }
    .pk-tl-block:nth-child(odd) .pk-tl-avatar {
        left: -35px;
        right: auto
    }
}

.pk-tl-content-text {
    background: #f7f7f9;
    min-height: 100px;
    border-radius: .25rem;
    padding: 2.5rem 1.5rem 1.5rem
}

.pk-tl-content-text p:last-child {
    margin-bottom: 0
}

@media (min-width:768px) {
    .pk-tl-content-text {
        padding: 1.5rem 3.5rem 1.5rem 1.5rem
    }
    .pk-tl-block:nth-child(odd) .pk-tl-content-text {
        padding: 1.5rem 1.5rem 1.5rem 3.5rem
    }
}

.pk-tl-content-media img {
    max-width: 100%;
    height: auto
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 4.0.0-beta

Created: Sep 28th 2017, 13:47

Views: 1.8K

Rated 5/5 based on 2 reviews