<section class="position-relative pt-20 pb-xl-32 bg-black overflow-hidden">
<div class="container mb-16 mb-xl-0">
<div class="row">
<div class="col-12 col-xl-6">
<h2 class="fs-10 text-white mb-16">Three steps to get started</h2>
<div class="row mb-12">
<div class="col-auto">
<div class="d-inline-block rounded-pill" style="width:50px; height:50px; padding: 1px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
<div class="d-flex align-items-center justify-content-center bg-black w-100 h-100 rounded-pill">
<h3 class="fs-16 fw-medium text-white mb-0">1</h3>
</div>
</div>
</div>
<div class="col col-md-6">
<h3 class="fs-16 fw-medium text-white mb-4">Create A Free Account</h3>
<p class="text-secondary-light mb-0">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
</div>
</div>
<div class="row mb-12">
<div class="col-auto">
<div class="d-inline-block rounded-pill" style="width:50px; height:50px; padding: 1px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
<div class="d-flex align-items-center justify-content-center bg-black w-100 h-100 rounded-pill">
<h3 class="fs-16 fw-medium text-white mb-0">2</h3>
</div>
</div>
</div>
<div class="col col-md-6">
<h3 class="fs-16 fw-medium text-white mb-4">Select Your Package</h3>
<p class="text-secondary-light mb-0">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
</div>
</div>
<div class="row">
<div class="col-auto">
<div class="d-inline-block rounded-pill" style="width:50px; height:50px; padding: 1px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
<div class="d-flex align-items-center justify-content-center bg-black w-100 h-100 rounded-pill">
<h3 class="fs-16 fw-medium text-white mb-0">3</h3>
</div>
</div>
</div>
<div class="col col-md-6">
<h3 class="fs-16 fw-medium text-white mb-4">Grow Business Fast</h3>
<p class="text-secondary-light mb-11">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
<button class="btn btn-light-light fs-20 px-11 py-4 text-uppercase border-0" type="button" style="letter-spacing: 1px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">Get Started now</button>
</div>
</div>
</div>
</div>
</div>
<div class="ps-4 pl-xl-0 position-xl-absolute end-0 bottom-0">
<div class="position-relative d-flex justify-content-end">
<img class="img-fluid" src="gradia-assets/images/how-it-works/dashboard.png" alt="">
<div class="d-none d-xl-block position-absolute w-100" style="background: linear-gradient(98.24deg, #6CD5F7 0%, #F89D5C 50.52%, #5B6AF0 100%); height: 64px; top: -64px; left: 120px; border-top-left-radius: 25px; "></div>
</div>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- Alert 85
- Application 53
- Banners 15
- Blog 56
- Call to action 95
- Careers 4
- Contact 38
- Content 59
- Cookies 41
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 43
- Features 132
- Footers 53
- Graphs 18
- HTTP codes 48
- Hero section 91
- How it works 43
- Logo clouds 72
- Modals 3
- Navbar 68
- Navigation (horizontal) 92
- Navigation (vertical) 6
- Newsletter 45
- Portfolio 39
- Pricing 43
- Projects 9
- Reviews 5
- Sign in / Sign up 71
- Stats 76
- Tables 57
- Team 41
- Testimonials 41
- 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.
