<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 ----------> <div class="container"> <div class="row"> <div class="form-card"> <div class='form-group'> <div class='col-xs-12 form-group'> <label class="control-label locked" for="name-input-field">Name</label> <input id="name" name="name" class="form-control" type="text" required=""> </div> </div> <div class='form-group'> <div class='col-xs-12 form-group'> <label class="control-label locked" for="phone-input-field">Phone Number</label> <input id="phone_number" name="phone_number" type="text" placeholder="08xxxxxxxxxx" class="form-control locked" required=""> </div> </div> <div class="form-group locked"> <div class='col-xs-12 form-group'> <label class="control-label locked" for="email-input-field">Email</label> <input id="email" name="email" type="text" placeholder="email@email.com" class="form-control locked" required=""> </div> </div> <div class="form-group locked"> <div class='col-xs-12 form-group'> <label class="control-label locked" for="desc-input-field">Description</label> <textarea name="desc" id="desc" cols="0" rows="3" class="form-control locked"></textarea> </div> </div> <div class="form-group locked"> <div class='col-xs-12 form-group'> <label class="control-label locked" for="desc-input-field">Address</label> <textarea name="address" id="address" cols="0" rows="3" class="form-control locked"></textarea> </div> </div> </div> </div> </div>

.form-card { width: 100%; float: left; display: inline-block; }