Login Form using Bootstrap 4 with MySQL Database. In this tutorial, we are going to create bootstrap 4.0 login page with MySQL database. We had used Visual Studio 2015 to create this tutorial. We will demonstrate you how to create this amazing login page design with MySQL Database. Bootstrap is the very light framework to style and create responsive web pages. we will create this tutorial in Bootstrap 4.0. The user will log in to this database with login credential and we check user input with required field and compare field validator. we will create a design first and then add a database with some values and then validate the user with there credential.


VS2010/2012/2013/15/17, SQL Server 2005/08/2012

Project used version

VS2015, SQL SERVER 2015

1.1 Create Login File

Create a web application in visual studio. Right-click on the project and add Web form and rename it as login.aspx. after successfully form creation named file title and link bootstrap and Style.css File files to the login page.

Import this code into <head> tag.

1.2 Create Style.css file

Create Style.css file in the root folder. Right-Click on the project and go to add and select Style.css file. Make sure you create this file in root folder because we specify root file path in the link tag. if your file path is different the change href property of link tag in the head section.

1.3 Insert Background Image

Now, Create a folder in the project and add background image into this folder. Name this folder as Bgimage. if you want to use your own name then you are free to do that. To create folder Right-click on the project and go to add and select New Folder. Name your folder and then Right-click on the folder and go to existing item and select your background image. Click here to download Background Image.

1.4 Design Login Form

Now we are going to design our login form first. Using bootstrap classes we design this form very easily.

Import this code in <body> tag of login.aspx page.

1.5 Create Classes in Style.css

Now, Go to style.css file and import this code into Style.css File

In the  .container-fluid Class, we used  background-image:url('bgimage/Background Image-min.png'); property value but if you have different background file path the change it with your own file path you just want to change it with your absolute Image path.

2.1 Create Database with Table

Create a database in your project and name it as database1. To create database right-click on the project and click on add SQL Database Server. Name your database database1 if you want to add database file in app data folder then click on yes. wait for minutes and double click on the database file then right-click on the table folder and select New Query and create a new table.

Import this code to create new table

Click on Execute Query. you will see the table create a successful message. We want to validate the user with username and password so we will insert some value into a table.

Import this code to insert some value in your project

2.2 Insert SqlDataSource

Insert SqlDataSource in the bottom of your page but place it into the body tag.