Bootstrap Login Signup Modal with Validation

In this tutorial I’m going to explain you about Bootstrap Login Signup Modal – Popup Form that is displayed on top/middle of the page.Every web developer wants their website to be in Bootstrap. 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.  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 Login Signup Modal

The below code shows how to create a basic bootstrap modal form 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">&times;</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

$('#myModal').modal();

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 where-ever 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