1

I have a layout using bootstrap. On a mobile device, I would like each of my rows to be positioned as points on my timeline so that I have an end result like this:

TimeLine

For my desktop layout I use two tags as shown below and just position text around those line. However, for the mobile layout, it would be great if the row with the text in it also contained the point on the timeline, so those were always lined up correctly, no matter how many lines the text wraps onto.

<div class="middle-line-top"></div>
<div class="middle-line"></div>

css:

.middle-line {
    position: fixed;
    height: 79vh;
    bottom: 0;
    width: 1px;
    left: 50%;
    background-color: white;
    z-index: -1;
}
.middle-line:before {
    border: 5px solid white;
    width: 18px;
    height: 18px;
    display: block;
    content: '';
    bottom: 100%;
    -webkit-transform: translateX(-51%);
    transform: translateX(-51%);
    position: absolute;
    box-sizing: border-box;
    border-radius: 50%;
    z-index: -1;
}
.middle-line-top {
    position: fixed;
    height: 3vh;
    top: 0vh;
    width: 1px;
    left: 50%;
    background-color: white;
}
.middle-line-top:after {
    border: 5px solid white;
    width: 18px;
    height: 18px;
    display: block;
    content: '';
    -webkit-transform: translateX(-51%);
    transform: translateX(-51%);
    position: absolute;
    bottom: -18px;
    box-sizing: border-box;
    border-radius: 50%;
}
George Edwards
  • 8,979
  • 20
  • 78
  • 161

1 Answers1

3

Please try to this code

.timeline {
    position: relative;
    padding: 21px 0px 10px;
    margin-top: 4px;
    margin-bottom: 30px;
}

.timeline .line {
    position: absolute;
    width: 4px;
    display: block;
    background: currentColor;
    top: 0px;
    bottom: 0px;
    margin-left: 30px;
}

.timeline .separator {
    border-top: 1px solid currentColor;
    padding: 5px;
    padding-left: 40px;
    font-style: italic;
    font-size: .9em;
    margin-left: 30px;
}

.timeline .line::before { top: -4px; }
.timeline .line::after { bottom: -4px; }
.timeline .line::before,
.timeline .line::after {
    content: '';
    position: absolute;
    left: -4px;
    width: 12px;
    height: 12px;
    display: block;
    border-radius: 50%;
    background: currentColor;
}

.timeline .panel {
    position: relative;
    margin: 10px 0px 21px 70px;
    clear: both;
}

.timeline .panel::before {
    position: absolute;
    display: block;
    top: 8px;
    left: -24px;
    content: '';
    width: 0px;
    height: 0px;
    border: inherit;
    border-width: 12px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.timeline .panel .panel-heading.icon * { font-size: 20px; vertical-align: middle; line-height: 40px; }
.timeline .panel .panel-heading.icon {
    position: absolute;
    left: -59px;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0px;
    border-radius: 50%;
    text-align: center;
    float: left;
}

.timeline .panel-outline {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.timeline .panel-outline .panel-body {
    padding: 10px 0px;
}

.timeline .panel-outline .panel-heading:not(.icon),
.timeline .panel-outline .panel-footer {
    display: none;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div class="container">

    <!-- Page header -->
    
    <div class="timeline">
    
        <!-- Line component -->
        <div class="line text-muted"></div>

        <!-- Separator -->
        <div class="separator text-muted">
            <time>26. 3. 2015</time>
        </div>
        <!-- /Separator -->
    
        <!-- Panel -->
        <article class="panel panel-danger panel-outline">
    
            <!-- Icon -->
            <div class="panel-heading icon">
                <i class="glyphicon glyphicon-heart"></i>
            </div>
            <!-- /Icon -->
    
            <!-- Body -->
            <div class="panel-body">
                <strong>Someone</strong> favourited your photo.
            </div>
            <!-- /Body -->
    
        </article>
        <!-- /Panel -->
    
        <!-- Panel -->
        <article class="panel panel-default panel-outline">
    
            <!-- Icon -->
            <div class="panel-heading icon">
                <i class="glyphicon glyphicon-picture"></i>
            </div>
            <!-- /Icon -->
    
            <!-- Body -->
            <div class="panel-body">
                <img class="img-responsive img-rounded" src="//placehold.it/350x150" />
            </div>
            <!-- /Body -->
    
        </article>
        <!-- /Panel -->
    
        <!-- Panel -->
        <article class="panel panel-primary">
    
            <!-- Icon -->
            <div class="panel-heading icon">
                <i class="glyphicon glyphicon-plus"></i>
            </div>
            <!-- /Icon -->
    
            <!-- Heading -->
            <div class="panel-heading">
                <h2 class="panel-title">New content added</h2>
            </div>
            <!-- /Heading -->
    
            <!-- Body -->
            <div class="panel-body">
                Some new content has been added.
            </div>
            <!-- /Body -->
    
            <!-- Footer -->
            <div class="panel-footer">
                <small>Footer is also supported!</small>
            </div>
            <!-- /Footer -->
    
        </article>
        <!-- /Panel -->

        <!-- Separator -->
        <div class="separator text-muted">
            <time>25. 3. 2015</time>
        </div>
        <!-- /Separator -->
    
        <!-- Panel -->
        <article class="panel panel-success">
    
            <!-- Icon -->
            <div class="panel-heading icon">
                <i class="glyphicon glyphicon-plus"></i>
            </div>
            <!-- /Icon -->
    
            <!-- Heading -->
            <div class="panel-heading">
                <h2 class="panel-title">New content added</h2>
            </div>
            <!-- /Heading -->
    
            <!-- Body -->
            <div class="panel-body">
                Anything you can write!
            </div>
            <!-- /Body -->
    
            <!-- List group -->
            <ul class="list-group">
                <li class="list-group-item">Like</li>
                <li class="list-group-item">list</li>
                <li class="list-group-item">groups</li>
                <li class="list-group-item">and</li>
                <li class="list-group-item">tables</li>
            </ul>
    
        </article>
        <!-- /Panel -->
    
        <!-- Panel -->
        <article class="panel panel-info panel-outline">
    
            <!-- Icon -->
            <div class="panel-heading icon">
                <i class="glyphicon glyphicon-info-sign"></i>
            </div>
            <!-- /Icon -->
    
            <!-- Body -->
            <div class="panel-body">
                That is all.
            </div>
            <!-- /Body -->
    
        </article>
        <!-- /Panel -->
    
    </div>
    <!-- /Timeline -->

</div>
</div>
Kapil
  • 1,143
  • 13
  • 25