Cara Membuat Timeline Dengan Bootstrap

Hai, jumpa lagi dengan saya, pada pertemuan sebelum nya saya sudah kasih tau bagaimana cara membuat timeline dengan HTML-CSS3, Nah kali ini saya akan kasih tau lagi buat kalian bagaimanaÂ Cara Membuat Timeline Dengan Bootstrap, berikut langkah-langkahnya.

Sebelumnya kalian sudah harus punya file bootstrap nya terlebih dahulu, setelah itu Â silahkan kalian buka editor nya kemudian salin kode berikut.

<div class="container">
    <div class="page-header">
        <h1 id="timeline">Timeline</h1>
    </div>
    <ul class="timeline">
        <li>
          <div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
            </div>
            <div class="timeline-body">
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lÃ¡ , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. MÃ© faiz elementum girarzis, nisi eros vermeio, in elementis mÃ© pra quem Ã© amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
            </div>
          </div>
        </li>
        <li class="timeline-inverted">
          <div class="timeline-badge warning"><i class="glyphicon glyphicon-credit-card"></i></div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
            </div>
            <div class="timeline-body">
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lÃ¡ , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. MÃ© faiz elementum girarzis, nisi eros vermeio, in elementis mÃ© pra quem Ã© amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
              <p>Suco de cevadiss, Ã© um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mÃ©, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mÃ© vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.</p>
            </div>
          </div>
        </li>
        <li>
          <div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
            </div>
            <div class="timeline-body">
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lÃ¡ , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. MÃ© faiz elementum girarzis, nisi eros vermeio, in elementis mÃ© pra quem Ã© amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
            </div>
          </div>
        </li>
        <li class="timeline-inverted">
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
            </div>
            <div class="timeline-body">
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lÃ¡ , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. MÃ© faiz elementum girarzis, nisi eros vermeio, in elementis mÃ© pra quem Ã© amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
            </div>
          </div>
        </li>
        <li>
          <div class="timeline-badge info"><i class="glyphicon glyphicon-floppy-disk"></i></div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
            </div>
            <div class="timeline-body">
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lÃ¡ , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. MÃ© faiz elementum girarzis, nisi eros vermeio, in elementis mÃ© pra quem Ã© amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
              <hr>
              <div class="btn-group">
                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
                  <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
            </div>
            <div class="timeline-body">
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lÃ¡ , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. MÃ© faiz elementum girarzis, nisi eros vermeio, in elementis mÃ© pra quem Ã© amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
            </div>
          </div>
        </li>
        <li class="timeline-inverted">
          <div class="timeline-badge success"><i class="glyphicon glyphicon-thumbs-up"></i></div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
            </div>
            <div class="timeline-body">
              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lÃ¡ , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. MÃ© faiz elementum girarzis, nisi eros vermeio, in elementis mÃ© pra quem Ã© amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
            </div>
          </div>
        </li>
    </ul>
</div>

<h1 id="timeline">Timeline</h1>

</div>

<li>

<h4 class="timeline-title">Mussum ipsum cacilds</h4>

<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>

</div>

<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lÃ¡ , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. MÃ© faiz elementum girarzis, nisi eros vermeio, in elementis mÃ© pra quem Ã© amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>

</div>

</li>

<h4 class="timeline-title">Mussum ipsum cacilds</h4>

</div>

<p>Suco de cevadiss, Ã© um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mÃ©, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mÃ© vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.</p>

</div>

</li>

<li>

<h4 class="timeline-title">Mussum ipsum cacilds</h4>

</div>

</div>

</li>

<h4 class="timeline-title">Mussum ipsum cacilds</h4>

</div>

</div>

</li>

<li>

<h4 class="timeline-title">Mussum ipsum cacilds</h4>

</div>

<hr>

</button>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

</ul>

</div>

</li>

<li>

<h4 class="timeline-title">Mussum ipsum cacilds</h4>

</div>

</div>

</li>

<h4 class="timeline-title">Mussum ipsum cacilds</h4>

</div>

</div>

</li>

</ul>

</div>

