Toggle navigation
TUTORIALS
Computers Basics
HTML
HTML5
CSS
CSS3
SEO
Bootstrap 3
Bootstrap 4
Materialize CSS
JavaScript
jQuery
Ajax
AngularJS
C - Language
Java
PHP
Python
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
S/W MCQ
S/W INTERVIEW QUESTIONS
COMPETITIVE EXAMS
Current Affairs
Current Affairs MCQ
Monthly Current Affairs MCQ
Today GK
General Knowledge
Verbal Ability
Mental Ability
UPSC
UPSC Previous Questions
UPSC 2022 Prelims Questions
UPSC 2021 Questions
UPSC 2020 Questions
UPSC 2019 Questions
BLOG
MORE
IPC Sections
New
School Mathematics
Code Editor
New
EXECUTE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Timeline, Two Column Timeline</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="http://www.freetimelearning.com/js/jquery-1.11.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <style type="text/css"> #timeline { list-style: none; position: relative; } #timeline:before { top: 0; bottom: 0; position: absolute; content: " "; width: 2px; background-color: #4997cd; left: 50%; margin-left: -1.5px; } #timeline .clearFix { clear: both; height: 0; } #timeline .timeline-badge { color: #fff; width: 50px; height: 50px; font-size: 1.2em; text-align: center; position: absolute; top: 20px; left: 50%; margin-left: -25px; background-color: #0099da; z-index: 100; border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; } #timeline .timeline-badge span.timeline-balloon-date-day { font-size: 1.4em; } #timeline .timeline-badge span.timeline-balloon-date-month { font-size: .7em; position: relative; top: -10px; } #timeline .timeline-badge.timeline-filter-movement { background-color: #ffffff; font-size: 1.7em; height: 35px; margin-left: -18px; width: 35px; top: 40px; } #timeline .timeline-badge.timeline-filter-movement a span { color: #4997cd; font-size: 1.3em; top: -1px; } #timeline .timeline-badge.timeline-future-movement { background-color: #ffffff; height: 35px; width: 35px; font-size: 1.7em; top: -16px; margin-left: -18px; } #timeline .timeline-badge.timeline-future-movement a span { color: #4997cd; font-size: .9em; top: 2px; left: 1px; } #timeline .timeline-movement { border-bottom: solid 1px #0099da; position: relative; } #timeline .timeline-movement.timeline-movement-top { height: 60px; } #timeline .timeline-movement .timeline-item { padding: 20px 0; } #timeline .timeline-movement .timeline-item .timeline-panel { border: 1px solid #d4d4d4; border-radius: 3px; background-color: #FFFFFF; color: #666; padding: 10px; 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 .timeline-movement .timeline-item .timeline-panel .timeline-panel-ul { list-style: none; padding: 0; margin: 0; } #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul { text-align: right; } #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul li { color: #666; } #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul li span.importo { color: #6923c4; font-size: 1.3em; } #timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul { text-align: left; } #timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul span.importo { color: #fc7e00; font-size: 1.3em; } </style> <div class="container"> <div class="page-header"> <h2 id="">Two Column Timeline</h2> </div> <div id="timeline"> <div class="row timeline-movement timeline-movement-top"> <div class="timeline-badge timeline-future-movement"> <a href="#"> <span class="glyphicon glyphicon-chevron-down"></span> </a> </div> <div class="timeline-badge timeline-filter-movement"> <a href="#"> <span class="glyphicon glyphicon-time"></span> </a> </div> </div> <div class="row timeline-movement"> <div class="timeline-badge"> <span class="timeline-balloon-date-day">03</span> <span class="timeline-balloon-date-month">JUN</span> </div> <div class="col-sm-6 timeline-item"> <div class="row"> <div class="col-sm-11"> <div class="timeline-panel credits"> <ul class="timeline-panel-ul"> <li><span class="importo">HTML Tutorial</span></li> <li><span class="causale">Hyper Text Markup Language (HTML) was invented by "Tim Berner Lee".He was a British Computer Scientist. The first web page was created at CERN by Tim Berners-Lee on August 6, 1991.</span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 14/06/2017</small></p> </li> </ul> </div> </div> </div> </div> <div class="col-sm-6 timeline-item"> <div class="row"> <div class="col-sm-offset-1 col-sm-11"> <div class="timeline-panel debits"> <ul class="timeline-panel-ul"> <li><span class="importo">HTML5 Tutorial</span></li> <li><span class="causale">HTML5 (No space between "HTML" and "5")is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current version of the HTML standard.</span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 25/06/2017</small></p> </li> </ul> </div> </div> </div> </div> </div> <!--due --> <div class="row timeline-movement"> <div class="timeline-badge"> <span class="timeline-balloon-date-day">01</span> <span class="timeline-balloon-date-month">JUL</span> </div> <div class="col-sm-offset-6 col-sm-6 timeline-item"> <div class="row"> <div class="col-sm-offset-1 col-sm-11"> <div class="timeline-panel debits"> <ul class="timeline-panel-ul"> <li><span class="importo">CSS Tutorial</span></li> <li><span class="causale">CSS is the acronym for "Cascading Style Sheet". Tutorial provides basic and advanced concepts of CSS technology. Our CSS tutorial is developed for beginners and professionals.</span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 09/07/2017</small></p> </li> </ul> </div> </div> </div> </div> <div class="col-sm-6 timeline-item"> <div class="row"> <div class="col-sm-11"> <div class="timeline-panel credits"> <ul class="timeline-panel-ul"> <li><span class="importo">JavaScript Tutorial</span></li> <li><span class="causale">JavaScript is the programming language of the Web. Javascript Most commonly used websites this is client-side script to interact with the user and make dynamic pages. </span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 21/07/2017</small></p> </li> </ul> </div> </div> </div> </div> </div> <div class="row timeline-movement"> <div class="timeline-badge"> <span class="timeline-balloon-date-day">09</span> <span class="timeline-balloon-date-month">AUG</span> </div> <div class="col-sm-offset-6 col-sm-6 timeline-item"> <div class="row"> <div class="col-sm-offset-1 col-sm-11"> <div class="timeline-panel debits"> <ul class="timeline-panel-ul"> <li><span class="importo">Java Tutorial</span></li> <li><span class="causale">Java is an object-oriented programming language developed by Sun Microsystems and released in 1995. Java was originally developed by James Gosling at Sun Microsystems.</span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 18/08/2017</small></p> </li> </ul> </div> </div> </div> </div> <div class="col-sm-6 timeline-item"> <div class="row"> <div class="col-sm-11"> <div class="timeline-panel credits"> <ul class="timeline-panel-ul"> <li><span class="importo">PHP</span></li> <li><span class="causale">PHP is an acronym for PHP: Hypertext Preprocessor it is a widely-used open source(free). PHP is a server-side scripting language designed primarily for web development and web applications.</span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 26/09/2017</small></p> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </body> </html>
×
Close
Bootstrap Timeline, Two Column Timeline - Free Time Learning
Sample Data