JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row centered-form">
<div class="col-xs-12 col-sm-12 col-md-12 ">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Hostel Management->New Hostel</h3>
</div>
<div class="panel-body">
<form role="form" action="admin/hostel/hostelstep1" method="post" accept-charset="utf-8" id="form_hostelstep1" name="form_hostelstep1" enctype="multipart/form-data">
<div class="error" style="margin-bottom: 20px;">
validation_errors_text
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12">
<label for="name" class="col-xs-12 col-sm-2 col-md-2">Name</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<input type="text" name="name" id="name" class="form-control " value="" size="30" maxlength="100" placeholder="Name of Hostel. Must be unique in system" >
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-6">
<label for="postal_code" class="col-xs-12 col-sm-4 col-md-4">Postal Code</label>
<div class="col-xs-12 col-sm-8 col-md-8">
<input type="text" name="postal_code" id="postal_code" class="form-control " value="" size="4" maxlength="4" placeholder="Postal Code is 4 digits"...
CSS
h4.widgettitle {
background: #F16251;
color: #ffffff;
padding-top: 6px;
padding-bottom: 2px;
padding-left: 10px;
padding-right: 10px;
margin-left: 10px;
margin-right: 10px;
font-size: 16px;
clear: both;
}
.widgetcontent {
padding-top: 0px;
padding-bottom: 10px;
padding-right: 10px;
border: 2px solid #F16251;
margin-bottom: 0px;
margin-top: -10px;
margin-left: 10px;
margin-right: 10px;
}