<section class="position-relative pt-24 pt-xxl-64 bg-light overflow-hidden">
<div class="position-relative ms-2 ms-md-10 bg-dark-light">
<img class="d-none d-xl-block position-absolute top-0 start-0 img-fluid" style="z-index: 1;" src="wrexa-assets/images/work-office.png" alt="">
<img class="d-none d-xxl-block position-absolute top-50 end-0 img-fluid translate-middle-y" src="wrexa-assets/images/women-photo2.png" alt="">
<img class="d-none d-md-block d-xxl-none position-absolute bottom-0 end-0 img-fluid" src="wrexa-assets/images/women-photo2.png" alt="">
<div class="position-relative container">
<img class="d-none d-xxl-block position-absolute top-0 end-0 mt-xl-n24 mt-xxl-n64 img-fluid" src="wrexa-assets/images/women-photo1.png" alt="">
<img class="d-none d-md-block d-xxl-none position-absolute top-0 end-0 mt-n32 img-fluid" style="max-width: 200px;" src="wrexa-assets/images/women-photo1.png" alt="">
<div class="row ms-1 ms-md-6">
<div class="d-xl-none d-block col-12 col-xl-4 h-100 border-start">
<img class="d-block mx-auto img-fluid" src="wrexa-assets/images/work-office.png" alt="">
</div>
<div class="col-12 col-xl-7 col-xxl-9 ms-auto border-start">
<div class="mw-lg pt-24 pt-xl-52 pb-24 mx-auto">
<h1 class="display-3 text-white mb-10">What you need, when you need it</h1>
<p class="text-secondary mb-14 lh-lg">The pond cras ornare, some chords for a three moments, like a sense of truth that comes from within.</p>
<div class="ps-md-12 mb-24">
<div class="d-flex mb-3 align-items-center">
<svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
<span class="ms-8 h6 text-white mb-0">One platform for you</span>
</div>
<div class="d-flex mb-3 align-items-center">
<svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
<span class="ms-8 h6 text-white mb-0">Integrations</span>
</div>
<div class="d-flex align-items-center">
<svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
<span class="ms-8 h6 text-white mb-0">Workflow builder</span>
</div>
</div>
<a class="btn btn-primary" href="#">Discover Now</a>
</div>
</div>
</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
Content makes the page. In our Bootstrap content components, we provide you with many possible variations of content presentation. Regardless of its type and length, you'll find a way to show what's important to your audience.
Browse the Bootstrap navigation component variants available in our editor. Under each of them is clear code that you can easily edit. Components are sorted by UI libraries, which consist of many other elements in the same style. Each of these libraries was created by our talented designers to allow you to create diverse and pretty pages.
See all variations of Bootstrap navigation components and the code underneath them in Shuffle Editor.
