<section class="py-12 py-sm-24 pb-md-32">
<div class="container">
<div class="mw-xs mw-sm-2xl mx-auto mw-lg-none">
<h3 class="mw-md mw-lg-lg mb-24" >We make things easy for your business</h3>
<div class="row">
<div class="col-12 col-sm-6 col-lg-3 mb-12 mb-lg-0 position-relative">
<div class="d-none d-sm-block position-absolute top-0 start-0 ms-12 w-100 bg-light-dark bg-opacity-50 mt-6" style="height: 1px;"></div>
<div class="mw-xs pe-10 overflow-hidden position-relative">
<div class="d-inline-flex px-4 bg-white rounded-pill">
<div class="d-flex mb-7 align-items-center justify-content-center fs-5 fw-bold bg-primary-light rounded-pill" style="width: 54px; height: 54px;"><span >1</span></div>
</div>
<p class="fs-6 fw-semibold" >A complete UI kit for building your business</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-12 mb-lg-0 position-relative">
<div class="d-none d-lg-block position-absolute top-0 start-0 ms-12 w-100 bg-light-dark bg-opacity-50 mt-6" style="height: 1px;"></div>
<div class="mw-xs pe-10 overflow-hidden position-relative">
<!-- <div class="d-block d-sm-none d-lg-block position-absolute top-0 start-0 ms-20 w-100 bg-light-dark bg-opacity-50 mt-6" style="height: 1px;"></div>-->
<div class="d-inline-flex px-4 bg-white rounded-pill">
<div class="position-relative d-flex mb-7 align-items-center justify-content-center fs-5 text-white fw-bold bg-primary rounded-pill" style="width: 54px; height: 54px;"><img class="position-absolute top-0 start-0" src="flaro-assets/images/how-it-works/gradient.svg" alt=""/><span class="position-relative" >2</span></div>
</div>
<p class="fs-6 fw-semibold" >A complete UI kit for building your business</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 mb-12 mb-sm-0 position-relative">
<div class="d-none d-sm-block position-absolute top-0 start-0 ms-12 w-100 bg-light-dark bg-opacity-50 mt-6" style="height: 1px;"></div>
<div class="mw-xs pe-10 overflow-hidden position-relative">
<div class="d-inline-flex px-4 bg-white rounded-pill">
<div class="d-flex mb-7 align-items-center justify-content-center fs-5 fw-bold bg-primary-light rounded-pill" style="width: 54px; height: 54px;"><span >3</span></div>
</div>
<p class="fs-6 fw-semibold" >A complete UI kit for building your business</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="mw-xs pe-10 overflow-hidden position-relative">
<div class="d-inline-flex px-4 bg-white rounded-pill">
<div class="d-flex mb-7 align-items-center justify-content-center fs-5 fw-bold bg-primary-light rounded-pill" style="width: 54px; height: 54px;"><span >4</span></div>
</div>
<p class="fs-6 fw-semibold" >A complete UI kit for building your business</p>
</div>
</div>
</div>
</div>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- About us 5
- Alert 85
- Application 63
- Banners 15
- Blog 93
- Breadcrumbs 4
- Call to action 113
- Careers 16
- Contact 52
- Content 62
- Cookies 53
- Download 5
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 58
- Features 160
- Footers 68
- Graphs 18
- HTTP codes 65
- Hero section 106
- How it works 53
- Logo clouds 89
- Modals 6
- Navbar 68
- Navigation (horizontal) 107
- Navigation (vertical) 6
- Newsletter 58
- Portfolio 39
- Pricing 58
- Projects 14
- Reviews 5
- Rich text 3
- Services 5
- Sign in / Sign up 99
- Stats 89
- Tables 57
- Team 56
- Testimonials 58
- Toasts 6
- Users 25
Show your workflow and the way you operate with Bootstrap how it works components. This will help you explain the important steps of the company or department process.
Choose from many variations of Bootstrap components how it works section. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Bootstrap website template. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Bootstrap components how it works sections, code and our editor. Try the demo for free.
