Free Animated Bootstrap Modal and Popups — a free Bootstrap 5 modal snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
1<link rel='stylesheet' href='https://d33wubrfki0l68.cloudfront.net/css/68818763319cf667ed141dc03e654e8db3424772/assets/css/animate.min.css'/>
2<link href="https://fonts.googleapis.com/css?family=Work+Sans:600" rel="stylesheet">
3<link href="https://fonts.googleapis.com/css?family=Overpass:300,400,600,700,800,900" rel="stylesheet">
4
5<header class="text-white" style="background-color: #28304e">
6 <div class="container">
7 <div class="row m-h-100">
8 <div class="col-md-6 my-auto">
9 <h1 class="display-4 animated bounceIn font-worksans">Modal Animation using Animate.css</h1>
10 <p class="animated fadeIn">You can use animate.css to create awesome animations for modal just add .animated with .animation-name to .modal-dialog </p>
11 <p><a href="#" data-bs-toggle="modal" data-bs-target="#demoModal" class="btn animated fadeIn btn-cta btn-cstm-light">open modal</a></p>
12 </div>
13 <div class="text-center m-auto col-md-6 animated zoomIn">
14 <p>
15 <img class="mw-100" src="https://d33wubrfki0l68.cloudfront.net/45878c3fb0aed0317f92b2c2a5c9b708c52905e0/c0bcf/assets/img/cherry-done.png" alt="">
16 </p>
17 </div>
18 </div>
19 </div>
20</header>
21<!-- Modal -->
22<div class="modal fade auto-off" id="demoModal" tabindex="-1" role="dialog"
23 aria-labelledby="demoModal" aria-hidden="true">
24 <div class="modal-dialog animated zoomInDown modal-dialog-centered" role="document">
25 <div class="modal-content">
26
27 <div class="container-fluid">
28 <button type="button" class="close" data-bs-dismiss="modal"
29 aria-label="Close">
30 <span aria-hidden="true">×</span>
31 </button>
32 <div class="row">
33 <div class="col-md-12 m-h-20 bg-img rounded-start" style="background-image: url('https://images.unsplash.com/photo-1525097596740-cb2a70e07e3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80')"></div>
34 <div class="col-md-12 text-center py-5 px-sm-5 ">
35 <h2>Animated Modal using animate.css</h2>
36 <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
37 <form>
38 <button type="submit" class="btn btn-cstm-dark w-100 btn-cta" data-bs-dismiss="modal" aria-label="Close">btn-close modal</button>
39 </form>
40 </div>
41 </div>
42 </div>
43 </div>
44 </div>
45</div>
46<!-- Modal Ends -->
47
48
Bootstrap Delete Confirmation Modal snippet
Bootstrap Delete Confirmation Modal snippet — a free Bootstrap 5 modal snippet. Copy the HTML and paste straight into your Bootstrap 5 project.
Bootstrap Simple Success Confirmation Popup snippet
Free Bootstrap 5 modal snippet — Bootstrap Simple Success Confirmation Popup snippet. Preview, copy HTML, drop it into any Bootstrap 5 project.
Bootstrap 5 customer ratings modal snippets with emojis
Add a modal to your UI with Bootstrap 5 customer ratings modal snippets with emojis. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
48
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.