Every web developer wants their website to be in Boostrap. Bootstrap is an Powerful front-end open source framework and Mobile First Framework released on August 2011. It is developed & maintained on Github with more than 16000+ commits & 900+ contributors around the world. In this tutorial I’m going to explain you about Bootstrap Modal Form – Popup Form that is displayed on top/middle of the page. Bootstrap Modal Forms wont be displayed until they are triggered and it reduce the number of pages within a website. More than 1 Million sites are using Twitter Bootstrap
Why Bootstrap Modal Form?Easy to use and it saves more time . Any web developer with basic coding knowledge of HTML, CSS & jQuery can immediately start using Bootstrap Modal Form. Its Responsive . Yes, its built-in CSS adjusts the layout to Phones, Tablets & Desktops. It automatically adjusts the modal design when we change the viewport to Portrait / Landscape.
It works on all Modern Browsers such as Chrome, Firefox, Internet Explorer, Safari & Opera .
It has powerful fluid grid system that scales up to 12 columns as the device or viewport size increases. This Grid feature is very useful for designing form layouts such as Horizantal Form & Vertical Form.
Apart from all the points, It is mainly used to increase the lead generation/signup forms numbers because of its easyness.
Please check this post Top 10 Free Boostrap Website Responsive Templates
Step 1: Install Bootstrap from CDN
Bootstrap CDN is used to deliver cached version of Bootstrap code to your projects
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Step 2: How to Create Basic Bootstrap Modal
The below code shows how to create a basic bootstrap modal with sample content in it
<!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Welcome to W3lessons!</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
Next we need to trigger the bootstrap modal popup using a button or anchor link
The Following code is used to trigger the Modal with anchor link
<a href="#" data-toggle="modal" data-target="#myModal" class="list-group-item">Open Bootstrap Modal</a>
If you want to trigger the modal via jQuery – use the following code
There are three important data attributes to be considered to design a Bootstrap Modal Popup
- data-toggle=”modal” – used to open the modal popup
- data-target=”#myModal” – used to tell which modal popup to be opened by giving ID of the Modal
- data-dismiss=”modal” – used to tell which modal popup to be closed
Based on the above techniques and bootstrap grid systems, I have created 4 different Bootstrap Modal forms
- Contact Form
- Login/Sign Up Form
- Forgot Password Form
- Credit Card Payment Form
I have used these modal popups in my many projects. Feel free to download and use it whereever you need.
Also check my tutorial on Login & Registration Form using Material Design
Please subscribe to my blog via email to get regular email updates on HTML5, Bootstrap and other web technologies