Responsive Timeline with Bootstrap Collapse
In this article, I am going to explain how to create a responsive timeline design with collapse using Twitter Bootstrap. Ever sinc...
https://www.programming-free.com/2015/09/responsive-timeline-with-bootstrap.html?m=0
In this article, I am going to explain how to create a responsive timeline design with collapse using Twitter Bootstrap. Ever since facebook introduced it, designers have been coming up with various forms of timeline designs to depict a story or history of events on a webpage. So, I thought I could make use of Twitter Bootstrap to quickly write a timeline along with bootstrap's collapse component.
Libraries Used
-- jQuery-- Twitter Bootstrap
-- Animate.css (Optional)
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/app.css" />
<!-- Modernizr JS for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 8]>
<script src="assets/plugins/modernizr.min.js"></script>
<![endif]-->
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body>
<div class="container section-wrapper">
<div class="section-content">
<!-- EXPERIENCE START -->
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h3 class="text-center text-yellow">
MY WORK EXPERIENCE
</h3>
<div class="panel-group timeline" id="experience">
<div class="timeline-item">
<div class="timeline-year">
<span class="timeline-year">2014 - Now</span>
</div>
<!-- //.timeline-year -->
<div class="timeline-btn">
<a href="#exp1" data-toggle="collapse" data-parent="#experience"></a>
</div>
<!-- //.timeline-btn -->
<div class="panel">
<div class="panel-heading">
<div class="panel-title">
<h4>Endeca Developer - Comp Name - Location</h4>
</div>
<!-- //.panel-title -->
</div>
<!-- //.panel-heading -->
<div id="exp1" class="panel-collapse collapse in">
<div class="panel-body">
<p>
Responsibilities:
<br>
Your roles and responsibilities goes here </p>
</div>
<!-- //.panel-body -->
</div>
<!-- //.panel-collapse -->
</div>
<!-- //.panel -->
</div>
<!-- //.timeline-item -->
<div class="timeline-item animated bounceInUp">
<div class="timeline-year">
<span class="timeline-year">2013 - 2014</span>
</div>
<!-- //.timeline-year -->
<div class="timeline-btn">
<a href="#exp2" class="collapsed" data-toggle="collapse" data-parent="#experience"></a>
</div>
<!-- //.timeline-btn -->
<div class="panel">
<div class="panel-heading">
<div class="panel-title">
<h4>Associate - Comp Name</h4>
</div>
<!-- //.panel-title -->
</div>
<!-- //.panel-heading -->
<div id="exp2" class="panel-collapse collapse">
<div class="panel-body">
<p>
Technologies Worked On:
<br>
Your roles and responsibilities goes here
</p>
</div>
<!-- //.panel-body -->
</div>
<!-- //.panel-collapse -->
</div>
<!-- //.panel -->
</div>
<!-- //.timeline-item -->
<div class="timeline-item animated bounceInUp">
<div class="timeline-year">
<span class="timeline-year">2011 - 2013</span>
</div>
<!-- //.timeline-year -->
<div class="timeline-btn">
<a href="#exp3" class="collapsed" data-toggle="collapse" data-parent="#experience"></a>
</div>
<!-- //.timeline-btn -->
<div class="panel">
<div class="panel-heading">
<div class="panel-title">
<h4>Programmer Analyst - Comp Name</h4>
</div>
<!-- //.panel-title -->
</div>
<!-- //.panel-heading -->
<div id="exp3" class="panel-collapse collapse">
<div class="panel-body">
<p>
Technologies Worked On:
<br>
Your roles and responsibilities goes here
</p>
</div>
<!-- //.panel-body -->
</div>
<!-- //.panel-collapse -->
</div>
<!-- //.panel -->
</div>
<!-- //.timeline-item -->
<div class="timeline-item animated bounceInUp">
<div class="timeline-year">
<span class="timeline-year">2010 - 2011</span>
</div>
<!-- //.timeline-year -->
<div class="timeline-btn">
<a href="#exp4" class="collapsed" data-toggle="collapse" data-parent="#experience"></a>
</div>
<!-- //.timeline-btn -->
<div class="panel">
<div class="panel-heading">
<div class="panel-title">
<h4>Programmer Analyst Trainee - Comp Name</h4>
</div>
<!-- //.panel-title -->
</div>
<!-- //.panel-heading -->
<div id="exp4" class="panel-collapse collapse">
<div class="panel-body">
<p>
Responsibilities:
<br>
Your roles and responsibilities goes here
</p>
</div>
<!-- //.panel-body -->
</div>
<!-- //.panel-collapse -->
</div>
<!-- //.panel -->
</div>
<!-- //.timeline-item -->
</div>
<!-- //.panel-group -->
</div>
<!-- //.col-md-10 -->
</div>
<!-- //EXPERIENCE END -->
</div>
<!-- //.section-content -->
</div>
</body>
</html>
app.css
/*---------------------------------------------------------------------*/
/* COMMON
/*---------------------------------------------------------------------*/
body {
background-color: #288479;
font-family: 'Lato', sans-serif;
font-size: 16px;
color: #2B2626;
line-height: 25px;
overflow-x: hidden;
}
.section .section-wrapper > .section-content {
padding: 80px 0px;
}
@media (min-width: 768px) {
.section .section-wrapper > .section-content {
padding: 100px 0px;
}
}
.text-center{
text-align:center;
}
.text-yellow{
color:#F1EA0E;
}
.text-white{
color:#fff;
}
/*---------------------------------------------------------------------*/
/* TIMELINE
/*---------------------------------------------------------------------*/
.panel-group.timeline {
position: relative;
margin-top: 30px;
}
.panel-group.timeline .timeline-item {
position: relative;
margin-bottom: 40px;
}
@media (min-width: 568px) {
.panel-group.timeline .timeline-item {
margin-bottom: 20px;
}
}
@media (min-width: 768px) {
.panel-group.timeline .timeline-item:before {
position: absolute;
content: '';
width: 1px;
height: calc(100% + 20px);
top: 0;
left: 170px;
border-left: 1px dashed #fff;
}
}
.panel-group.timeline .timeline-item:last-child {
margin-bottom: 0px;
}
.panel-group.timeline .timeline-item:last-child:before {
display: none;
}
.panel-group.timeline .timeline-item .timeline-year {
display: block;
position: relative;
width: 120px;
height: 40px;
margin-bottom: -20px;
margin-right: auto;
margin-left: auto;
line-height: 40px;
background-color: #DCC417;
text-align: center;
font-weight: 700;
text-transform: uppercase;
border-radius: 4px;
}
@media (min-width: 568px) {
.panel-group.timeline .timeline-item .timeline-year {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
}
.panel-group.timeline .timeline-item .timeline-btn {
position: absolute;
z-index: 5;
top: 0;
left: 150px;
width: 40px;
height: 40px;
background-color: #C70E32;
border-radius: 4px;
}
@media (max-width: 767px) {
.panel-group.timeline .timeline-item .timeline-btn {
display: none;
}
}
.panel-group.timeline .timeline-item .timeline-btn > a {
display: block;
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 40px;
height: 40px;
}
.panel-group.timeline .timeline-item .timeline-btn > a:before {
display: block;
position: absolute;
z-index: 15;
content: '-';
top: 0;
left: 0;
width: 40px;
height: 40px;
line-height: 38px;
color: #ffffff;
font-size: 30px;
font-weight: 700;
text-align: center;
}
.panel-group.timeline .timeline-item .timeline-btn > a.collapsed:before {
content: '+';
}
.panel-group.timeline .timeline-item .panel {
padding: 10px;
width: 100%;
background: transparent;
border: 1px solid #DCCECE;
border-radius: 0px;
}
@media (min-width: 568px) {
.panel-group.timeline .timeline-item .panel {
width: calc(100% - 140px);
margin-left: 140px;
}
}
@media (min-width: 768px) {
.panel-group.timeline .timeline-item .panel {
width: calc(100% - 210px);
margin-left: 210px;
}
}
.panel-group.timeline .timeline-item .panel .panel-heading {
position: relative;
}
.panel-group.timeline .timeline-item .panel .panel-heading .panel-title {
text-transform: uppercase;
color:#11ECD2;
}
@media (max-width: 567px) {
.panel-group.timeline .timeline-item .panel .panel-heading .panel-title {
padding-top: 20px;
}
}
.panel-group.timeline .timeline-item .panel .panel-collapse .panel-body {
padding-top: 5px;
border-top: none;
color:#DCCECE;
}
.panel-group.timeline .timeline-item .panel .panel-collapse .panel-body p {
margin-bottom: 0px;
}
app.js
var collapseTimeline = function (){
var screensize = Math.max($(window).width(), window.innerWidth),
expItem = $('.collapse:not(:first)', '#experience');
if (screensize < 768){
expItem.collapse('show');
}
else{
expItem.collapse('hide');
}
};
// Call collapseTimeline() when window is loaded.
$(window).load(function(){
collapseTimeline();
});
// Call collapseTimeline() when window is resized.
$(window).resize(function(){
collapseTimeline();
});
//Animations
$('#experience').find('.timeline-item:not(:first)').each(function(i){
var element = $(this),
itemsDelay = ( isNaN($(this).data('animation-delay')) ? 50 : $(this).data('animation-delay'));
element.css('opacity', 0).one('inview', function(isInView) {
if (isInView){
setTimeout(function(){
element.addClass('animated bounceInUp').css('opacity', 1);
} , itemsDelay * (i * 2));
}
});
});
How it works
Before we get into how it works, please have a look at Bootstrap collapse plugin here and understand how it works.
1. CSS3 Media queries are used to adjust the style according to the device size. The meta tag (name=viewport) detects the device width.
2. To set the collapsible element to be open by default use the in class (example :index.html - line 47). In this example the first section of the collapse/timeline is made to be open on load. To set the collapsible element to be closed, use class="collapsed" on the timeline-button. (example :index.html - line :65)
3. The jquery code in app.js opens all the collapsible sections if the screen size is below 768px, in case of mobile or a tablet.
4. I have also added some animation using Animate.css by Daniel Eden. This is totally optional.
How it looks on different screen size
Keep yourself subscribed for getting programmingfree articles delivered directly to your inbox once in a month. Thanks for reading!
This is extremely helpful info!! Very good work. Everything is very interesting to learn and easy to understand. Thank you for giving information. Tom Hardy Long Coat
ReplyDeleteDeveloping your objectives in this means enables you to plainly describe your demands to the web design denver colorado that you select. And also, the details you collect from these concerns can aid in selecting the appropriate internet growth firm.
ReplyDeleteAmazing! It’s a unique idea. The layout of the timeline plays a vital role in grabbing the audience. Last year I was looking for a reliable source where I can get dissertation help. I found a website, named Dissertation Proposal, and its impressive timeline caught my eye. What a compelling layout it was. Then I took their services and get done with my task. Just mean to say that the timeline design matters a lot for the success of any online platform.
ReplyDeleteI think your blog will easily get the correct market because it's having the piece of content. so it can easily attract visitors.
ReplyDeleteIf you are looking to buy customised eco friendly plantable seed pencil. Get connected with us for more details.
Nice blog! Great work. Keep it up.
ReplyDeleteClick here for iphone 6 plus price
We have got you a solution! You can come to our essay writing service at any time for your help with the philosophy essay topic ideas at once. All your troubles will find their way regarding the topic selection. Also, you can trust sensitive tasks that might affect your academic performance. We can assure you one thing, due to us, you won't face any negative feedback, but you might indeed be able to witness a positive impact on your grades with our exceptional philosophy essay writing service. Though writing and selecting a philosophy essay is a task job to do since you have us all, your work would become more manageable.
ReplyDeleteYour beautiful information is wonderful! Thank you for providing this informative content, and please continue the excellent work you're doing on your website. I will now recommend that you contact marketing management assignment samples writing site if you ever need help with your assignment since it is a really helpful service for assignment help. I utilized this service today when I needed help with my homework and I really liked it.
ReplyDeleteHonestly, it’s really a wonderful place to learn. It's quite educative and admirable content. I'm glad for being able to access your weblog. Thank you so much for sharing. fedpoly bali hnd forms
ReplyDeleteWe are committed to helping our clients achieve success. We understand that success is an ever-evolving journey, and with the right tools and guidance, anyone can reach their goals. To this end, we offer executive and professional coaching to our clients. Our experienced coaches have years of experience in the field and are dedicated to helping our clients unlock their true potential.
ReplyDeleteThis responsive timeline using Bootstrap is a great starting point for designing sleek UIs. For those venturing further into mobile app development, understanding the complete lifecycle is crucial. Here’s a comprehensive guide about Mobile App Development Lifecycle: A Comprehensive Guide to Creating Successful Applications that might help enhance your project, integrating responsive elements effectively from conception to deployment. Happy coding!
ReplyDeleteI wanted to take a moment to commend you on your consistency in delivering high-quality content. Your articles serve as a reliable and informative resource.
ReplyDeleteMarble Flooring in Ras Al Khaimah