Bootstrap registration form Examples & Templates

Bootstrap Responsive Registration Form Examples
Bootstrap Responsive Registration Form Examples
Bootstrap Responsive Registration Form Examples

Hello friends in this article we will learn to create multiple types of Bootstrap Registration form, Bootstrap Responsive Registration form.

here i will provides you bootstrap registration form templates free download.

HTML CODE

<div class="container">
     <h1>Bootstrap Responsive Registration Form Examples</h1>
  
	<div class="row">
    
        <div class="col-md-6">
         <div class="form_container box">
           <h2>Personal Detail</h2>
           <div class="form-wrapper">
             <label class="classspan"> Student Name</label>
             <input type="text" class="txtbox" placeholder="Student Name" />
            </div>
           
           <div class="form-wrapper">
             <label class="classspan">Father Name</label>
             <input type="text" class="txtbox" placeholder="Father Name" />
           </div>
           
           <div class="form-wrapper">
             <label class="classspan">Father Name</label>
             <input type="text" class="txtbox" placeholder="Father Name" />
           </div>
           
            <div class="form-wrapper">
             <label class="classspan">Gender</label>
             <select class="ddb" name="">
               <option>--Select Gender--</option>
               <option>Male</option>
               <option>Female</option>
             </select>
           </div>
           </div>
         </div>
         
         
         <div class="col-md-6">

          <div class="form_container box">
            <h2>Academic detail</h2>
           <div class="form-wrapper">
             <label class="classspan">Roll No</label>
             <input type="text" class="txtbox" placeholder="Roll No" />
           </div>
           
            <div class="form-wrapper">
             <label class="classspan">Session</label>
             <input type="text" class="txtbox" placeholder="Session" />
            </div>

           
            <div class="form-wrapper">
             <label class="classspan">Subject</label>
             <input type="text" class="txtbox1" placeholder="Subject-1" />
             <input type="text" class="txtbox1" placeholder="Subject-2" />
             <input type="text" class="txtbox1" placeholder="Subject-3" />
           </div>
           
           <div class="form-wrapper">
             <input type="button" class="mybt" value="SAVE RECORD" />
           </div>
           
           
          </div>
         </div>
    </div>
  </div>

CSS CODE

body
{
	margin:0px;
	padding:0px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:13px;
}

h1,h2,h3,h4,h5,p,label
{
	margin:0px;
	padding:0px;
}

h1
{
	font-size:25px;
	padding-bottom:20px;
	padding-top:20px;
}

.form-wrapper
{
	padding:5px;
}

.classspan
{
	color:#333;
    font-size:11px;
	font-weight:600;
	width:100%;
	margin-top:3px;
}

.txtbox
{
	width:99%;
	padding-left:1%;
	height:35px;
	border-radius:5px;
	margin-top:7px;
	border:1px solid #d7d4d4;
	outline:0px;
}

.ddb
{
	width:99%;
	padding-left:1%;
	height:35px;
	border-radius:5px;
	margin-top:7px;
	border:1px solid #d7d4d4;
	outline:0px;
}

.mybt
{
	padding:7px;
	margin-top:10px;
	background:rgba(255,51,0,1);
	border:none;
	color:#fff;
	border-radius:5px;
}

.txtbox1
{
	width:32.5%;
	padding-left:1%;
	height:35px;
	margin-top:7px;
	border:1px solid #d7d4d4;
	outline:0px;
}

.txtbox::placeholder
{
	font-size:12px;
	color:#a5a4a4;
}

.box
{
	border:1px solid #f2f2f2;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(235,235,235,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(235,235,235,1);
box-shadow: 0px 0px 10px 0px rgba(235,235,235,1);
}

.box h2
{
	font-size:18px;
	color:rgba(255,51,0,1);
	padding-bottom:10px;
}

.form_container
{
	padding:20px;
	
}



1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Bootstrap Examples, Bootstrap Tutorials, twitter bootstrap tutorials, html tutorials, html tricks, css tutorials, css tricks, html and css tutorials, html css tutorials,wordpress tutorials. Recent comment authors
  Subscribe  
newest oldest most voted
Notify of