Getting Started
How To
Components
Timelines
Use our creative and clean timelines to showcase progress and events.
Icon timelines
This timeline uses .timeline .timeline-one classes to style the .timeline-item.
Additionally, each .timeline-item contains an icon and text.
React
Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum.
VueJs
Bootstrap. Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas.
Angular
AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.
<div class="timeline timeline-one">
<!-- Timeline Item 1 -->
<div class="timeline-item">
<span class="icon icon-info"><i class="fab fa-react"></i></span>
<h5 class="my-3">React</h5>
<p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum.</p>
</div>
<!-- Timeline Item 2 -->
<div class="timeline-item">
<span class="icon icon-secondary"><i class="fab fa-vuejs"></i></span>
<h5 class="my-3">VueJs</h5>
<p>Bootstrap. Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas.</p>
</div>
<!-- Timeline Item 3 -->
<div class="timeline-item">
<span class="icon icon-danger"><i class="fab fa-angular"></i></span>
<h5 class="my-3">Angular</h5>
<p>AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.</p>
</div>
</div>
Card timelines
These card timelines have .timeline .timeline-two classes for specific styling.
Furtherly, you can add timeline items by creating a .timeline-item and update the content inside the card.
We open our first office
Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum.
See storyWe sold more than 1000 copies
Bootstrap. Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas.
See storyThe begining
AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.
See story
<div class="timeline timeline-two">
<!-- Timeline Item 1 -->
<div class="timeline-item shadow-sm">
<div class="post-meta mb-3">
<a class="text-secondary mr-2" href="#"><i class="far fa-heart"></i>2.1k</a>
<span class="text-light"><i class="far fa-clock"></i>Jan 03, 2019</span>
</div>
<h5>We open our first office</h5>
<p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum.</p>
<a href="#" class="btn btn-link text-dark btn-icon">
<span class="btn-inner-icon"><i class="fab fa-readme"></i></span>
<span class="btn-inner-text">See story</span>
</a>
</div>
<!-- Timeline Item 2 -->
<div class="timeline-item shadow-sm">
<div class="post-meta mb-3">
<a class="text-secondary mr-2" href="#"><i class="far fa-heart"></i>10k</a>
<span class="text-light"><i class="far fa-clock"></i>Mar 10, 2017</span>
</div>
<h5>We sold more than 1000 copies </h5>
<p>Bootstrap. Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas.</p>
<a href="#" class="btn btn-link text-dark btn-icon">
<span class="btn-inner-icon"><i class="fab fa-readme"></i></span>
<span class="btn-inner-text">See story</span>
</a>
</div>
<!-- Timeline Item 3 -->
<div class="timeline-item shadow-sm">
<div class="post-meta mb-3">
<a class="text-secondary mr-2" href="#"><i class="far fa-heart"></i>15.2k</a>
<span class="text-light"><i class="far fa-clock"></i>Set 24, 2016</span>
</div>
<h5>The begining</h5>
<p>AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.</p>
<a href="#" class="btn btn-link text-dark btn-icon">
<span class="btn-inner-icon"><i class="fab fa-readme"></i></span>
<span class="btn-inner-text">See story</span>
</a>
</div>
</div>
Creative icon timelines 1
These creative icons have a .vertical-timeline wrapper class. Afterward, there are two div tags with their appropiate classes, as seen in the Html tab.
In the first div you can find the Fontawesome font which you can change to your liking.
For the second div you can add any components you'd like, such as text, buttons, alerts and so on.
Organic shape
Picseel ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.
Circle shape
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.
Square shape
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.
<div class="row">
<div class="col-12">
<div class="vertical-timeline">
<!-- Timeline Item 1 -->
<div class="row d-flex align-items-center">
<div class="col-md-2 text-center bottom">
<div class="shape organic-radius icon-danger"><i class="fab fa-angular"></i></div>
</div>
<div class="col-md-6">
<h6>Organic shape</h6>
<p>Picseel ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
</div>
</div>
<div class="row timeline-inner">
<div class="col-md-2">
<div class="corner top-right"></div>
</div>
<div class="col-md-8">
<hr>
</div>
<div class="col-md-2">
<div class="corner left-bottom"></div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="row align-items-center justify-content-end vertical-timeline">
<div class="col-md-6 text-right">
<h6>Circle shape</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
</div>
<div class="col-md-2 text-center full">
<div class="shape right icon-secondary rounded-circle"><i class="fab fa-vuejs"></i></div>
</div>
</div>
<div class="row timeline-inner">
<div class="col-md-2">
<div class="corner right-bottom"></div>
</div>
<div class="col-md-8">
<hr>
</div>
<div class="col-md-2">
<div class="corner top-left"></div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="row align-items-center vertical-timeline">
<div class="col-md-2 text-center top">
<div class="shape icon-info"><i class="fab fa-react"></i></div>
</div>
<div class="col-md-6">
<h6>Square shape</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
</div>
</div>
</div>
</div>
</div>
Creative icon timelines 2
This timeline has .timeline .timeline-four classes for specific styles.
To create a timeline item, create an item with .timeline-item in which you can change the icon used and add content and components inside the .timeline-content tag.
Business
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.
Development
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.
Marketing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.
<div class="timeline timeline-four">
<!-- Timeline Item 1 -->
<div class="timeline-item">
<div class="icon"></div>
<div class="date-content">
<div class="date-outer">
<span class="date">
<i class="far fa-money-bill-alt"></i>
<span class="year mt-1">2018-2019</span>
</span>
</div>
</div>
<div class="timeline-content">
<h5 class="title">Business</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.</p>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="timeline-item">
<div class="icon"></div>
<div class="date-content">
<div class="date-outer">
<span class="date">
<i class="far fa-lightbulb"></i>
<span class="year mt-1">2017-2018</span>
</span>
</div>
</div>
<div class="timeline-content">
<h5 class="title">Development</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.</p>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="timeline-item">
<div class="icon"></div>
<div class="date-content">
<div class="date-outer">
<span class="date">
<i class="far fa-paper-plane"></i>
<span class="year mt-1">2015-2016</span>
</span>
</div>
</div>
<div class="timeline-content">
<h5 class="title">Marketing</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.</p>
</div>
</div>
</div>
Event card timeline
These timelines have a main wrapper .timeline .timeline-five for specific styles.
You can add images inside the .img-fluid element and change content inside the .card element.
Time Schedule 1
Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores.
Time Schedule 2
Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores.
Time Schedule 3
Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores.
<!-- Timeline -->
<div class="timeline timeline-five">
<!-- Item 1 -->
<div class="row">
<!-- timeline item 1 center image & middle line -->
<div class="col-auto text-center flex-column d-none d-sm-flex">
<div class="row h-50">
<div class="col"> </div>
<div class="col"> </div>
</div>
<span class="m-3 avatar-separator">
<img class="img-fluid rounded-circle" src="../../assets/img/team/8.jpg" alt="avatar">
</span>
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
</div>
<!-- Timeline item 1 content-->
<div class="col my-4">
<div class="card shadow-sm bw-md border-primary text-primary">
<div class="card-body">
<div class="post-meta float-right">
<a class="text-primary" href="#"><i class="far fa-thumbs-up"></i>345</a>
</div>
<h5 class="card-title text-primary">Time Schedule 1</h5>
<p class="card-text">Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores. </p>
<button class="btn btn-sm btn-primary" type="button" data-target="#t1_details" data-toggle="collapse">Show Details <i class="fas fa-angle-down toggle-arrow ml-1"></i></button>
<div class="collapse" id="t1_details">
<div class="p-2 mt-3 text-monospace">
<div>08:30 - 09:00 Breakfast in Town</div>
<div>09:00 - 10:30 Attend a team meeting</div>
<div>10:30 - 10:45 Research on new technologies and tools</div>
<div>10:45 - 12:00 It’s a good idea to review the day’s work</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="row">
<!-- timeline item 2 center image & middle line -->
<div class="col-auto text-center flex-column d-none d-sm-flex">
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
<span class="m-3 avatar-separator">
<img class="img-fluid rounded-circle" src="../../assets/img/team/10.jpg" alt="avatar">
</span>
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
</div>
<!-- Timeline item 2 content -->
<div class="col my-4">
<div class="card shadow-sm bw-md border-secondary text-success">
<div class="card-body">
<div class="post-meta float-right">
<a class="text-secondary" href="#"><i class="far fa-thumbs-up"></i>515</a>
</div>
<h5 class="card-title text-secondary">Time Schedule 2</h5>
<p class="card-text">Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores. </p>
<button class="btn btn-sm btn-secondary" type="button" data-target="#t2_details" data-toggle="collapse">Show Details <i class="fas fa-angle-down toggle-arrow ml-1"></i></button>
<div class="collapse" id="t2_details">
<div class="p-2 mt-3 text-monospace">
<div>08:30 - 09:00 Breakfast in Town</div>
<div>09:00 - 10:30 Attend a team meeting</div>
<div>10:30 - 10:45 Research on new technologies and tools</div>
<div>10:45 - 12:00 It’s a good idea to review the day’s work</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="row">
<!-- timeline item 3 center image & middle line -->
<div class="col-auto text-center flex-column d-none d-sm-flex">
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
<span class="m-3 avatar-separator">
<img class="img-fluid rounded-circle" src="../../assets/img/team/9.jpg" alt="avatar">
</span>
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
</div>
<!-- Timeline item 3 content -->
<div class="col my-4">
<div class="card shadow-sm bw-md border-tertiary text-tertiary">
<div class="card-body">
<div class="post-meta float-right">
<a class="text-tertiary" href="#"><i class="far fa-thumbs-up"></i>115</a>
</div>
<h5 class="card-title text-tertiary">Time Schedule 3</h5>
<p class="card-text">Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores. </p>
<button class="btn btn-sm btn-tertiary" type="button" data-target="#t3_details" data-toggle="collapse">Show Details <i class="fas fa-angle-down toggle-arrow ml-1"></i></button>
<div class="collapse" id="t3_details">
<div class="p-2 mt-3 text-monospace">
<div>08:30 - 09:00 Breakfast in Town</div>
<div>09:00 - 10:30 Attend a team meeting</div>
<div>10:30 - 10:45 Research on new technologies and tools</div>
<div>10:45 - 12:00 It’s a good idea to review the day’s work</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of Timeline -->
Creative icon & card timelines
These timelines have the .timeline .timeline-six classes for specific classes.
Change the image inside the .avatar-separator and update the content of the .profile-card item.
Tanislav Robert
Director
I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.
Zoltan Szőgyényi
Founder
I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.
Calota Oana
Marketing
I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.
Lucian Tanislav
Sales
I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.
<div class="timeline timeline-six">
<!-- Timeline Item 1 -->
<div class="row no-gutters">
<div class="col-sm"> <!--spacer--> </div>
<!-- timeline item 1 center image & middle line -->
<div class="col-sm-1 text-center flex-column d-none d-sm-flex">
<div class="row h-50">
<div class="col"> </div>
<div class="col"> </div>
</div>
<span class="m-3 avatar-separator">
<img class="img-fluid organic-radius border-tertiary" src="../../assets/img/team/9.jpg" alt="avatar">
</span>
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
</div>
<!-- timeline profile card -->
<div class="col-sm py-2">
<div class="profile-card">
<div class="card shadow border-light">
<div class="card-body">
<h5 class="card-title">Tanislav Robert</h5>
<h6 class="card-subtitle">Director</h6>
<p class="card-text my-2">I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.</p>
<ul class="social-buttons mt-3">
<li>
<a href="#" target="_blank" class="btn btn-link btn-facebook">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-twitter">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-slack">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-dribbble">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-google-plus">
<i class="fab fa-google-plus"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-dropbox">
<i class="fab fa-dropbox"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="row no-gutters">
<!-- timeline profile card -->
<div class="col-sm py-2">
<div class="profile-card">
<div class="card shadow border-light">
<div class="card-body">
<h5 class="card-title">Zoltan Szőgyényi</h5>
<h6 class="card-subtitle">Founder</h6>
<p class="card-text my-2">I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.</p>
<ul class="social-buttons mt-3">
<li>
<a href="#" target="_blank" class="btn btn-link btn-facebook">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-twitter">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-slack">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-dribbble">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-google-plus">
<i class="fab fa-google-plus"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-dropbox">
<i class="fab fa-dropbox"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- timeline item 2 center image & middle line -->
<div class="col-sm-1 text-center flex-column d-none d-sm-flex">
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
<span class="m-3 avatar-separator">
<img class="img-fluid organic-radius border-secondary" src="../../assets/img/team/8.jpg" alt="avatar">
</span>
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
</div>
<div class="col-sm"> <!--spacer--> </div>
</div>
<!-- Timeline Item 3 -->
<div class="row no-gutters">
<div class="col-sm"> <!--spacer--> </div>
<!-- timeline item 3 center image & middle line -->
<div class="col-sm-1 text-center flex-column d-none d-sm-flex">
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
<span class="m-3 avatar-separator">
<img class="img-fluid organic-radius border-warning" src="../../assets/img/team/10.jpg" alt="avatar">
</span>
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
</div>
<!-- timeline profile card -->
<div class="col-sm py-2">
<div class="profile-card">
<div class="card shadow border-light">
<div class="card-body">
<h5 class="card-title">Calota Oana</h5>
<h6 class="card-subtitle">Marketing</h6>
<p class="card-text my-2">I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.</p>
<ul class="social-buttons mt-3">
<li>
<a href="#" target="_blank" class="btn btn-link btn-facebook">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-twitter">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-slack">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-dribbble">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-google-plus">
<i class="fab fa-google-plus"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-dropbox">
<i class="fab fa-dropbox"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Timeline Item 4 -->
<div class="row no-gutters">
<!-- timeline profile card -->
<div class="col-sm py-2">
<div class="profile-card">
<div class="card shadow border-light">
<div class="card-body">
<h5 class="card-title">Lucian Tanislav</h5>
<h6 class="card-subtitle">Sales</h6>
<p class="card-text my-2">I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.</p>
<ul class="social-buttons mt-3">
<li>
<a href="#" target="_blank" class="btn btn-link btn-facebook">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-twitter">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-slack">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-dribbble">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-google-plus">
<i class="fab fa-google-plus"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-dropbox">
<i class="fab fa-dropbox"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- timeline item 4 center image & middle line -->
<div class="col-sm-1 text-center flex-column d-none d-sm-flex">
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
<span class="m-3 avatar-separator">
<img class="img-fluid organic-radius border-info" src="../../assets/img/team/6.jpg" alt="avatar">
</span>
<div class="row h-50">
<div class="col"> </div>
<div class="col"> </div>
</div>
</div>
<div class="col-sm"> <!--spacer--> </div>
</div>
</div>