<section class="position-relative pt-36 lg:pb-14 bg-secondary overflow-hidden">
<img class="position-absolute top-0 start-50 translate-middle-x" src="gradia-assets/elements/cta/radial.png" alt="">
<div class="position-relative container" style="z-index: 50;">
<div class="row mb-12">
<div class="col-12 col-xl-6">
<div class="mw-xl-xl">
<h1 class="fs-10 mb-6 text-white lh-sm">Get maximum results from all projects.</h1>
<p class="fs-17 text-white mb-20">Amet minim mollit non deserunt ullamco est sit aliqua.</p>
<button class="btn btn-primary text-uppercase px-6 mb-11" type="button" style="letter-spacing: 1px;">Connect Now</button>
<ul class="list-group-flush p-0 m-n2">
<li class="d-inline-flex align-items-center p-2 fw-semibold list-group-item bg-transparent text-white border-0">
<svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="11" r="11" fill="#3F3F46"></circle>
<path d="M6.7959 11.6006L9.1982 14.0029L15.2039 7.99713" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="mb-0">No hidden fees</p>
</li>
<li class="d-inline-flex align-items-center p-2 fw-semibold list-group-item bg-transparent text-white border-0">
<svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="11" r="11" fill="#3F3F46"></circle>
<path d="M6.7959 11.6006L9.1982 14.0029L15.2039 7.99713" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="mb-0">Start with a free account</p>
</li>
<li class="d-inline-flex align-items-center p-2 fw-semibold list-group-item bg-transparent text-white border-0">
<svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="11" r="11" fill="#3F3F46"></circle>
<path d="M6.7959 11.6006L9.1982 14.0029L15.2039 7.99713" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="mb-0">Edit online, no software needed</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="d-flex px-3 px-xl-0 position-xl-absolute end-0 bottom-0 mw-xl-xl mw-xxl-none">
<img class="img-fluid mx-auto" src="gradia-assets/images/cta/screen.png" alt="">
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- Alert 85
- Application 58
- Banners 15
- Blog 84
- Call to action 99
- Careers 8
- Contact 42
- Content 62
- Cookies 48
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 49
- Features 140
- Footers 58
- Graphs 18
- HTTP codes 55
- Hero section 96
- How it works 46
- Logo clouds 80
- Modals 6
- Navbar 68
- Navigation (horizontal) 97
- Navigation (vertical) 6
- Newsletter 49
- Portfolio 39
- Pricing 47
- Projects 9
- Reviews 5
- Rich text 3
- Sign in / Sign up 81
- Stats 84
- Tables 57
- Team 46
- Testimonials 46
- Users 25
Effectively collecting contacts is the goal of most sites. A well thought out Bootstrap call to action component section must clearly define the path objective and the data collection goal.
Choose from many variations of Bootstrap components call to action. 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. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Bootstrap components call to action, code and our editor. Try the demo for free.
