Create a simple and elegant bootstrap registration page. The Skills required is HTML, CSS, Bootstrap. This is a Responsive registration page using bootstrap.

1. CREATE A SIMPLE &
ELEGANT BOOTSTRAP
REGISTRATION PAGE
REQUIRED KNOWLEDGE : HTML, CSS, BOOTSTRAP
PRESENTED BY : SANJAYA PRAKASH PRADHAN
NEXT TOPIC : USE VALIDATION IN THE BOOTSTRAP REGISTRATION PAGE

3. REQUIRED SOFTWARE & KNOWLEDGE
• Software:
• Visual Studio
• Internet Explorer OR Google Chrome
• Internet Connection
• Skills
• HTML
• CSS
• Bootstrap

4. STEP -1
• Open Visual Studio & Create a new website & choose ASP.NET Empty Web site.

5. STEP - 2
• Add a new item of type web form into the project and name it as
RegistrationBootstrap.aspx or you can give a name as you wish.

6. STEP - 3
• Update the Title Tag and Add Meta, CSS Links and Script links inside head tag as
below.
<title>Registration</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.7/css/responsive.bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

7. STEP - 4
• Download the London bridge view image rom the below link and paste the image
in your project folder root.
https://s3-eu-west-
1.amazonaws.com/uploads.services.internations.org/files/2018/11/03133059/uk-moving-
1200x600.jpg
• Add the below Style for the Body Tag of the page
style="background-image:url('bg.jpg');width:100%;background-repeat:no-
repeat;background-size:cover"

8. STEP - 5
• Add a bootstrap grid row inside a container class div tag in the form tag.
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>

9. STEP - 6
• Inside the middle div tag of the row class add another div with a class called ‘well’
and with some additional style to add padding.
<div class="well" style="box-shadow: 3px 2px 5px #555; margin-top: 50px">
</div>
• Inside the above div tag we have to add a header title with bootstrap class “Page-
header” and “text-center” div and add a h3 tag to show the title as “Registration”
as given below.
<div class="page-header text-center">
<h3>Registration</h3>
</div>

10. STEP - 7
• Add an “I” tag inside h3 tag with some glyphicon class to add an image before the
text Registration.
<i class="glyphicon glyphicon-user"></i>
• Below the Page header class div add the text box to enter fullname.
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</div>
<asp:TextBox ID="txtFullname" runat="server" CssClass="form-control" placeholder="Enter Full Name" />
</div>
</div>

11. STEP - 8
• Repeat the above step to add all required fields by modifying the requird fields
and IDs.
• The UI will look like the below

12. STEP - 9
• Add Buttons as below
<div class="form-group text-right">
<a class="btn btn-danger" href="Login.aspx"><i class="glyphicon glyphicon-
lock"></i>&nbsp;Login</a>
<button class="btn btn-success"><i class="glyphicon glyphicon-log-
in"></i>&nbsp;Submit</button>
</div>

13. STEP - 10
• After all code completed the Ui will look like the below.
Next Topic : Registration Form Validation Using HTML5, Boostrap and JQuery