Bootstrap Snippet bootstrap 4.0 milestones timeline using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="col-md-12">
                <h2 class="hd-hero-section__title text-center" style="text-transform: capitalize;"><span>Our Milestones</span></h2>
                <br>
                <div class="main-timeline" style="padding-top: 0px">
                    <div class="timeline" data-heading="2019">
                        <a href="javascript:void(0);" class="timeline-content">
                            <!-- <span class="icon"></span> -->
                            <img src="images/timeline/logo.png" alt="" class="icon img-fluid">
                            <div class="inner-content">
                                <h3 class="title">ICICI</h3>
                                <h5 class="sub-title">Appathon Winner</h5>
                                <p class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada tellus lorem, et condimentum neque commodo quis.
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="timeline dup" data-heading="2019">
                        <a href="javascript:void(0);" class="timeline-content">
                            <!-- <span class="icon"></span> -->
                            <img src="images/timeline/logo.png" alt="" class="icon img-fluid">
                            <div class="inner-content">
                                <h3 class="title">ICICI</h3>
                                <h5 class="sub-title">Appathon Winner</h5>
                                <p class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada tellus lorem, et condimentum neque commodo quis.
                                </p>
                            </div>
                        </a>
                    </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* timeline */
    .main-timeline{
        overflow: hidden;
        position: relative;
    }
    .main-timeline:before{
        content: "";
        width: 3px;
        height: 100%;
        background-color: lightgray;
        /*background: url("images/timeline/line.png"), url("images/timeline/large-arrow.png") no-repeat top center;
        background-size: 3px auto, cover;*/
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .main-timeline .timeline{
        width: 50%;
        float: right;
        padding: 50px 50px 10px 50px;
        /*margin-top: 50px;*/
        /*margin-top: -40px;*/
        position: relative;
    }
    .main-timeline .dup {
        padding: 0px 50px 10px 50px;
        /*margin-top: -60px;*/
    }
    .main-timeline .timeline:before{
        content: attr(data-heading);
        border: 1px solid lightgray;
        width: 70px;
        height: 35px;
        line-height: 32px;
        border-radius: 20px;
        background: #e5f9f8;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"bootstrap 4.0 milestones timeline"
Bootstrap 4.0.0 Snippet by srika

Related: See More

Questions / Comments:

"bootstrap 4.0 milestones timeline" Bootstrap 4.0.0 Snippet by srika

Related: See More

Questions / Comments:

"bootstrap 4.0 milestones timeline"
Bootstrap 4.0.0 Snippet by srika