Invoice Script PHP jQuery

Responsive Facebook Style Timeline Design With Twitter Bootstrap

Posted by & filed under CSS, HTML5, 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.

Responsive Facebook Style Timeline Design Demo
Responsive Facebook Style Timeline Design Demo

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>
JavaScript
Copy

 

Timeline Design Template Download

Instant Download This Script

 

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> &nbsp; March 2015</span>
			
			<p>&nbsp;</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> &nbsp; March 2015 </span>
			<p>&nbsp;</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>&nbsp;</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>
JavaScript
Copy

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

Gmail like layout Using HMTL and Twitter 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;
}
JavaScript
Copy

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;
}
JavaScript
Copy

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;
}
JavaScript
Copy

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%;
}
JavaScript
Copy

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;
	}
}
JavaScript
Copy

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

Get Access Now Instantly

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

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!

no thanks