"sign up by john niro yumang"
Bootstrap 4.0.0 Snippet by jeanyu23

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!---************* arrangement by john niro yumang b4.0 alpha project graduation ******************* --> <!DOCTYPE html> <html lang="en"> <title>index</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!------------start head scripts and link src------------> <head> <script src="js/jq.js"></script> <!---- for moving objects make this first always after boootstrap.css -----> <link rel="stylesheet" href="css/bootstrap.css"> <!---- Bootstrap.min link local project skeleton -----> <link rel="stylesheet" href="css/w3.css"> <!--- This is the local w3css extended ---> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/style.css"> <!---- my own link local for customizing -----> <script src="js/bootstrap.min.js"></script> <!---- Bootstrap js link local for well and modal + panels -----> <link rel="icon" href="images/a.png" type="images/water.png" /> <!---- Icon link local -----> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <!------- font awesome online plug ---------------> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <!-------------end head scripts and link src -------------> <!------------start content ------------> <body> <div class="wrapper"> <div class="container-fluid" id="top-container-fluid-nav"> <div class="container"> <!---- for nav container -----> </div> </div> <div class="container-fluid" id="body-container-fluid"> <div class="container"> <!---- for body container ----> <div class="row"> <div class="col-lg-6" style="line-height:1.3em"> <label>Sign up its free !!</label> <p> <input class="w3-input" placeholder="First name" type="text"></p> <input class="w3-input" placeholder="Middle name" type="text"></p> <input class="w3-input" placeholder="Last name" type="text"></p> <input class="w3-input" placeholder="Email" type="text"></p> <input class="w3-input" placeholder="Mobile (+63)" type="text"></p> <input class="w3-input" placeholder="Password" type="password"></p> <input class="w3-input" placeholder="Retype-Password" type="password"></p> <input class="w3-radio" type="radio" name="gender" value="male" checked> <label>Male</label> <input class="w3-radio" type="radio" name="gender" value="female"> <label>female</label> <input class="w3-radio" type="radio" name="gender" value="others"> <label>othes</label> </div> <div class="col-lg-6"> <label>Education Background</label> <input class="w3-input" placeholder="Tertiary" type="text"></p> <div class="row"> <div class="col-4"> <select class="w3-select" name="option"> <option value="" disabled selected>Month</option> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="june">june</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select> </div> <div class="col-4"> <select class="w3-select" name="option"> <option value="" disabled selected>Day</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="col-4"> <select class="w3-select" name="option"> <option value="" disabled selected>Year</option> <option value="1990">1990</option> </select> </div> </div> <input class="w3-input" placeholder="Secondary" type="text"></p> <div class="row"> <div class="col-4"> <select class="w3-select" name="option"> <option value="" disabled selected>Month</option> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="june">june</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select> </div> <div class="col-4"> <select class="w3-select" name="option"> <option value="" disabled selected>Day</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="col-4"> <select class="w3-select" name="option"> <option value="" disabled selected>Year</option> <option value="1990">1990</option> </select> </div> </div> <input class="w3-input" placeholder="Elementary" type="text"></p> <div class="row"> <div class="col-4"> <select class="w3-select" name="option"> <option value="" disabled selected>Month</option> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="june">june</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select> </div> <div class="col-4"> <select class="w3-select" name="option"> <option value="" disabled selected>Day</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="col-4"> <select class="w3-select" name="option"> <option value="" disabled selected>Year</option> <option value="1990">1990</option> </select> </div> </div> <select class="w3-select" name="option"> <option value="" disabled selected>Country</option> <option value="United States">United States</option> <option value="phillippines">phillippines</option> <option value="China">China</option> <option value="Rusia">Rusia</option> <option value="Canada">Canada</option> <option value="India">India</option> </select> <br> <select class="w3-select" name="option"> <option value="" disabled selected>Province</option> <option value="United States">United States</option> <option value="phillippines">phillippines</option> <option value="China">China</option> <option value="Rusia">Rusia</option> <option value="Canada">Canada</option> <option value="India">India</option> </select> <br> <button class="w3-button w3-block w3-teal">Sign up</button> </div> </div> </div> </div> <div class="container-fluid" id="footer-container-fluid"> <div class="container"> <!---- for footer container ----> </div> </div> </div> </body> <!-------------end content--------------> <!------------sub footer code ------------> <footer> </footer> <!------------in-line script purpose ------------> <script> $('.carousel').carousel({ interval: 2000 }) </script> <style> </style> <!------------in-line style purpose ------------>

Related: See More

Navbar With Icons
sign up 2
Bootstrap 4.11 sign in form
Sign up form [Validations NOT ACHIEVED]

Questions / Comments: