Membuat Timeline Sederhana dengan Bootstrap Bagian 2

Framework responsive bootstrap adalah sebuah framework yang bisa dikatakan menjadi superior diantara framework responsive lain. Banyaknya komunitas dan developer yang menggunakan bootstrap sebagai base template mereka membuat bootstrap menjadi framework yang wajib dikuasai oleh para pengembang website.

Pada artikel ini kita akan melanjutkan apa yang kita bahas pada artikel sebelumnya yang berjudul membuat timeline sederhana dengan bootstrap bagian 1 dimana pada artikel tersebut kita sudah membahas tentang layout dasar dan struktur html dengan menggunakan elemen panel yang sudah tersedia di bootstrap. Selanjutnya yang akan kita bahas pada artikel ini adalah memberikan penataan CSS agar membentuk layout seperti timeline.

Untuk melanjutkan artikel sebelumnya kita akan mulai dengan membuat garis timeline dengan css berikut

.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;
}

Lalu kita akan memberikan bentuk panah ke samping dengan css berikut

.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;
}

Ini untuk membuat icon menjadi lingkaran path pada timeline

.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;

}

Selanjutnya ini adalah untuk menghilangkan garis yang ada pada panel bootstrap

.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;
}

Jika semuanya sudah ditambahkan, maka kita akan mendapatkan tampilan seperti berikut

Baiklah teman-teman,  artikel tentang cara membuat layout timeline sederhana dengan bootstrap bagian 2 sudah selesai dengan hasil seperti diatas. Banyaknya kustomisasi dengan bootstrap membuat bootstrap terlihat semakin powerful. Demikian artikel kali ini, semoga bermanfaat