Bootstrap Registration form Template free download

Today in this article we will learn how to create responsive registration form using Bootstrap 4, Lets Start.

Add These Files into Your Head Section

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

HTML

<div class="container-fluid">
             <div class="col-md-12 mybox">
             <div class="row">


             <div class="col-md-6 gt10">
              <div class="box_header"><span>Associate Detail</span></div>
               <div class="box-container bbr">
                  <div class="form-group">
                     <input type="text" class="form-control" placeholder="Name" />
                  </div>

                  <div class="form-group">
                     <input type="text" class="form-control" placeholder="Father Name" />
                  </div>

                  <div class="form-group">
                     <input type="text" class="form-control" placeholder="DOB" />
                  </div>
               </div>
             </div>
             
             
             

             <div class="col-md-6 gt10">
              <div class="box_header"><span>Personal Detail</span></div>
               <div class="box-container bbr">
                  
                    <div class="form-group">
                      <input type="text" class="form-control" placeholder="Address" />
                    </div>

                    <div class="form-group">
                       <input type="text" class="form-control" placeholder="Mobile No" />
                    </div>


                  <div class="form-group">
                    <input name="" type="button" class="btn btn-danger" value="SAVE" />
                  </div>


               </div>
             </div>
            </div>
            </div>
            </div> 
            
             
             
             
             <div class="container-fluid">
               <div class="box_header"><span>Grid Detail</span></div>
               <div class="col-md-12 mybox1">
                 <div class="box-container bbr">
                    <div class="gv">
                       <table width="100%" border="0" class="myGridClass" cellspacing="0" cellpadding="0">
  <tr>
    <td width="5%" height="33" align="center"><strong>#</strong></td>
    <td width="16%" align="center"><strong>Name</strong></td>
    <td width="19%" align="center"><strong>Father Name</strong></td>
    <td width="13%" align="center"><strong>DOB</strong></td>
    <td width="32%" align="center"><strong>Address</strong></td>
    <td width="15%" align="center"><strong>Mobile No</strong></td>
  </tr>
  <tr>
    <td height="33" align="center">1</td>
    <td align="center">Raj Chauhan</td>
    <td align="center">Rajindra Chauhan</td>
    <td align="center">02/10/1990</td>
    <td align="center">Lalganj Azamgarh</td>
    <td align="center">9999999999</td>
  </tr>
  <tr>
    <td height="33" align="center">2</td>
    <td align="center">Bablu Singh </td>
    <td align="center">Rajan Singh </td>
    <td align="center">02/09/1989</td>
    <td align="center">Padeypur Varanasi</td>
    <td align="center">8888888888</td>
  </tr>
</table>
                   </div>
                 </div>
               </div>
             </div>
             </div>

CSS

.mybox
{
    padding:0px;
    margin-bottom:50px;  
}

.mybox1
{
    padding:0px;
    margin-bottom:20px;  
}

.gt10
{
	margin-top:10px;
}

.box_header
{
    width:100%;
    line-height:40px;
    height:40px;
    background:#fff;
    -webkit-box-shadow: 0px 0px 25px -5px rgba(199,199,199,1);
-moz-box-shadow: 0px 0px 25px -5px rgba(199,199,199,1);
box-shadow: 0px 0px 25px -5px rgba(199,199,199,1);
    border-bottom:1px solid #f2f2f2;
}

.box_header span
{
    padding-left:15px;
    font-size:14px;
    color:#4c2865;
    font-weight:600;
}

.box-container
{
    background:#fff;
    padding:25px;
	
}



.bbr
{
  -webkit-box-shadow: 0px 0px 25px -5px rgba(199,199,199,1);
-moz-box-shadow: 0px 0px 25px -5px rgba(199,199,199,1);
box-shadow: 0px 0px 25px -5px rgba(199,199,199,1);
}

.bbr .btn-danger
{
    font-size:13px;
    background:#891814;
    border:none;
}

.gv
{
    width:100%;
    overflow:scroll;
}


.myGridClass {
  width: 100%;
  background-color: #fff;
  margin: 5px 0 10px 0;
  border: solid 1px #6c3156;
  border-collapse:collapse;
  font-family: 'Encode Sans Expanded', sans-serif;
  
}


.myGridClass td {
  padding: 2px;
  font-size:12px;
  text-align:left;
  line-height:22px;
  border: solid 1px #6c3156;
  color: #000;
}


.myGridClass th {
  padding: 4px 2px;
  color: #fff;
   text-align:center;
  line-height:25px;
  font-weight:500;
  font-size:12px;
  background: #80446a;
  border-left: solid 1px #6c3156;
  font-family: 'Encode Sans Expanded', sans-serif;
}

Car Rental Kansas City Airport

Kansas City Airport Shuttle is the premier Airport Transportation service in Kansas City. Kansas City Airport Car Service provides Kansas City travelers transportation to and from Kansas City International Airport, Lawrence, Topeka, Manhattan, Fort Riley, and Junction City Kansas. We also provides kansas city mci airport,Kansas City Airport Car service.