<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container profile-form"> <form action=""> <div class="row"> <div class="col-md-3 ist-column"> <img src="https://via.placeholder.com/150" alt="" class="img-rounded img-responsive"> <span> <a>Delete</a></span> <span><a>Change</a></span> </div> <div class="col-md-7 middle-column pull-left user-title"> <input type="text" value="Qamar Abbas" name="username"> </div> <div class="col-md-2 last-column"> <a href="" class="btn-new pull-right">Edit</a> </div> <div class="col-md-12"> <hr> </div> </div> <div class="row"> <div class="col-md-3 ist-column"> Personal Information </div> <div class="col-md-7 middle-column"> <div class="row"> <div class="col-md-6">FirstName <div> <input type="text" value='Qamar' name="user_fname"> </div> </div> <div class="col-md-6"> Last Name <div> <input type="text" value='Qamar' name="user_lname"> </div> </div> </div> </div> <div class="col-md-2 last-column"> <a href="" class="btn-new pull-right">Edit</a> </div> <div class="col-md-12"> <hr> </div> </div> <div class="row"> <div class="col-md-3 ist-column"> Sign In Email </div> <div class="col-md-7 middle-column"> <input type="email" value='Email' name="user_email"> <select name="" id=""> <option value="">@gmail.com</option> <option value="">@hotmail.com</option> <option value="">@yahoo.com</option> </select> </div> <div class="col-md-2 last-column"> <a href="" class="btn-new pull-right">Edit</a> </div> <div class="col-md-12"> <hr> </div> </div> <div class="row"> <div class="col-md-3 ist-column"> User Status </div> <div class="col-md-7 middle-column pull-left"> <input type="text" value='Subscriber' name="user_status"> </div> <div class="col-md-2 last-column"> <a href="" class="btn-new pull-right">Edit</a> </div> <div class="col-md-12"> <hr> </div> </div> <div class="row"> <div class="col-md-3 ist-column"> Language </div> <div class="col-md-7 middle-column pull-left"> <input type="text" value='Language' name="user_language"> </div> <div class="col-md-2 last-column"> <a href="" class="btn-new pull-right">Edit</a> </div> <div class="col-md-12"> <hr> </div> </div> <div class="row"> <div class="col-md-3 ist-column"> Sign In Password </div> <div class="col-md-7 middle-column pull-left"> <input type="password" value='Password' name="user_password"> </div> <div class="col-md-2 last-column"> <a href="" class="btn-new pull-right">Edit</a> </div> <div class="col-md-12"> <hr> </div> </div> <div class="row"> <div class="col-md-3 ist-column"> Phone Number </div> <div class="col-md-7 middle-column pull-left"> <input type="text" value='Phone Number' name="user_phonenumber"> </div> <div class="col-md-2 last-column"> <a href="" class="btn-new pull-right">Edit</a> </div> <div class="col-md-12 text-center"> <input type="submit" name="save" class="btn btn-warning "> </div> </div> </form> </div>

.profile-form{ background: hsl(211deg 9% 93%); height: auto; padding: 2em; font-family: calibri; } .profile-form form{ background: white; padding: 1em; } .profile-form input{ border: none; outline: none } .profile-form .ist-column img{ height: 33vh; width: 33vh; } .profile-form .ist-column span{ padding: .8rem; font-size: 1rem; } .profile-form .user-title input{ font-size:1.5em; } .profile-form .middle-column .p-info{ color: #982f2f; } .bd-lr-1{ border-right: 1px solid black; border-left: 1px solid black; } .profile-form .middle-column{ font-size: .8em; } .profile-form .middle-column select { border: none; outline: none; } .profile-form .ist-column span a{ text-decoration:none; color: var(--light-blue); } .profile-form .last-column a { text-decoration:none; color: light-blue; }