<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="profile-container container"> <div class="row"> <ol class="breadcrumb"> <li><a href="#">My Profile</a></li> <li class="active"><a href="#">Edit Profile</a></li> </ol> </div> <div class="profile-form-0"> <div class="row profile-form"> <form action="" class=""> <!-- first column --> <div class="col-md-6 col-sm-6 col-lg-6 "> <div class="form-group form-img"> <img src="https://via.placeholder.com/150" class=" img-rounded img-responsive " alt=""> <input type="file" class="form-control"> </div> <div class="col-md-6 "> <div class="form-group"> <label for="">First name</label> <input type="text" class="form-control"> </div> </div> <div class="col-md-6 "> <div class="form-group"> <label for="">Last name</label> <input type="text" class="form-control"> </div> </div> <div class="form-group "> <label for="">Password</label> <input type="password" class="form-control"> <a href="">Change Password</a> </div> <div class="form-group "> <label for="">Email</label> <input type="email" class="form-control"> </div> <div class="form-group "> <label for="">Language</label> <input type="text" class="form-control"> </div> </div> <!-- 2nd column --> <div class="col-md-6 col-sm-6 col-lg-6 second-column"> <div class="form-group "> <label for="">Phone</label> <input type="text" class="form-control"> </div> <div class="form-group "> <label for="">Address</label> <input type="text" class="form-control"> </div> <div class="form-group "> <label for="">Gender</label> <select name="" id="" class="form-control"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div> <div class="form-group "> <label for="">Date of Birth</label> <div class="form-inline dob"> <select name="" id="" class="form-control "> <option value="">September</option> </select> <select name="" id="" class="form-control "> <option value="">16</option> </select> <select name="" id="" class="form-control"> <option value="">1999</option> </select> </div> </div> <div class="form-group "> <label for="">Twitter</label> <input type="text" class="form-control"> </div> <div class="form-group "> <label for="">Facebook</label> <input type="text" class="form-control"> </div> </div> <div class="clearfix"></div> <div class="form-btn form-inline text-center"> <button type="submit" name="submit" class="btn btn-danger form-control">Update Profile</button> </div> </form> </div> </div> </div> </div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div>

/* profile */ .profile-container{ background:gainsboro; height:100vh; padding: 4em; width: 90%; height: auto; margin-top: 1em; } .profile-container .profile-form form img{ border: 1px solid var(--light-blue); height: 40vh; width: 40vh; padding: 0; margin-right: 40%; margin-left:35%; } .profile-container .profile-form form .form-group input[type="file"]{ border:none; padding: .5em; background:transparent; } .profile-container .profile-form .dob{ display:flex; justify-content: space-between; } .profile-container .profile-form form .col-md-6{ padding-left:0; } .profile-form-0{ background:url("https://drive.google.com/file/d/1JqU-oVVRMcEcBwAC0st3NSe_aK7CE9J2/view?usp=sharing"); background-repeat: no-repeat; background-position:right; background-size: cover; width:auto; height:auto; } .profile-form form{ /* background:whitesmoke; */ padding: 2em; color: black; font-size: 1.5rem; } .profile-form{ padding:2em; background:white; opacity: .9; border: 1px solid var(--light-blue); } .profile-container .profile-form .form-btn button{ padding: 1em 2em 2em 1em; font-family: var(--Abeez); font-size: 2rem; border-radius: 45px; text-align: center; } .profile-container .row .breadcrumb { background: white; border: 1px solid var(--light-blue); } .profile-container .row .breadcrumb li a{ color:black; } .profile-container .row .breadcrumb .active a{ color: var(--light-blue); } .profile-container .profile-form .second-column{ margin-top:4.2em; } /* media querries */ @media screen and (max-width: 768px){ .profile-container .profile-form .second-column{ margin-top:6.5em; } } @media screen and (max-width: 425px){ .profile-container .profile-form .second-column{ margin-top:0; } }