Responsive Facebook Timeline using 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 timeline using bootstrap

Responsive Facebook Timeline using Bootstrap

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.

Demo

Create Unordered List Element to Form Timeline Design:

Add the following unordered list of HTML elements in your index.html page.

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.

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.

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).

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.

Click to download

We hope you got a basic idea on develop Facebook Timeline using Bootstrap.