content logo

Bootstrap Timeline:

Simple Dark Vertical Timeline with Bootstrap

You can use this code to express the history of a process. Also, this timeline can be used for the development vision document. This timeline has a dark theme, so it is suitable for websites with a dark theme. The entire timeline is separated from the main screen by left and right tabs.

#

Bootstrap Timeline Code

#

Bootstrap Dark Timeline

#

Pure CSS Timeline Code

#

HTML Simple Timeline Example

<!-- This script got from frontendfreecode.com -->
<div class="container" id="timeline">
    <div id="timeline-header">
        <h1>TIMELINE</h1>
    </div>
    <div class="col-xs-6" id="start-left">
    </div>
    <div class="col-xs-6" id="start-right">
    </div>
    <div class="col-xs-6 time-left">
        <div class="date">
            <h1>2016</h1>
        </div>
        <div class="date-details">
            <h3>Job Title</h3>
            <p>February 2015 - Present</p>
        </div>
        <div class="inner-left">
        </div>
    </div>
    <div class="col-xs-6 time-right">
    </div>
    <div class="col-xs-6 time-left">
    </div>
    <div class="col-xs-6 time-right">
        <div class="date">
            <h2>2014</h2>
        </div>
        <div class="date-details">
            <h3>Job Title</h3>
            <p>January 2014 - February 2015</p>
        </div>
        <div class="inner-right">
        </div>
    </div>
    <div class="col-xs-6 time-left">
        <div class="date">
            <h2>2013</h2>
        </div>
        <div class="date-details">
            <h3>Job Title</h3>
            <p>March 2013 - January 2016</p>
        </div>
        <div class="inner-left">
        </div>
    </div>
    <div class="col-xs-6 time-right">
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
h1, h2, h3, h4 {
  font-family: 'Amiko', sans-serif !important;
}
p {
  font-family: 'Work Sans', sans-serif !important;
}
#timeline {
  position: relative;
  height: 100%;
  padding: 0 0 40px;
  background-color: #272727;
  
}
#timeline-header{
  position: relative;
  text-align: center;
  border-width: 4px;
  border-color: #fff;
  color: #fff;
  text-align: center;
  padding-top: 40px;
}
#start-left {
  position: relative;
  left: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  border-radius: 0 60px 0 0;
  height: 80px;
  background-color: #272727;
}
#start-right {
  position: relative;
  right: 0;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-radius: 60px 0 0 0;
  height: 80px;
  background-color: #272727;
}
.time-left {
  border-right: 2px solid #fff;
  height: 200px;
  color: #fff;
  padding: 0 15px 0 0;
  text-align: right;
}
.time-left .date {
  width: 100%;
  padding-right: 15px;
}
.inner-left {
  width: 20px;
  height: 95%;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  border-top: 4px solid #fff;
  border-color: #fff;
}
.time-right {
  border-left: 2px solid #fff;
  height: 200px;
  color: #fff;
  padding: 0 0 0 15px;
  text-align: left;
}
.inner-right {
  width: 20px;
  height: 95%;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  border-top: 4px solid #fff;
  border-color: #fff;
}
.time-right .date {
  width: 100%;
  padding-left: 15px;
}
@media only screen and (max-width: 750px) {
  .date-details h3 {
    font-size: 1.35rem;
  }
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<link href="https://fonts.googleapis.com/css?family=Amiko:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<link href="https://fonts.googleapis.com/css?family=Amiko:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<style>
h1, h2, h3, h4 {
  font-family: 'Amiko', sans-serif !important;
}
p {
  font-family: 'Work Sans', sans-serif !important;
}
#timeline {
  position: relative;
  height: 100%;
  padding: 0 0 40px;
  background-color: #272727;
  
}
#timeline-header{
  position: relative;
  text-align: center;
  border-width: 4px;
  border-color: #fff;
  color: #fff;
  text-align: center;
  padding-top: 40px;
}
#start-left {
  position: relative;
  left: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  border-radius: 0 60px 0 0;
  height: 80px;
  background-color: #272727;
}
#start-right {
  position: relative;
  right: 0;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-radius: 60px 0 0 0;
  height: 80px;
  background-color: #272727;
}
.time-left {
  border-right: 2px solid #fff;
  height: 200px;
  color: #fff;
  padding: 0 15px 0 0;
  text-align: right;
}
.time-left .date {
  width: 100%;
  padding-right: 15px;
}
.inner-left {
  width: 20px;
  height: 95%;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  border-top: 4px solid #fff;
  border-color: #fff;
}
.time-right {
  border-left: 2px solid #fff;
  height: 200px;
  color: #fff;
  padding: 0 0 0 15px;
  text-align: left;
}
.inner-right {
  width: 20px;
  height: 95%;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  border-top: 4px solid #fff;
  border-color: #fff;
}
.time-right .date {
  width: 100%;
  padding-left: 15px;
}
@media only screen and (max-width: 750px) {
  .date-details h3 {
    font-size: 1.35rem;
  }
}
</style>

</head>
<body>
<div class="container" id="timeline">
    <div id="timeline-header">
        <h1>TIMELINE</h1>
    </div>
    <div class="col-xs-6" id="start-left">
    </div>
    <div class="col-xs-6" id="start-right">
    </div>
    <div class="col-xs-6 time-left">
        <div class="date">
            <h1>2016</h1>
        </div>
        <div class="date-details">
            <h3>Job Title</h3>
            <p>February 2015 - Present</p>
        </div>
        <div class="inner-left">
        </div>
    </div>
    <div class="col-xs-6 time-right">
    </div>
    <div class="col-xs-6 time-left">
    </div>
    <div class="col-xs-6 time-right">
        <div class="date">
            <h2>2014</h2>
        </div>
        <div class="date-details">
            <h3>Job Title</h3>
            <p>January 2014 - February 2015</p>
        </div>
        <div class="inner-right">
        </div>
    </div>
    <div class="col-xs-6 time-left">
        <div class="date">
            <h2>2013</h2>
        </div>
        <div class="date-details">
            <h3>Job Title</h3>
            <p>March 2013 - January 2016</p>
        </div>
        <div class="inner-left">
        </div>
    </div>
    <div class="col-xs-6 time-right">
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview