Timeline
Smarty custom timeline
https://getbootstrap.com/docs/5.1/components/alerts/Timeline Simple
-
Simple Timeline
-
Simple is more?
Tue Nov 10, 2022No, is not! Two different words, two different meanings! At least, we invented words to comunicate and messed up our brain - we can't think without words! Is there thinking without words, or is there a complete perception without words? Our brain is cought in a network of words, always describing in our mind what we do, what we see, etc! Can such a brain be creative when is always running in the same old, same circle, same known defined by words? What if our brain is fighting to be free of words, and might be the reason why our mind is flooded by words, conflicts, fragmentation? Looks like a battle, isn't it? WHY?
read more -
What is simple?
Tue Nov 10, 2022- Simple is not more!
- More is not simple!
- Simple is simple and more is more!
- Simple might be: I don't know what I don't know!
- Simple is not: I know that I don't know what I don't know!
-
Bootstrap 5
Tue Nov 10, 2022Of course!
<ul class="sow-timeline">
<li>
<h3 class="mb-5">
Simple Timeline
</h3>
</li>
<li class="pb-5">
<h4 class="sow-timeline-title fw-light mb-0 position-relative d-flex align-items-center">
Simple is more?
</h4>
<small class="text-muted">Tue Nov 10, 2022</small>
<div class="mt-4">
<p>
No, is not! Two different words, two different meanings!
At least, we invented words to comunicate and messed up our brain - we can't think without words!
Is there thinking without words, or is there a complete perception without words?
Our brain is cought in a network of words, always describing in our mind what we do, what we see, etc!
Can such a brain be creative when is always running in the same old, same circle, same known defined by words?
What if our brain is fighting to be free of words, and might be the reason why our mind is flooded by words, conflicts, fragmentation?
Looks like a battle, isn't it? WHY?
</p>
<a href="#!" class="text-dashed">read more</a>
</div>
</li>
<li class="pb-5">
<h4 class="sow-timeline-title fw-light mb-0 position-relative d-flex align-items-center">
What is simple?
</h4>
<small class="text-muted">Tue Nov 10, 2022</small>
<div class="mt-4">
<ul>
<li>Simple is not more!</li>
<li>More is not simple!</li>
<li>Simple is simple and more is more!</li>
<li>Simple might be: I don't know what I don't know!</li>
<li>Simple is not: I know that I don't know what I don't know!</li>
</ul>
</div>
</li>
<li class="pb-5">
<h4 class="sow-timeline-title fw-light mb-0 position-relative d-flex align-items-center">
Bootstrap 5
</h4>
<small class="text-muted">Tue Nov 10, 2022</small>
<div class="mt-4">
<p class="mb-0">
<b>Of course!</b>
</p>
</div>
</li>
</ul>
Timeline Bullets
High quality oriented built from scratch on top of bootstrap
11:40
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
11:40
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.
11:40
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
High quality oriented built from scratch on top of bootstrap
11:40
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
11:40
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.
11:40
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
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 fw-normal timeline-title border-secondary mb-5 py-2">
High quality oriented
<small class="d-block text-muted fs-6">
built from scratch on top of bootstrap
</small>
</h2>
<div class="d-flex mb-4">
<i class="badge bg-danger rounded-circle shadow-danger-md animate-pulse"></i>
<div style="width:120px" class=" mx-1 flex-none fw-bold">
<span class="badge bg-danger-soft rounded-pill fs-6">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 bg-warning rounded-circle"></i>
<div style="width:120px" class=" mx-1 flex-none fw-bold fs-6">
<span class="badge bg-warning-soft rounded-pill fs-6">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 bg-secondary rounded-circle"></i>
<div style="width:120px" class=" mx-1 flex-none flex-none">
<p class="small text-break" style="width:90px">
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-primary rounded-circle"></i>
<div style="width:120px" class=" mx-1 flex-none fw-bold fs-6">
<span class="badge bg-light text-dark rounded-pill fs-6">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 fw-normal timeline-title border-danger mb-5 py-2">
High quality oriented
<small class="d-block text-muted fs-6">
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 style="width:120px" class=" mx-1 flex-none fw-bold fs-6">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 style="width:120px" class=" mx-1 flex-none fw-bold fs-6">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 style="width:120px" class=" mx-1 flex-none flex-none">
<p class="small text-break" style="width:90px">
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 style="width:120px" class=" mx-1 flex-none fw-bold fs-6">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>
Timeline Variations
High quality oriented built from scratch on top of bootstrap
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
11:40
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
11:40
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
11:40
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
11:40
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
High quality oriented built from scratch on top of bootstrap
Smarty is for your business!
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra. Read more
Did you now that Smarty is modular?
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
Modern and lightweight, nothing less!
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
Advanced Gulp microframework included!
Elit eget gravida cum sociis natoque penatibus. Feugiat scelerisque varius morbi enim nunc faucibus. Rhoncus mattis rhoncus urna neque viverra.
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.
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 fw-normal timeline-title border-secondary mb-5 py-2 text-align-end">
High quality oriented
<small class="d-block text-muted fs-6">
built from scratch on top of bootstrap
</small>
</h2>
<div class="d-flex mb-4">
<i class="badge bg-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 style="width:120px" class="mx-1 flex-none fw-bold fs-6 text-align-end">11:40</div>
</div>
<div class="d-flex mb-4">
<i class="badge bg-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 style="width:120px" class="mx-1 flex-none fw-bold fs-6 text-align-end">11:40</div>
</div>
<div class="d-flex mb-4">
<i class="badge bg-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 style="width:120px" class="mx-1 flex-none fw-bold fs-6 text-align-end">11:40</div>
</div>
<div class="d-flex mb-4">
<i class="badge bg-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 style="width:120px" class="mx-1 flex-none fw-bold fs-6 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 fw-normal timeline-title border-danger mb-5 py-2">
High quality oriented
<small class="d-block text-muted fs-6">
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 style="width:120px" class=" mx-1 flex-none">
<p class="small text-break" style="width:90px">
<b>Smarty</b> is for your business!
</p>
</div>
<div class="flex-grow-1 lead bg-light p-3 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 style="width:120px" class=" mx-1 flex-none">
<p class="small text-break" style="width:90px">
Did you now that Smarty is modular?
</p>
</div>
<div class="flex-grow-1 lead bg-primary-soft p-3 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 style="width:120px" class=" mx-1 flex-none">
<p class="small text-break" style="width:90px">
Modern and lightweight, nothing less!
</p>
</div>
<div class="flex-grow-1 lead bg-success-soft p-3 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 style="width:120px" class=" mx-1 flex-none">
<p class="small text-break" style="width:90px">
Advanced Gulp microframework included!
</p>
</div>
<div class="flex-grow-1 lead bg-warning-soft p-3 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 style="width:120px" class=" mx-1 flex-none">
<p class="small text-break" style="width:90px">
Before and after before was Smarty!
</p>
</div>
<div class="flex-grow-1 lead bg-danger-soft p-3 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>