Toggle navigation
TUTORIALS
Basics Of Computer Science
HTML
HTML5
CSS
CSS3
Bootstrap 3
Bootstrap 4
Materialize CSS
JavaScript
jQuery
Ajax
AngularJS
C - Language
Java
PHP
Python
SEO
QUIZ
INTERVIEW QUESTIONS
REFERENCES
Practice Templates
Bootstrap Templates
PHP Projects
PLUGINS
Bootstrap 3 Plugins
Bootstrap 4 Plugins
Static Menus
Responsive Menus
Dropdown
Tabs & Pills
Modal Boxes (Dialog box)
Gallery Plugins
Sliders
Buttons
Dynamic Forms
Forms
Image Effects
G K
New
CURRENT AFFAIRS
New
MORE
IPC Sections
New
School Mathematics
Blog
CODE EDITOR
New
EXECUTE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap 3 Timeline and Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <style type="text/css"> body { padding-top:20px; } .main-timeline{ font-family: 'Roboto', sans-serif; padding: 20px 0; position: relative; } .main-timeline:before, .main-timeline:after{ content: ''; height: 40px; width: 40px; background-color: #e7e7e7; border-radius: 50%; border: 10px solid #303334; transform:translateX(-50%); position: absolute; left: 50%; top: -15px; z-index: 2; } .main-timeline:after{ top: auto; bottom:15px; } .main-timeline .timeline{ padding: 35px 0; margin-top: -30px; position: relative; z-index: 1; } .main-timeline .timeline:before, .main-timeline .timeline:after{ content: ''; height: 100%; width: 50%; border-radius: 100px 0 0 100px; border: 15px solid #46B2BC; border-right: none; position: absolute; left: 0; top: 0; z-index: -1; } .main-timeline .timeline:after{ height: calc(100% - 30px); width: calc(50% - 12px); border-color: #65C7D0; left: 12px; top: 15px; } .main-timeline .timeline-content{ display:inline-block; } .main-timeline .timeline-content:hover{ text-decoration: none; } .main-timeline .timeline-year{ color: #65C7D0; font-size: 50px; font-weight: 600; display: inline-block; transform:translateY(-50%); position: absolute; top: 50%; left: 10%; } .main-timeline .timeline-icon{ color: #65C7D0; font-size: 80px; display: inline-block; transform: translateY(-50%); position: absolute; left: 34%; top: 50%; } .main-timeline .content{ color: #909090; width: 50%; padding: 20px; display: inline-block; float: right; } .main-timeline .title{ color: #65C7D0; font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 5px 0; } .main-timeline .description{ font-size: 15px; letter-spacing: 1px; margin: 0; } .main-timeline .timeline:nth-child(even):before{ left: auto; right: 0; border-radius: 0 100px 100px 0; border: 15px solid red; border-left: none; } .main-timeline .timeline:nth-child(even):after{ left: auto; right: 12px; border: 15px solid green; border-left: none; border-radius: 0 100px 100px 0; } .main-timeline .timeline:nth-child(even) .content{ float: left; } .main-timeline .timeline:nth-child(even) .timeline-year{ left: auto; right: 10%; } .main-timeline .timeline:nth-child(even) .timeline-icon{ left: auto; right: 32%; } .main-timeline .timeline:nth-child(5n+2):before{ border-color: #EA3C14; } .main-timeline .timeline:nth-child(5n+2):after{ border-color: #EF5720; } .main-timeline .timeline:nth-child(5n+2) .timeline-icon{ color: #EA3C14; } .main-timeline .timeline:nth-child(5n+2) .timeline-year{ color: #EA3C14; } .main-timeline .timeline:nth-child(5n+2) .title{ color: #EA3C14; } .main-timeline .timeline:nth-child(5n+3):before{ border-color: #8CC63E; } .main-timeline .timeline:nth-child(5n+3):after{ border-color: #6CAF29; } .main-timeline .timeline:nth-child(5n+3) .timeline-icon{ color: #8CC63E; } .main-timeline .timeline:nth-child(5n+3) .timeline-year{ color: #8CC63E; } .main-timeline .timeline:nth-child(5n+3) .title{ color: #8CC63E; } .main-timeline .timeline:nth-child(5n+4):before{ border-color: #F99324; } .main-timeline .timeline:nth-child(5n+4):after{ border-color: #FBB03B; } .main-timeline .timeline:nth-child(5n+4) .timeline-icon{ color: #F99324; } .main-timeline .timeline:nth-child(5n+4) .timeline-year{ color: #F99324; } .main-timeline .timeline:nth-child(5n+4) .title{ color: #F99324; } .main-timeline .timeline:nth-child(5n+5):before{ border-color: #0071BD; } .main-timeline .timeline:nth-child(5n+5):after{ border-color: #0050A3; } .main-timeline .timeline:nth-child(5n+5) .timeline-icon{ color: #0071BD; } .main-timeline .timeline:nth-child(5n+5) .timeline-year{ color: #0071BD; } .main-timeline .timeline:nth-child(5n+5) .title{ color: #0071BD; } @media screen and (max-width:1200px){ .main-timeline .timeline:after{ border-radius: 88px 0 0 88px; } .main-timeline .timeline:nth-child(even):after{ border-radius: 0 88px 88px 0; } } @media screen and (max-width:767px){ .main-timeline .timeline{ margin-top: -19px; } .main-timeline .timeline:before { border-radius: 50px 0 0 50px; border-width: 10px; } .main-timeline .timeline:after { height: calc(100% - 18px); width: calc(50% - 9px); border-radius: 43px 0 0 43px; border-width:10px; top: 9px; left: 9px; } .main-timeline .timeline:nth-child(even):before { border-radius: 0 50px 50px 0; border-width: 10px; } .main-timeline .timeline:nth-child(even):after { height: calc(100% - 18px); width: calc(50% - 9px); border-radius: 0 43px 43px 0; border-width: 10px; top: 9px; right: 9px; } .main-timeline .timeline-icon{ font-size: 60px; } .main-timeline .timeline-year{ font-size: 40px; } } @media screen and (max-width:479px){ .main-timeline .timeline-icon{ font-size: 50px; transform:translateY(0); top: 25%; left: 10%; } .main-timeline .timeline-year{ font-size: 25px; transform:translateY(0); top: 65%; left: 9%; } .main-timeline .content{ width: 68%; padding: 10px; } .main-timeline .title{ font-size: 18px; } .main-timeline .timeline:nth-child(even) .timeline-icon{ right: 10%; } .main-timeline .timeline:nth-child(even) .timeline-year{ right: 9%; } } </style> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="main-timeline"> <div class="timeline"> <a href="#" class="timeline-content"> <span class="timeline-year">2019</span> <div class="timeline-icon"> <i class="fa fa-desktop"></i> </div> <div class="content"> <h3 class="title">PYTHON APPLICATIONS</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus. </p> </div> </a> </div> <div class="timeline"> <a href="#" class="timeline-content"> <span class="timeline-year">2018</span> <div class="timeline-icon"> <i class="fa fa-desktop"></i> </div> <div class="content"> <h3 class="title">ANGULARJS APPLICATIONS</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus. </p> </div> </a> </div> <div class="timeline"> <a href="#" class="timeline-content"> <span class="timeline-year">2017</span> <div class="timeline-icon"> <i class="fa fa-desktop"></i> </div> <div class="content"> <h3 class="title">JAVA APPLICATIONS</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus. </p> </div> </a> </div> <div class="timeline"> <a href="#" class="timeline-content"> <span class="timeline-year">2016</span> <div class="timeline-icon"> <i class="fa fa-desktop"></i> </div> <div class="content"> <h3 class="title">PHP APPLICATIONS</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus. </p> </div> </a> </div> <div class="timeline"> <a href="#" class="timeline-content"> <span class="timeline-year">2015</span> <div class="timeline-icon"> <i class="fa fa-desktop"></i> </div> <div class="content"> <h3 class="title">Web Designing</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus ipsum dolor sit amet, consectetur adipisicing elit. Alias animi dolor in, maiores natus. </p> </div> </a> </div> </div> </div> </div> </div> </div> </body> </html>
×
Close
Bootstrap 3 Timeline and Icons
Sample Data
