Create a simple and elegant bootstrap registration page
Download as PPTX, PDF1 like162 views
The document provides a step-by-step guide for creating a simple and elegant registration page using Bootstrap, HTML, and CSS. It outlines the required knowledge and software, including Visual Studio and web browsers, and details the steps to set up the page, add styles, and implement form fields using Bootstrap components. The next topic to be covered is validation for the registration form using HTML5, Bootstrap, and jQuery.
Create a simple and elegant bootstrap registration page
- 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> Login</a> <button class="btn btn-success"><i class="glyphicon glyphicon-log- in"></i> 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