Responsive Facebook Style Timeline Design With Twitter Bootstrap
In this tutorial we are going to implement this Responsive Facebook style timeline design with Twitter Bootstrap. I am going to explain step by step implementation of this Responsive Timeline Design, so just follow the each steps carefully.
Create index.html file and add basic HTML markup in it.
Create a directory called timeline in your htdocs or in your server root folder. Now add create following list of folders (css, js ) in the timeline directory. Then download bootstrap and jQuery files and add in their respective css and js directories. Now create index.html file and include those css and js files in index.html file.
<!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>Timeline Design</title> <!-- Bootstrap --> <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,200' rel='stylesheet' type='text/css'> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href="css/style.css" rel="stylesheet"> <!-- Script --> <script src="js/jquery.min.js"></script> </head> <body>
Create Unordered List Element to Form Timeline Design:
Add the following unordered list of HTML elements in your index.html page.
<div class="container"> <h2 class="title text-center" >Responsive Facebook Style Timeline Design With Twitter Bootstrap</h2> <ul class="timeline"> <li class="year">2015</li> <li class="event"> <h3 class="heading">Responsive PHP Quiz Script</h3> <span class="month"><i class="fa fa-calendar"></i> March 2015</span> <p> </p> <p>Demo : <a href="http://demo.smarttutorials.net/php-quiz-code/" target="_blank">PHP Quiz Script Demo</a></p> <p>Tutorial : <a href="http://www.smarttutorials.net/php-quiz-script/" target="_blank">PHP Quiz Script</a></p> <div class="text-center"> <img class="img-responsive img-thumbnail" src="http://1.bp.blogspot.com/-5VF-5ZFx6fk/VRu6g9QaxjI/AAAAAAAAEB4/ipE14PIvqGQ/s1600/php-quiz-script.png"> </div> <p>This version of Responsive PHP Quiz application has following new features are added. You may refer my previous versions of PHP MySQL quiz script tutorial to download php quiz script freely.</p> <blockquote> <ol> <li>Now users can share his/her results on Social networks (Facebook, Twitter, Google Plus, Reddit and Linkedin).</li> <li>The Quiz result page will contain all questions answered by the user along with correct answer.</li> <li>The Quiz result manage Grid has unique link to each taken Quiz result page, So user can refer his last Quiz results.</li> <li>The User can sort Quiz results on manage Grid using quiz taken date.</li> </ol> </blockquote> </li> <li class="event"> <h3 class="heading">Invoice System Using jQuery PHP MySQL And Bootstrap</h3> <span class="month"><i class="fa fa-calendar"></i> March 2015 </span> <p> </p> <div class="embed-responsive embed-responsive-16by9"> <iframe frameborder="0" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/AGawieZttJ0" class="embed-responsive-item"></iframe> </div> <p> </p> <p>Demo : <a href="http://demo.smarttutorials.net/invoice-script-php/" target="_blank">PHP Invoice System Demo</a></p> <p>Tutorial : <a href="http://www.smarttutorials.net/invoice-system-using-jquery-php-mysql-bootstrap/" target="_blank">Smart Invoice System</a></p> <p>This is an awesome tool for your marketing team and they can crack the deal at client’s doorstep. Order PDF Invoice System Script today! and increase sales. It just comes at a fraction of one time price. Grab the deal today.</p> </li> </ul> </div>
You may also interested in following tutorials
PHP Quiz Application Using jQuery Ajax MySQL and Bootstrap
Drag and Drop File Upload jQuery PHP Ajax HTML5 MySQL and Bootstrap
Create Vertical Timeline Line:
Create style.css file, and add the following css styles to create a Vertical Timeline Line and align it to center of the page.
.timeline{
background-image: url("../images/line-1.png");
background-position: center;
background-repeat: repeat-y;
max-width: 960px;
margin: 0 auto;
position: relative;
height: auto;
padding: 0px;
clear: both;
overflow: hidden;
}
Style Timeline Year:
Now display the Year at the center of page and on the timeline line. Following css styles will align the Year at the center of the page.
.timeline li.year{
clear: both;
width: 4em;
margin: 0 auto;
line-height: 4em;
background-color: #fff;
border-radius:50%;
text-align: center;
margin-bottom: 25px;
border: 1px solid #f39c12;
box-shadow: 2px 2px 2px #888888;
-moz-box-shadow: 2px 2px 2px #888888;
-webkit-box-shadow: 2px 2px 2px #888888;
}
.timeline li.year:first-child{
margin-top:0px;
}
.timeline li.year, .timeline li.event{
list-style-type: none;
z-index: 999;
}
Style The Responsive Timeline Feeds Vertically
First assign width and background colors to timeline feed. And now style the Timeline Feeds using css pseudo selector (:even, :odd).
.timeline li.event{
width: 45%;
background-color: #fff;
margin-bottom: 20px;
padding: 20px;
position: relative;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-image: none;
border-style: solid;
border-width: 1px;
}
li.event:nth-child(odd) {
color: green;
clear:left;
float: left;
}
li.event:nth-child(even) {
color: red;
clear: right;
float: right;
margin-top:100px;
margin-bottom:50px;
}
Finally create knob lines which connects the feeds to timeline line using following CSS pseudo selectors (::after, ::before)
.timeline li.event:nth-child(odd)::after {
background:red;
content: "";
height: 2px;
position: absolute;
right: -11.2%;
top: 30px;
width: 11.2%;
}
li.event:nth-child(even)::before{
background:red;
content: "";
height: 2px;
position: absolute;
top: 30px;
width: 11.2%;
left: -11.2%;
}
Design Responsive Timeline
Finally we are going to make this timeline to look nice even on the small screens i.e. mobile. With the help CSS media queries I am going to make this timeline feeds to align center of the page one by one.
@media (max-width: 640px) {
.timeline li.event{
width: 80%;
background-color: #fff;
border: 1px solid #ff0000;
margin: 20px auto;
padding: 20px;
position: relative;
}
li.event:nth-child(odd) {
color: green;
clear: both;
float: none;
}
li.event:nth-child(even) {
color: red;
clear: both;
float: none;
}
.timeline li.event:nth-child(odd)::after, li.event:nth-child(even)::before {
width: 0px;
}
}
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
