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
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
Recently, I experimented with a Responsive Timeline with Bootstrap Collapse, and it ended up being a great way to expose information to an audience in a structured manner. As a Dissertation Proposal Writers, I often must visualize complex research milestones or timelines to clients or collaborators. With this design, I can portray the stages of a dissertation process—like research proposal submission, data collection, and final defense—in a rather aesthetic way.
ReplyDeleteCertsTopics SSE-Engineer Dumps provide a comprehensive collection of exam preparation materials tailored for the SSE-Engineer certification. These dumps include real exam questions and verified answers to help candidates practice effectively and gain confidence. With up-to-date content and detailed explanations, they serve as a valuable resource to enhance knowledge and ensure success in the certification exam.
ReplyDeletehttps://www.certstopics.com/product-detail/sse-engineer.html
PayPal für Vereine ist eine großartige Lösung, um Spenden einfach und sicher zu empfangen. Besonders die transparente Abwicklung und schnelle Verfügbarkeit der Gelder sind ein Vorteil. Nutzt euer Verein bereits PayPal oder setzt ihr auf andere Zahlungsmethoden?
ReplyDeleteCrowdfunding-Plattformen bieten eine innovative Möglichkeit, kreative Projekte, soziale Initiativen und Start-ups durch gemeinschaftliche Finanzierung zum Leben zu erwecken. Erfahren Sie, welche Plattformen es gibt und wie Sie mit der Kraft der Community Ihre Vision verwirklichen können.
ReplyDeleteCrowdfunding privat ist eine tolle Möglichkeit, persönliche Projekte oder Notlagen zu finanzieren. Besonders wichtig finde ich eine authentische Geschichte, die emotional berührt. Welche Plattformen sind eurer Meinung nach für private Projekte am besten geeignet?
ReplyDeleteSpenden sammeln ist eine tolle Möglichkeit, soziale Projekte oder persönliche Anliegen zu unterstützen. Besonders wichtig finde ich Transparenz und eine klare Zielsetzung. Welche Plattformen oder Methoden funktionieren bei euch am besten?
ReplyDeleteGreat Post! I look forward to seeing more from you in the future. There are some very great ideas above <a href="https://www.dchica.in/collections/period-panties-period-care”>Period Panties</a>
ReplyDeleteDo you live in Barford St John and are looking for an affordable solution to declutter your property?
ReplyDeleteThen, Oxfordshire Commercials LTD can be your go to partner. We are a family-run business, located about 10.5 miles away offering waste disposal Barford St John at competitive rates.
We also deliver top-grade stones and aggregates for any type of commercial or residential project.
Our garage address is Heyford Park,52 Camp Road, Bicester, OX25 5HD. So, keep reading to know more about our services.
Waste Removal Barford St John
Looking for a reliable service of “waste removal near me”?
Our muck away service Barford St John is designed for both residential and commercial needs, ensuring your space is clutter-free in no time. Our grab vehicles are available 7 days a week, from 8 AM to 6 PM. So, you can book an appointment based on your schedule. We ensure:
Prompt pickups and professional service.
Affordable pricing without compromising quality.
Environmentally responsible disposal practices.
So, to book our services, please call us at 01295 584420 or 07521 050435.
Our waste removal services include:
Mixed Construction Waste
Excavated Earth Removal
Wood Waste Disposal
Garden Waste Removal
Concrete Disposal
Scrap Metal Disposal
Municipal Waste Removal
Electronic Waste Disposal
If you are unsure about the type of waste you need to get rid of, don't worry! We provide expert advice to help you understand and categorise your waste. Just send us pictures of the materials at info@oxcommsltd.com, and our team will help you identify the type of waste and the most effective way to dispose of it.
Stone Delivery Barford St John
Stones and aggregates work as a base for any construction work. We provide high-quality stone and aggregate delivery services for both domestic and commercial projects.
Our Stone Delivery & Aggregate services are commonly used for:
Car parks
Driveways
Building bases
Patios
Foundations
Pathways
These are only a few examples. If you need our services for any other type of project and need the appropriate aggregate delivery Barford St John, please give us a call.
Are you looking for Car Tyres for your vehicle?
ReplyDeleteWhen it comes to ordering best-in-class car tyres Ballincollig, consider relying on Casey Family Quality Tyres. Whether you need to replace your vehicle's tyres because of normal wear and tear or a sudden, irreparable puncture, we are here to help.
All you have to do is enter your car’s registration number into this website’s tyre finder tool. Next, you will get to see the full display of the available tyre models in our inventory.
Order Tyres Ballincollig Online In 3 Simple Steps
To book your favourite tyre brand from the comfort of your home, please follow these steps:
Step 1: Enter your car’s registration number or the tyre index specifications using the tyre finder.
Step 2: Select a tyre as per your preference and budget and mention the number of units required.
Step 3: Pick a tyre fitting slot at your convenience.
You can also call (00892) 364850 for buying advice or to make a booking or come directly to us.
Check Out The Brands We Provide
On exploring our virtual tyre catalogue, you can see different reputed brands like Michelin, Goodyear, Continental, Pirelli, and many more. You can easily find the most suitable seasonal or vehicle-specific tyre variant.
If you need advice, you can also email us at sale@bider.ie.
We promise to provide more accurate and relevant responses compared to the results for 'tyre shops near me'.
Tyre Categories You Can Choose From
Throughout the year we sell all the following tyre types to our highly valued customers:
Summer Tyres
Designed from a hard rubber compound, our summer tyres are known for optimal performance and durability during the warmer seasons. Moreover, their grooves are strategically introduced to expel water on roads and mitigate the risks of aquaplaning.
Winter Tyres
Winter tyres have deep tread blocks and more sipes for optimal grip on ice and snow on winter roads. They ensure better braking control on wet roads due to their specialised tread build. Also, they are durable in harsh winters owing to the soft and flexible natural rubber compound.
All-season Tyres
If you mainly drive around town and rarely encounter extreme heat or heavy snow, all-season tyres are an excellent choice. They have a standard lifespan of 4-5 years and are designed to offer comfortable and quiet rides. While examining their build you can see moderate tread depths which sets them apart from winter tyres intended for more severe weather and road conditions.
4x4 Tyres
Built for SUVs and other 4x4 vehicles these larger tyres come with reinforced sidewalls and customised tread patterns for different driving purposes.
We have three variants available:
Highway terrain
Mud terrain
All terrain
Performance Tyres
Performance tyres are fine-tuned to meet the needs of a sports car. They offer improved manoeuvrability and control, particularly at high speeds. Also, the driver can experience short stopping distances upon installing these car tyres. Overall, they enhance your car’s handling and responsiveness.
Run-flat Tyres
Run flats or RFTs have self-supporting structures that help maintain the tyre's shape even when it has low air pressure. As a result, run-flat tyres allow you to drive for 50 miles even after a tyre puncture to reach the nearest garage for assistance. While doing so, you do not have to worry about the tyres coming off the rims as run-flats are built to be more stable than regular car tyres.
Visit Us For A Tyre Fitting Service
Now that you are aware of our list of tyres Ballincollig, you can order them online and book an appointment at your convenience. Our garage is in UNIT-10A, BALLINCOLLIG COMMERCIAL PARK, LINK ROAD BALLINCOLLIG, CORK, P31N281, IRELAND. We will make all the prior arrangements before you visit to ensure a prompt service.