<section class="position-fixed bottom-0 start-0 bg-secondary-dark bg-opacity-50 h-100 w-100 overflow-auto" style="z-index: 50;">
<div class="d-flex flex-wrap align-items-center h-100">
<div class="container py-10">
<div class="mw-2xl mx-auto bg-white overflow-hidden rounded">
<div class="position-relative">
<img class="img-fluid w-100" src="flex-assets/images/modals/modal.png" alt="">
<div class="position-absolute bottom-0 start-50 translate-middle-x w-100 p-6">
<div class="row justify-content-end">
<div class="col-12 col-md-6">
<div class="row align-items-center justify-content-between g-2">
<div class="col-auto">
<div class="row g-3">
<div class="col-auto"><a class="d-inline-block rounded-pill bg-white" style="width: 12px; height: 12px;" href="#"></a></div>
<div class="col-auto"><a class="d-inline-block rounded-pill bg-success" style="width: 12px; height: 12px;" href="#"></a></div>
<div class="col-auto"><a class="d-inline-block rounded-pill bg-white" style="width: 12px; height: 12px;" href="#"></a></div>
</div>
</div>
<div class="col-auto"><a class="btn btn-lg btn-warning fs-12 py-2 px-4 w-100 text-success-light shadow" href="#">For free</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 border-end border-light">
<div class="p-8 ps-md-10 py-md-10">
<h3 class="font-heading fw-semibold fs-9 text-light-dark mb-2">Milk and honey</h3>
<p class="fs-12 fw-medium text-secondary mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa.</p>
<a class="d-flex flex-wrap align-items-center text-success link-success" href="#">
<span class="me-2 fw-medium">Learn More</span>
<svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.71 12.71C15.801 12.6149 15.8724 12.5028 15.92 12.38C16.02 12.1365 16.02 11.8635 15.92 11.62C15.8724 11.4972 15.801 11.3851 15.71 11.29L12.71 8.29C12.5217 8.1017 12.2663 7.99591 12 7.99591C11.7337 7.99591 11.4783 8.1017 11.29 8.29C11.1017 8.4783 10.9959 8.7337 10.9959 9C10.9959 9.2663 11.1017 9.5217 11.29 9.71L12.59 11L9 11C8.73479 11 8.48043 11.1054 8.2929 11.2929C8.10536 11.4804 8 11.7348 8 12C8 12.2652 8.10536 12.5196 8.2929 12.7071C8.48043 12.8946 8.73479 13 9 13L12.59 13L11.29 14.29C11.1963 14.383 11.1219 14.4936 11.0711 14.6154C11.0203 14.7373 10.9942 14.868 10.9942 15C10.9942 15.132 11.0203 15.2627 11.0711 15.3846C11.1219 15.5064 11.1963 15.617 11.29 15.71C11.383 15.8037 11.4936 15.8781 11.6154 15.9289C11.7373 15.9797 11.868 16.0058 12 16.0058C12.132 16.0058 12.2627 15.9797 12.3846 15.9289C12.5064 15.8781 12.617 15.8037 12.71 15.71L15.71 12.71ZM22 12C22 10.0222 21.4135 8.08879 20.3147 6.4443C19.2159 4.79981 17.6541 3.51808 15.8268 2.7612C13.9996 2.00433 11.9889 1.80629 10.0491 2.19215C8.10929 2.578 6.32746 3.53041 4.92894 4.92893C3.53041 6.32746 2.578 8.10929 2.19215 10.0491C1.8063 11.9889 2.00433 13.9996 2.76121 15.8268C3.51809 17.6541 4.79981 19.2159 6.4443 20.3147C8.08879 21.4135 10.0222 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C19.9997 18.1425 20.7363 17.0401 21.2388 15.8268C21.7413 14.6136 22 13.3132 22 12ZM4 12C4 10.4177 4.4692 8.87103 5.34825 7.55544C6.2273 6.23985 7.47673 5.21446 8.93854 4.60896C10.4003 4.00346 12.0089 3.84504 13.5607 4.15372C15.1126 4.4624 16.538 5.22433 17.6569 6.34315C18.7757 7.46197 19.5376 8.88743 19.8463 10.4393C20.155 11.9911 19.9965 13.5997 19.391 15.0615C18.7855 16.5233 17.7602 17.7727 16.4446 18.6518C15.129 19.5308 13.5823 20 12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84286 16.1566 4 14.1217 4 12Z" fill="currentColor"></path>
</svg>
</a>
</div>
</div>
<div class="col-12 col-md-6">
<div class="d-flex flex-column justify-content-between p-8 pt-md-6 pb-md-10 h-100">
<div class="mb-6">
<div class="mb-3 row justify-content-between g-2">
<div class="col-auto">
<p class="mb-0 fs-12 text-secondary fw-medium">Size</p>
</div>
<div class="col-auto">
<p class="mb-0 fs-12 text-secondary-dark fw-medium">2.5 MB</p>
</div>
</div>
<div class="mb-3 row justify-content-between g-2">
<div class="col-auto">
<p class="mb-0 fs-12 text-secondary fw-medium">Lenght</p>
</div>
<div class="col-auto">
<p class="mb-0 fs-12 text-secondary-dark fw-medium">88 Pages</p>
</div>
</div>
<div class="row justify-content-between g-2">
<div class="col-auto">
<p class="mb-0 fs-12 text-secondary fw-medium">Last Update</p>
</div>
<div class="col-auto">
<p class="mb-0 fs-12 text-secondary-dark fw-medium">12 Days ago</p>
</div>
</div>
</div>
<a class="btn btn-lg btn-success fs-11 py-3 w-100 text-success-light shadow" href="#">Download PDF</a>
</div>
</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
Communicate to your users the need to take an action or confirm an action. Bootstrap modals components will allow you to easily convey the message you want.
Browse and choose one variant from Bootstrap components modals. They are UI library components created by our talented designers and coded by our development team. Don't forget to take a look at alerts and banners sections - you'll find other components with similar purpose there.
Buy a subscription to get access to the drag and drop editor, all UI libraries and code under each component.
