Bootstrap Modal Example

Developer
Ahsan K. Rathore
Size
2,183 Kb
Views
38,456
  1. Bootstrap Modal Example Previews
  2. Bootstrap Modal Example HTML Codes
  3. Bootstrap Modal Example CSS Codes

How do I make an bootstrap modal example?

Bootstrap Modal Example. What is a bootstrap modal example? How do you make a bootstrap modal example? This script and codes were developed by Ahsan K. Rathore on 04 July 2022, Monday.

Bootstrap Modal Example Previews
IQ Test

Bootstrap Modal Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap Modal Example</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap"> <h1>Bootstrap Modal Example</h1> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg"> Large modal </button>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <!-- Modal Content: begins --> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header no-borders"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="gridSystemModalLabel"></h4> </div> <!-- Modal Body --> <div class="modal-body"> <p class="body-message centered"><strong>The email campaign has been successfully sent.</strong></p> </div> <!-- Modal Footer --> <div class="modal-footer no-borders"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> <!-- Modal Content: ends --> </div>
</div>
<!---------------------->
<div class="wrap"> <h1>Bootstrap Modal Example</h1> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg-new"> Large modal </button>
</div>
<div class="modal fade bs-example-modal-lg-new" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <!-- Modal Content: begins --> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="gridSystemModalLabel">Your Headings</h4> </div> <!-- Modal Body --> <div class="modal-body"> <div class="body-message"> <h4>Any Heading</h4> <p>And a paragraph with a full sentence or something else...</p> </div> </div> <!-- Modal Footer --> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> <!-- Modal Content: ends --> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
</body>
</html>

Bootstrap Modal Example - Script Codes CSS Codes

.wrap { padding: 15px; }
h1 { font-size: 28px; }
h4,
modal-title { font-size: 18px; font-weight: bold; }
.no-borders { border: 0px; }
.body-message { font-size: 18px; }
.centered { text-align: center; }
.btn-primary { background-color: #2086c1; border-color: transparent; outline: none; border-radius: 8px; font-size: 15px; padding: 10px 25px; }
.btn-primary:hover { background-color: #2086c1; border-color: transparent; }
.btn-primary:focus { outline: none; }
Bootstrap Modal Example - Script Codes
Bootstrap Modal Example - Script Codes
Home Page Home
Developer Ahsan K. Rathore
Username ahsanrathore
Uploaded July 04, 2022
Rating 3
Size 2,183 Kb
Views 38,456
Do you need developer help for Bootstrap Modal Example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ahsan K. Rathore (ahsanrathore) Script Codes
Name
Product Dashboard Initial Layout
Get a Quote Widget for Taxi Services in UK
Full Calendar - Isotope
Google Map Customized InfoWindow Hack
Select Previous Value of Dropdown on Custom Click Button
A Pen by Ahsan K. Rathore
SVG Radar Animation with Radio Waves Alert
Responsive Mega Menu - CSS3
Animated Bar Charts
Responsive Layout with Flexbox
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!