How to use popovers in Bootstrap 5.1.3 — a free Bootstrap 5 modal snippet. Copy the HTML & JS and paste straight into your Bootstrap 5 project.
1
2<!DOCTYPE html>
3<html lang="pt-br" dir="ltr">
4
5<head>
6 <meta charset="utf-8">
7 <title></title>
8 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
9<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
10
11</head>
12
13<body>
14 <!-- by https://hostcwb.com.br/tutoriais/post/como-utilizar-popovers-no-bootstrap-5 -->
15 <div class="container mt-3 pt-3">
16 <div class="row g-3">
17 <div class="col-12 col-md-4">
18 <div class=" btn-secondary h-100 p-3">
19 <button type="button" class="btn btn-secondary w-100 p-3 fs-1" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="custom-popover" data-bs-title="Custom popover"
20 data-bs-content="This popover is themed via CSS variables.">
21 popover right
22 </button>
23 </div>
24 </div>
25
26 <div class="col-12 col-md-4">
27 <div class="bg-primary h-100 p-3">
28 <button type="button" class="btn w-100 h100 btn-primary p-3 fs-1" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-custom-class="custom-popover" data-bs-title="Custom popover"
29 data-bs-content="This popover is themed via CSS variables.">
30 popover bottom
31 </button>
32 </div>
33 </div>
34
35 <div class="col-12 col-md-4">
36 <div class="btn-warning h-100 p-3">
37 <button type="button" class="btn btn-warning w-100 p-3 fs-1" data-bs-toggle="popover" data-bs-placement="left" data-bs-custom-class="custom-popover" data-bs-title="Custom popover"
38 data-bs-content="This popover is themed via CSS variables.">
39 popover left
40 </button>
41 </div>
42 </div>
43
44 <div class="col-12">
45 <div class="btn-dark h-100 p-3">
46 <button type="button" class="btn btn-dark w-100 p-3 fs-1" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="custom-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables.">
47 popover top
48 </button>
49 </div>
50 </div>
51
52 </div>
53 </div>
54 <script type="text/javascript">
55 var popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
56 var popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl, {
57 trigger: 'focus'
58 }))
59 </script>
60</body>
61
62</html>
63
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
57
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.