LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
CSS
body {
  padding-top: 50px;
}

.navbar {
  margin-bottom: 0;
}
.navbar .btn {
  margin-left: 15px;
  margin-right: 15px;
}

.timeline {
  position: relative;
  padding: 30px 0;
}
.timeline:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  height: 100%;
  width: 4px;
  margin-left: -3px;
  background: #aaa;
  content: '';
}

.row > div:after {
  display: block;
  position: absolute;
  height: 14px;
  width: 14px;
  background: #444;
  border: 2px solid #fff;
  content: '';
  top: 19px;
  left: 4px;
  border-radius: 50%;
  z-index: 10;
}

.row > div .panel {
  margin-left: 15px;
  margin-right: 0;
  border-radius: 2px;
}
.row > div .panel .panel-footer {
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: right;
}
.row > div .panel .panel-footer .btn {
  font-size: 16px;
  line-height: 1;
  padding: 2px 3px;
  color: #999;
}

@media screen and (min-width: 768px) {
  .navbar-brand {
    display: inline-block;
    padding: 0;
    margin: 0;
    position: absolute;
    height: 60px;
    width: 60px;
    left: 50%;
    top: 10px;
    margin-left: -30px !important;
    text-align: center;
    text-indent: 2px;
    font-size: 36px;
    line-height: 60px;
    border-radius: 50%;
    background: #555;
    color: #bbb !important;
  }
  .navbar-brand span {
    top: 7px;
    line-height: 1;
  }

  .timeline {
    position: relative;
    padding: 40px 0;
  }
  .timeline:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    height: 100%;
    width: 6px;
    margin-left: -3px;
    background: #999;
    content: '';
  }

  .row > div .panel {
    margin-left: 0;
    margin-right: 15px;
  }

  .row > div:after {
    height: 24px;
    width: 24px;
    border: 4px solid #fff;
    top: 14px;
    right: -12px;
    left: auto;
  }

  .row:nth-child(odd) > div {
    margin-left: 50%;
  }
  .row:nth-child(odd) > div:after {
    height: 24px;
    width: 24px;
    border: 4px solid #fff;
    top: 14px;
    right: auto;
    left: -12px;
  }
  .row:nth-child(odd) > div .panel {
    margin-left: 15px;
  }
}
.panel > .arrow, .panel > .arrow::after {
  border-color: transparent;
  border-style: solid;
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.panel > .arrow {
  border-width: 11px;
}

.panel > .arrow::after {
  border-width: 10px;
  content: "";
}

.panel > .arrow {
  border-left-width: 0;
  border-right-color: rgba(0, 0, 0, 0.25);
  left: 20px;
  margin-top: 15px;
  top: 0;
}

.panel > .arrow::after {
  border-left-width: 0;
  border-right-color: #fff;
  bottom: -10px;
  content: " ";
  left: 1px;
}

@media screen and (min-width: 768px) {
  .panel > .arrow {
    border-left-width: 0;
    border-right-color: rgba(0, 0, 0, 0.25);
    left: 20px;
    margin-top: 15px;
    top: 0;
  }

  .panel > .arrow::after {
    border-left-width: 0;
    border-right-color: #fff;
    bottom: -10px;
    content: " ";
    left: 1px;
  }

  .row:nth-child(even) {
    /*.panel > .arrow {
      border-right-width: 0;
      border-left-color: rgba(0, 0, 0, 0.25);
      left: 20px;
      margin-top: 15px;
      top: 0;
    }
    .panel > .arrow::after {
      border-right-width: 0;
      border-left-color: #fff;
      bottom: -10px;
      content: " ";
      left: 1px;
    }*/
  }
  .row:nth-child(even) .panel > .arrow {
    border-left-width: 0;
    border-right-color: rgba(0, 0, 0, 0.25);
    right: 20px;
    left: auto;
    margin-top: 15px;
    top: 0;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
JS
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Description

A responsive vertical timeline built using Bootstrap 3.3.6
Term
Wed, 12/27/2017 - 07:00

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv