Modals Bootstrap 5Free+ CSS+ JS
Free Bootstrap 5 modal snippet — Bootstrap social shares modal snippets with link copy. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.
5.8k views133 downloads
gosnippets.com/preview/bootstrap-social-shares-modal-snippets-with-link-copy
Source Code
1<div class='container d-flex justify-content-center mt-100'> <button type="button" class="btn btn-primary mx-auto" data-bs-toggle="modal" data-bs-target="#exampleModal"> Share on social d-flex </button> </div>
2<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
3 <div class="modal-dialog" role="document">
4 <div class="modal-content col-12">
5 <div class="modal-header">
6 <h5 class="modal-title">Share</h5> <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
7 </div>
8 <div class="modal-body">
9 <div class="icon-container1 d-flex">
10 <div class="smd"> <i class=" img-thumbnail fab fa-twitter fa-2x" style="color:#4c6ef5;background-color: aliceblue"></i>
11 <p>Twitter</p>
12 </div>
13 <div class="smd"> <i class="img-thumbnail fab fa-facebook fa-2x" style="color: #3b5998;background-color: #eceff5;"></i>
14 <p>Facebook</p>
15 </div>
16 <div class="smd"> <i class="img-thumbnail fab fa-reddit-alien fa-2x" style="color: #FF5700;background-color: #fdd9ce;"></i>
17 <p>Reddit</p>
18 </div>
19 <div class="smd"> <i class="img-thumbnail fab fa-discord fa-2x " style="color: #738ADB;background-color: #d8d8d8;"></i>
20 <p>Discord</p>
21 </div>
22 </div>
23 <div class="icon-container2 d-flex">
24 <div class="smd"> <i class="img-thumbnail fab fa-whatsapp fa-2x" style="color: #25D366;background-color: #cef5dc;"></i>
25 <p>Whatsapp</p>
26 </div>
27 <div class="smd"> <i class="img-thumbnail fab fa-facebook-messenger fa-2x" style="color: #3b5998;background-color: #eceff5;"></i>
28 <p>Messenger</p>
29 </div>
30 <div class="smd"> <i class="img-thumbnail fab fa-telegram fa-2x" style="color: #4c6ef5;background-color: aliceblue"></i>
31 <p>Telegram</p>
32 </div>
33 <div class="smd"> <i class="img-thumbnail fab fa-weixin fa-2x" style="color: #7bb32e;background-color: #daf1bc;"></i>
34 <p>WeChat</p>
35 </div>
36 </div>
37 </div>
38 <div class="modal-footer"> <label style="font-weight: 600">Page Link <span class="message"></span></label><br />
39 <div class="row"> <input class="col-10 ur" type="url" placeholder="https://gosnippets.com/snippets/bootstrap-5-creative-pricing-table-snippets" readonly id="myInput" aria-describedby="inputGroup-sizing-default" style="height: 40px;"> <button class="cpy" onclick="myFunction()"><i class="far fa-clone"></i></button> </div>
40 </div>
41 </div>
42 </div>
43</div>More Modals snippets
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.
ModalsView →
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.
ModalsView →
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.
ModalsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.