Setelah itu, kita akan mempercantik tampilan timeline nya dengan kode CSS3 berikut.

.timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}
.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eeeeee;
  left: 50%;
  margin-left: -1.5px;
}
.timeline > li {
  margin-bottom: 20px;
  position: relative;
}
.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline > li > .timeline-panel {
  width: 46%;
  float: left;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 15px solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 15px solid transparent;
  content: " ";
}
.timeline > li > .timeline-panel:after {
  position: absolute;
  top: 27px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}
.timeline > li > .timeline-badge {
  color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 16px;
  left: 50%;
  margin-left: -25px;
  background-color: #999999;
  z-index: 100;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
  float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}
.timeline-badge.primary {
  background-color: #2e6da4 !important;
}
.timeline-badge.success {
  background-color: #3f903f !important;
}
.timeline-badge.warning {
  background-color: #f0ad4e !important;
}
.timeline-badge.danger {
  background-color: #d9534f !important;
}
.timeline-badge.info {
  background-color: #5bc0de !important;
}
.timeline-title {
  margin-top: 0;
  color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
  margin-bottom: 0;
}
.timeline-body > p + p {
  margin-top: 5px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

.timeline {

list-style: none;

padding: 20px 0 20px;

position: relative;

}

.timeline:before {

top: 0;

bottom: 0;

position: absolute;

content: " ";

width: 3px;

background-color: #eeeeee;

left: 50%;

margin-left: -1.5px;

}

.timeline > li {

margin-bottom: 20px;

position: relative;

}

.timeline > li:before,

.timeline > li:after {

content: " ";

display: table;

}

.timeline > li:after {

clear: both;

}

.timeline > li:before,

.timeline > li:after {

content: " ";

display: table;

}

.timeline > li:after {

clear: both;

}

.timeline > li > .timeline-panel {

width: 46%;

float: left;

border: 1px solid #d4d4d4;

border-radius: 2px;

padding: 20px;

position: relative;

-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

}

.timeline > li > .timeline-panel:before {

position: absolute;

top: 26px;

right: -15px;

display: inline-block;

border-top: 15px solid transparent;

border-left: 15px solid #ccc;

border-right: 0 solid #ccc;

border-bottom: 15px solid transparent;

content: " ";

}

.timeline > li > .timeline-panel:after {

position: absolute;

top: 27px;

right: -14px;

display: inline-block;

border-top: 14px solid transparent;

border-left: 14px solid #fff;

border-right: 0 solid #fff;

border-bottom: 14px solid transparent;

content: " ";

}

.timeline > li > .timeline-badge {

color: #fff;

width: 50px;

height: 50px;

line-height: 50px;

font-size: 1.4em;

text-align: center;

position: absolute;

top: 16px;

left: 50%;

margin-left: -25px;

background-color: #999999;

z-index: 100;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

.timeline > li.timeline-inverted > .timeline-panel {

float: right;

}

.timeline > li.timeline-inverted > .timeline-panel:before {

border-left-width: 0;

border-right-width: 15px;

left: -15px;

right: auto;

}

.timeline > li.timeline-inverted > .timeline-panel:after {

border-left-width: 0;

border-right-width: 14px;

left: -14px;

right: auto;

}

.timeline-badge.primary {

background-color: #2e6da4 !important;

}

.timeline-badge.success {

background-color: #3f903f !important;

}

.timeline-badge.warning {

background-color: #f0ad4e !important;

}

.timeline-badge.danger {

background-color: #d9534f !important;

}

.timeline-badge.info {

background-color: #5bc0de !important;

}

.timeline-title {

margin-top: 0;

color: inherit;

}

.timeline-body > p,

.timeline-body > ul {

margin-bottom: 0;

}

.timeline-body > p + p {

margin-top: 5px;

}

Kalo sudah semua, simpan terlebih dahulu kemudian coba jalankan dibrowser masing-masing dan lihat hasilnya. Selesai

Baik itulah tutorial bagaimanaÂ Cara Membuat Timeline Dengan Bootstrap, semoga bermanfaat, amin.

Selamat mencoba 🙂

Facebook DUMET School

Categories