Because sometimes we need text here, isn't it?
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
Because sometimes we need text here, isn't it?
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
<!-- Bullets : Filled -->
<div class="timeline-container">
<h2 class="h4 font-weight-normal timeline-title border-secondary mb-5 pt-2 pb-2">
High quality oriented
<small class="d-block text-muted fs--15">
built from scratch on top of bootstrap
</small>
</h2>
<div class="d-flex mb-4">
<i class="badge badge-danger rounded-circle shadow-danger-md animate-pulse"></i>
<div class="w--120 mx-1 flex-none font-weight-bold">
<span class="badge badge-danger badge-soft badge-pill fs--18">11:40</span>
</div>
<div class="flex-grow-1 lead">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
</div>
<div class="d-flex mb-4">
<i class="badge badge-warning rounded-circle"></i>
<div class="w--120 mx-1 flex-none font-weight-bold fs--18">
<span class="badge badge-warning badge-soft badge-pill fs--18">11:40</span>
</div>
<div class="flex-grow-1 lead">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
</div>
<div class="d-flex mb-4">
<i class="badge badge-secondary rounded-circle"></i>
<div class="w--120 mx-1 flex-none flex-none">
<p class="w--90 fs--14 text-break">
Because sometimes we need text here, isn't it?
</p>
</div>
<div class="flex-grow-1 lead">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
</div>
<div class="d-flex mb-4">
<i class="badge badge-primary rounded-circle"></i>
<div class="w--120 mx-1 flex-none font-weight-bold fs--18">
<span class="badge badge-light badge-pill fs--18">11:40</span>
</div>
<div class="flex-grow-1 lead">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
</div>
<p class="timeline-content">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</p>
</div>
<!-- Bullets : Circle -->
<div class="timeline-container">
<h2 class="h4 font-weight-normal timeline-title border-danger mb-5 pt-2 pb-2">
High quality oriented
<small class="d-block text-muted fs--15">
built from scratch on top of bootstrap
</small>
</h2>
<div class="d-flex mb-4">
<i class="badge bg-white border-danger rounded-circle shadow-danger-md animate-pulse"></i>
<div class="w--120 mx-1 flex-none font-weight-bold fs--18">11:40</div>
<div class="flex-grow-1 lead">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
</div>
<div class="d-flex mb-4">
<i class="badge bg-white border-warning rounded-circle"></i>
<div class="w--120 mx-1 flex-none font-weight-bold fs--18">11:40</div>
<div class="flex-grow-1 lead">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
</div>
<div class="d-flex mb-4">
<i class="badge bg-white border-success rounded-circle"></i>
<div class="w--120 mx-1 flex-none flex-none">
<p class="w--90 fs--14 text-break">
Because sometimes we need text here, isn't it?
</p>
</div>
<div class="flex-grow-1 lead">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
</div>
<div class="d-flex mb-4">
<i class="badge bg-white border-primary rounded-circle"></i>
<div class="w--120 mx-1 flex-none font-weight-bold fs--18">11:40</div>
<div class="flex-grow-1 lead">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
</div>
<p class="timeline-content">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</p>
</div>
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
Smarty is for your business!
Did you now that Smarty is modular?
Modern and lightweight, nothing less!
Advanced Gulp microframework included!
Before and after before was Smarty!
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
<!-- Timeline : Inverted -->
<div class="timeline-container timeline-invert">
<h2 class="h4 font-weight-normal timeline-title border-secondary mb-5 pt-2 pb-2 text-align-end">
High quality oriented
<small class="d-block text-muted fs--15">
built from scratch on top of bootstrap
</small>
</h2>
<div class="d-flex mb-4">
<i class="badge badge-danger rounded-circle"></i>
<div class="flex-grow-1 lead">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
<div class="w--120 mx-1 flex-none font-weight-bold fs--18 text-align-end">11:40</div>
</div>
<div class="d-flex mb-4">
<i class="badge badge-warning rounded-circle"></i>
<div class="flex-grow-1 lead">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
<div class="w--120 mx-1 flex-none font-weight-bold fs--18 text-align-end">11:40</div>
</div>
<div class="d-flex mb-4">
<i class="badge badge-success rounded-circle"></i>
<div class="flex-grow-1 lead">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
<div class="w--120 mx-1 flex-none font-weight-bold fs--18 text-align-end">11:40</div>
</div>
<div class="d-flex mb-4">
<i class="badge badge-primary rounded-circle"></i>
<div class="flex-grow-1 lead">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
<div class="w--120 mx-1 flex-none font-weight-bold fs--18 text-align-end">11:40</div>
</div>
<p class="timeline-content">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</p>
</div>
<!-- Timeline : Styled -->
<div class="timeline-container">
<h2 class="h4 font-weight-normal timeline-title border-danger mb-5 pt-2 pb-2">
High quality oriented
<small class="d-block text-muted fs--15">
built from scratch on top of bootstrap
</small>
</h2>
<div class="d-flex mb-4">
<i class="badge bg-white border-dark rounded-circle mt-2"></i>
<div class="w--120 mx-1 flex-none">
<p class="w--90 fs--14 text-break">
<b>Smarty</b> is for your business!
</p>
</div>
<div class="flex-grow-1 lead bg-light p--15 position-relative transition-hover-end transition-all-ease-250">
<i class="arrow arrow-start border-light mt-2"></i>
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra. <a href="#!" class="link-muted">Read more</a>
</div>
</div>
<div class="d-flex mb-4">
<i class="badge bg-white border-primary rounded-circle mt-2"></i>
<div class="w--120 mx-1 flex-none">
<p class="w--90 fs--14 text-break">
Did you now that Smarty is modular?
</p>
</div>
<div class="flex-grow-1 lead bg-primary-soft p--15 position-relative transition-hover-end transition-all-ease-250">
<i class="arrow arrow-start border-primary-soft mt-2"></i>
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
</div>
<div class="d-flex mb-4">
<i class="badge bg-white border-success rounded-circle mt-2"></i>
<div class="w--120 mx-1 flex-none">
<p class="w--90 fs--14 text-break">
Modern and lightweight, nothing less!
</p>
</div>
<div class="flex-grow-1 lead bg-success-soft p--15 position-relative transition-hover-end transition-all-ease-250">
<i class="arrow arrow-start border-success-soft mt-2"></i>
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
</div>
<div class="d-flex mb-4">
<i class="badge bg-white border-warning rounded-circle mt-2"></i>
<div class="w--120 mx-1 flex-none">
<p class="w--90 fs--14 text-break">
Advanced Gulp microframework included!
</p>
</div>
<div class="flex-grow-1 lead bg-warning-soft p--15 position-relative transition-hover-end transition-all-ease-250">
<i class="arrow arrow-start border-warning-soft mt-2"></i>
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
</div>
<div class="d-flex mb-4">
<i class="badge bg-white border-danger rounded-circle mt-2"></i>
<div class="w--120 mx-1 flex-none">
<p class="w--90 fs--14 text-break">
Before and after before was Smarty!
</p>
</div>
<div class="flex-grow-1 lead bg-danger-soft p--15 position-relative transition-hover-end transition-all-ease-250">
<i class="arrow arrow-start border-danger-soft mt-2"></i>
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</div>
</div>
<p class="timeline-content">
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
</p>
</div>