when i try to scroll the form the form-row content overlap on the navigation.
i am trying to make a form using bootstrap. but when i am adding a form-row or grid element for horizontal fields, the content or that form-row block overlap on my navigation panel on scrolling.
how can i make my form blocks below my navigation on scrolling.
body{
width:100%;
position: relative;
background-color: aliceblue;
display: flex;
margin: 0;
padding: 0;
}
#menu {
background-color: rgb(1, 9, 54);
width:300px;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
#menu .logo{
display: flex;
align-items: center;
color: aliceblue;
padding: 30px 0 0 30px;
justify-content: flex-start;
}
#menu .logo img {
width: 60px;
margin-right: 15px;
border-radius: 50%;
}
#menu .items {
margin-top: 40px;
}
#menu .items li {
list-style-type: none;
padding: 15px 0;
transition: 0.3s ease;
}
#menu .items li:hover{
background: #254893;
cursor: pointer;
}
#menu .items li:nth-child(1){
border-left: 4px solid white;
}
#menu .items li i{
color: blanchedalmond;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 16px;
margin: 0 16px 0 25px;
}
#menu .items li:hover i,
#menu .items li:hover a {
color : #f3f4f6;
}
#menu .items li a{
text-decoration: none;
color: rgb(134, 141, 151);
font-weight: 300px;
transition: 0.3s ease;
}
#interface {
width: calc(100% - 300px);
margin-left: 300px;
position: relative;
}
#interface .navigation {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
padding: 15px 30px;
border-bottom: 3px solid blue;
position: fixed;
width: calc(100% - 300px);
}
#interface .navigation .search {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 14px;
border: 1px solid #d7dbe6;
border-radius: 4px;
}
#interface .navigation .search input {
border: none;
outline: none;
font-size: 14px;
}
#interface .navigation .search i {
margin-right: 14px;
}
#interface .navigation .profile {
display: flex;
justify-content: flex-start;
align-items: center;
margin-right: 25px;
}
#interface .navigation .profile i {
margin-right: 20px;
font-size: 19px;
font-weight: 400;
}
#interface .navigation .profile img{
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 50%;
}
.i-name {
color: #444a53;
padding: 30px 30px 0 30px;
font-size: 24px;
font-weight: 700;
margin-top: 70px;
}
.values {
padding: 30px 30px 0 30px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.values .val-box {
background: #f3f4f6;
width: 235px;
padding: 16px 20px;
border-radius: 5px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.values .val-box i {
font-size: 25px;
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 50%;
text-align: center;
color: #fff;
background-color: #254893;
margin-right: 15px;
}
.values .val-box i:nth-child(1) {
background-color: rgb(3, 114, 114);
}
.values .val-box i:nth-child(2) {
background-color:rgb(80, 231, 181);
}
.values .val-box i:nth-child(3) {
background-color: cadetblue;
}
.values .val-box h3 {
font: 18px;
font-weight: 600px;
}
.values .val-box span {
font: 15px;
color: #444a53;
}
#interface .fbuttons {
margin-left: 25px;
}
and here is the html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/f8bc328439.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section id="menu">
<div class="logo">
<img src="profile-pic.png" alt="" class="">
<h2>Farmer</h2>
</div>
<div class="items">
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-user"></i>Add/Modify Farmer</li>
<li><i class="fas fa-chart-bar"></i>Check Details</li>
<li><i class="fas fa-tasks"></i>Store</li>
<li><i class="fas fa-infinity"></i>Buyback</li>
<li><i class="fas fa-sign-out-alt"></i>Logout</li>
</div>
</section>
<section id="interface">
<div class="navigation">
<div class="n1">
<div class="search">
<i class="fas fa-search"></i>
<input type="text" placeholder="search">
</div>
</div>
<div class="profile">
<i class="fas fa-bell"></i>
<img src="profile-pic.png" alt="">
</div>
</div>
<h3 class="i-name">Add/modify farmer</h3>
<div class="fbuttons">
<button class="btn btn-danger">REGISTER A NEW FARMER</button>
<button style="margin-left: 10px" class="btn btn-danger" >MODIFY FARMER DETAILS</button>
</div>
<div class="container"style="margin: 10px 0 500px 10px;">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="">
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label for="aadhar">Aadhar Number</label>
<input type="number" class="form-control" id="">
</div>
<div class="form-group col-md-5">
<label for="mobileno">Mobile number</label>
<input type="number" class="form-control" id="inputPassword4">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" >
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputVillage">Village</label>
<input type="text" class="form-control" id="inputVillage">
</div>
<div class="form-group col-md-3">
<label for="inputVillage">Taluka</label>
<input type="text" class="form-control" id="inputVillage">
</div>
<div class="form-group col-md-3">
<label for="inputDistrict">District</label>
<select id="inputDistricts" class="form-control">
<option selected>Choose...</option>
<option></option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputPincode">Pincode</label>
<input type="number" class="form-control" id="inputPincode">
</div>
</div>
<h4> Farm Details </h4>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" >
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputVillage">Village</label>
<input type="text" class="form-control" id="inputVillage">
</div>
<div class="form-group col-md-3">
<label for="inputVillage">Taluka</label>
<input type="text" class="form-control" id="inputVillage">
</div>
<div class="form-group col-md-3">
<label for="inputDistrict">District</label>
<select id="inputDistricts" class="form-control">
<option selected>Choose...</option>
<option></option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputPincode">Pincode</label>
<input type="number" class="form-control" id="inputPincode">
</div>
<div class="form-group col-md-2">
<label for="inputPincode">Survey number</label>
<input type="number" class="form-control" id="inputPincode">
</div>
<div class="form-group col-md-2">
<label for="inputPincode">Area</label>
<input type="number" class="form-control" id="inputPincode" placeholder="In acers">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</section>
</body>
</html>
I believe you're asking the "Sticky Header" question.
https://dev.to/akhilarjun/one-line-sticky-header-using-css-5gp3
It does mean restructuring your form a little bit. The nav section should probably go outside the "interface" section.
An alternate approach is the "holy grail" aproach. Take what they have here: https://css-tricks.com/the-holy-grail-layout-with-css-grid/
and then just use the Aside, Nav, Article sections without the header and footer, and it's essentially what you're asking for.
Related
I am writing a signup form using Bootstrap 4. I can't get the form fields for user image and biography, to align with the rest of the form fields.
I have tweaked the CSS several ways, but can't get the visual effect I want, which is:
Biography and photo upload fields be same width as all form fields, and align horizontally
Photo field split into two equal width sections (a bit like first and last name fields), with uploaded image horizontally aligned in one field, and the button horizontally aligned in a second field.
Here is my code:
body {
color: #fff;
background: #63738a;
font-family: 'Roboto', sans-serif;
}
.form-control {
height: 40px;
box-shadow: none;
color: #969fa4;
}
.form-control:focus {
border-color: #5cb85c;
}
.form-control,
.btn {
border-radius: 3px;
}
.signup-form {
width: 450px;
margin: 0 auto;
padding: 30px 0;
font-size: 15px;
}
.signup-form h2 {
color: #636363;
margin: 0 0 15px;
position: relative;
text-align: center;
}
.signup-form h2:before,
.signup-form h2:after {
content: "";
height: 2px;
width: 30%;
background: #d4d4d4;
position: absolute;
top: 50%;
z-index: 2;
}
.signup-form h2:before {
left: 0;
}
.signup-form h2:after {
right: 0;
}
.signup-form .hint-text {
color: #999;
margin-bottom: 30px;
text-align: center;
}
.signup-form form {
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #f2f3f7;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group {
margin-bottom: 20px;
}
.signup-form input[type="checkbox"] {
margin-top: 3px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
min-width: 140px;
outline: none !important;
}
.signup-form .row div:first-child {
padding-right: 10px;
}
.signup-form .row div:last-child {
padding-left: 10px;
}
.signup-form a {
color: #fff;
text-decoration: underline;
}
.signup-form a:hover {
text-decoration: none;
}
.signup-form form a {
color: #5cb85c;
text-decoration: none;
}
.signup-form form a:hover {
text-decoration: underline;
}
.img-profile {
width: 120px;
height: 120px;
margin-bottom: 15px
}
.avatar .figure img {
float: right;
width: 64px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
<title>Bootstrap Simple Registration Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="signup-form">
<form action="#" method="post">
<h2>Create Account</h2>
<div class="form-group">
<div class="row">
<div class="col"><input type="text" class="form-control" name="first_name" placeholder="First Name" required="required"></div>
<div class="col"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required="required"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="screenname" placeholder="Username" required="required">
</div>
<div class="form-group avatar">
<div class="row">
<figure class="figure col-md-2 col-sm-3 col-xs-12">
<img class="img-rounded img-responsive" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
</figure>
<div class="form-inline col-md-10 col-sm-9 col-xs-12">
<input type="file" class="file-uploader pull-left">
<button type="submit" class="btn btn-sm btn-default-alt pull-left">Update Image</button>
</div>
</div>
</div>
<div class="form-group">
<label for="user-bio" class="col-lg-2 control-label">Biography</label>
<div class="col-lg-10">
<textarea name="user-bio" id="user-bio" class="form-control" cols="20" rows="3" placeholder="Brief biography"></textarea>
</div>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg btn-block">Create Account Now</button>
</div>
</form>
</div>
</body>
</html>
How do I fix the alignment issue in the form?
Step 1 is usually to strip out all the custom margins and padding you've applied. They're usually not necessary with Bootstrap, and they tend to cause problems.
Then wrap the entire thing with a container and set a max-width on it:
body {
color: #fff;
background: #63738a;
font-family: 'Roboto', sans-serif;
}
.form-control {
height: 40px;
box-shadow: none;
color: #969fa4;
}
.form-control:focus {
border-color: #5cb85c;
}
.form-control,
.btn {
border-radius: 3px;
}
.signup-form {
font-size: 15px;
max-width: 450px;
}
.signup-form h2 {
color: #636363;
position: relative;
text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css"/>
<div class="container signup-form">
<form action="#" method="post">
<h2>Create Account</h2>
<div class="form-group">
<div class="row">
<div class="col"><input type="text" class="form-control" name="first_name" placeholder="First Name" required="required"></div>
<div class="col"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required="required"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="screenname" placeholder="Username" required="required">
</div>
<div class="form-group avatar">
<div class="row">
<figure class="figure col col-md-2 col-sm-3">
<img class="img-rounded img-responsive" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
</figure>
<div class="form-inline col-md-10 col-sm-9 col-xs-12">
<input type="file" class="file-uploader pull-left">
<button type="submit" class="btn btn-sm btn-default-alt pull-left">Update Image</button>
</div>
</div>
</div>
<div class="form-group">
<label for="user-bio" class="control-label">Biography</label>
<textarea name="user-bio" id="user-bio" class="form-control" cols="20" rows="3" placeholder="Brief biography"></textarea>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg btn-block">Create Account Now</button>
</div>
</form>
</div>
change the width and remove the float
body {
color: #fff;
background: #63738a;
font-family: 'Roboto', sans-serif;
}
.form-control {
height: 40px;
box-shadow: none;
color: #969fa4;
}
.form-control:focus {
border-color: #5cb85c;
}
.form-control,
.btn {
border-radius: 3px;
}
.signup-form {
width: 450px;
margin: 0 auto;
padding: 30px 0;
font-size: 15px;
}
.signup-form h2 {
color: #636363;
margin: 0 0 15px;
position: relative;
text-align: center;
}
.signup-form h2:before,
.signup-form h2:after {
content: "";
height: 2px;
width: 30%;
background: #d4d4d4;
position: absolute;
top: 50%;
z-index: 2;
}
.signup-form h2:before {
left: 0;
}
.signup-form h2:after {
right: 0;
}
.signup-form .hint-text {
color: #999;
margin-bottom: 30px;
text-align: center;
}
.signup-form form {
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #f2f3f7;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group {
margin-bottom: 20px;
}
.signup-form input[type="checkbox"] {
margin-top: 3px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
min-width: 140px;
outline: none !important;
}
.signup-form .row div:first-child {
padding-right: 10px;
}
.signup-form .row div:last-child {
padding-left: 10px;
}
.signup-form a {
color: #fff;
text-decoration: underline;
}
.signup-form a:hover {
text-decoration: none;
}
.signup-form form a {
color: #5cb85c;
text-decoration: none;
}
.signup-form form a:hover {
text-decoration: underline;
}
.img-profile {
width: 120px;
height: 120px;
margin-bottom: 15px
}
/* code */
/* for image */
.avatar .figure img {
width: 64px;
}
/* for choose file input */
.pull-left {
float: left;
width: 138px;
margin-left: -26px;
}
/* for biography */
textarea.form-control {
/* height: auto; */
margin-left: -15px;
width: 390px;
}
/* upload button */
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
margin-left: 38px;
padding-left: 22px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
<title>Bootstrap Simple Registration Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="signup-form">
<form action="#" method="post">
<h2>Create Account</h2>
<div class="form-group">
<div class="row">
<div class="col"><input type="text" class="form-control" name="first_name" placeholder="First Name" required="required"></div>
<div class="col"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required="required"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="screenname" placeholder="Username" required="required">
</div>
<div class="form-group avatar">
<div class="row">
<figure class="figure col-md-2 col-sm-3 col-xs-12">
<img class="img-rounded img-responsive" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
</figure>
<div class="form-inline col-md-10 col-sm-9 col-xs-12">
<input type="file" class="file-uploader pull-left">
<button type="submit" class="btn btn-sm btn-default-alt pull-left">Update Image</button>
</div>
</div>
</div>
<div class="form-group">
<label for="user-bio" class="col-lg-2 control-label">Biography</label>
<div class="col-lg-10">
<textarea name="user-bio" id="user-bio" class="form-control" cols="20" rows="3" placeholder="Brief biography"></textarea>
</div>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg btn-block">Create Account Now</button>
</div>
</form>
</div>
</body>
</html>
see the last few lines and run a snippet to view result
Newbie here. I am trying to come up with a simple one-page site but my contact form first name label is not attaching with the correct section.
I am attaching the image where the underlined "First Name" is not with the input, even though I have added it under another section and container.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Sitemize Hoşgeldiniz</title>
</head>
<body>
<nav class="nav-bar">
<ul class="nav-list">
<li class="nav-items">Home</li>
<li class="nav-items">Contact</li>
<li class="nav-items">About</li>
</ul>
</nav>
<section id="information">
<div class="container">
<div class="information-showcase">
<h1 id="header"><span id="header-span">Sitemize</span> Hoşgeldiniz</h1>
</div>
</div>
</section>
<section id="short-info">
<div class="container">
<div class="container-image-1">
<div class="row">
<div class="column">
<h2>Anında Sipariş</h2>
<i class="fas fa-shopping-cart fa-5x"></i>
</div>
<div class="column">
<h2>Hızlı Teslimat</h2>
<i class="fas fa-truck fa-5x"></i>
</div>
<div class="column">
<h2>Mmnuniyet Garantisi</h2>
<i class="fas fa-smile-beam fa-5x"></i>
</div>
</div>
</div>
</div>
</section>
<section class="contact-us">
<div class="container">
<form action="#">
<label for="fname">First Name</label>
<input type="text" id="fname" placeholder="Enter your first name">
<label for="fname">Last Name</label>
<input type="text" id="lname" placeholder="Enter your last name">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</section>
</body>
<script src="app.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</html>
/* Body */
body {
background-color: burlywood;
}
/* Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0A800C
}
.nav-items {
display: inline;
float: left;
}
.nav-items a {
text-decoration: none;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
}
.nav-items a:hover {
background-color: #111;
}
/* Image section */
.column {
float: left;
width: 25%;
padding: 10px;
margin-top: 25px;
margin-left: 100px;
background-color: aqua;
}
#information {
background:url("resim2.jpg");
background-repeat: no-repeat;
background-position: center;
height: 400px;
}
#header {
text-align: center;
padding-top: 150px;
color: aqua;
font-size: 60px;
}
.lead {
text-align: center;
}
/* Create three equal columns that floats next to each other */
.column {
float: center;
width: 20%;
padding: 10px;
height: 200px;
text-align: center;
background-color: burlywood;
}
.row {
margin-left:150px;
}
Thank you
Onur
the problem is you are using the
float
in your css that is makeing the problem
if you need your elements to be horizantly
add this to .row
.row {
margin-left: 150px;
display:flex;
}
remove this property from your css
.column
and wrap the items with a div that has this property
display:flex;
you can learn more about it here
https://www.youtube.com/watch?v=fYq5PXgSsbE
good luck!
look how i did it
https://stackblitz.com/edit/js-qjmbgj?file=index.html
https://js-qjmbgj.stackblitz.io
if you cant use display flex
use position :absolute ;
for more understanding
go here
https://www.khanacademy.org/computing/computer-programming/html-css/css-layout-properties/pt/css-position
image image2I'm trying to build a profile card in Bootstrap 3 and I'm having trouble getting the image to fit into the card. I think I can do this easier if I link to image in the css but I have many profile cards with all different people so I think keeping the image link in the HTML is better in this case.
Here's how I'd like it:
Any help is greatly appreciated. Thanks!
body {
font-family: 'Poppins';
overflow: hidden;
}
.navbar-inverse {
background-color: #fff !important;
border-color: #ffffff !important;
border-bottom: 1px solid #979797 !important;
}
#media (min-width: 768px){
.navbar {
border-radius: 0px !important;
}
}
.color-1{
color: #FCB900;
}
.sidebar{
color: #FCB900;
font-size: 21px;
float: left;
padding: 10px 5px;
cursor: pointer;
margin: 0 10px;
}
.logo a{
color: #424242 !important;
}
.logo{
background: white;
margin: 10px;
border: 1px solid #979797;
padding: 5px 20px;
font-size: 14px;
font-weight: 600;
}
.logo-a{
padding: 0 !important;
font-size: 13px !important;
}
/* Sidebar CSS */
.sidebar-logo{
background: white;
margin: 10px;
border: 1px solid #979797;
padding: 10px 20px;
font-size: 14px;
width: 50%;
margin-left: 10%;
text-align: center;
font-weight: 600;
}
.sidebar-title{
margin-left: 10%;
font-size: 12px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #fcb900;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 12px 8px 10px 25px;
text-decoration: none;
font-size: 14px;
color: #101010;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #101010;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 15px;
font-size: 25px;
margin-left: 50px;
}
.cart-icon{
font-size: 16px;
}
/*------------------------Profile Account----------------------------*/
.widget-author {
margin-bottom: 58px;
}
.author-card {
position: relative;
padding-bottom: 48px;
background-color: #fff;
box-shadow: 0 12px 20px 1px rgba(64, 64, 64, .09);
}
.author-card .author-card-cover {
position: relative;
width: 100%;
height: 100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.author-card .author-card-cover::after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
opacity: 0.5;
}
.author-card .author-card-cover > .btn {
position: absolute;
top: 12px;
right: 12px;
padding: 0 10px;
}
.author-card .author-card-profile {
display: table;
position: relative;
margin-top: -85px;
padding-right: 15px;
padding-bottom: 16px;
padding-left: 20px;
z-index: 5;
}
.author-card .author-card-profile .author-card-avatar, .author-card .author-card-profile .author-card-details {
display: table-cell;
vertical-align: middle;
}
.author-card .author-card-profile .author-card-avatar {
width: 85px;
border-radius: 50%;
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .15);
overflow: hidden;
}
.author-card .author-card-profile .author-card-avatar > img {
display: block;
width: 100%;
}
.author-card .author-card-profile .author-card-details {
padding-top: 50px;
padding-left: 15px;
}
.author-card .author-card-profile .author-card-name {
margin-bottom: 2px;
font-size: 14px;
font-weight: bold;
}
.author-card .author-card-profile .author-card-position {
display: block;
color: #8c8c8c;
font-size: 12px;
font-weight: 600;
}
.author-card .author-card-info {
margin-bottom: 0;
padding: 0 25px;
font-size: 13px;
}
.author-card .author-card-social-bar-wrap {
position: absolute;
bottom: -18px;
left: 0;
width: 100%;
}
.author-card .author-card-social-bar-wrap .author-card-social-bar {
display: table;
margin: auto;
background-color: #fff;
box-shadow: 0 12px 20px 1px rgba(64, 64, 64, .11);
}
.btn-style-1.btn-white {
background-color: #fff;
}
.list-group-item i {
display: inline-block;
margin-top: -1px;
margin-right: 8px;
font-size: 1.2em;
vertical-align: middle;
}
.mr-1, .mx-1 {
margin-right: .25rem !important;
}
.list-group-item.active:not(.disabled) {
border-color: #e7e7e7;
background: #fff;
color: #ac32e4;
cursor: default;
pointer-events: none;
}
.list-group-flush:last-child .list-group-item:last-child {
border-bottom: 0;
}
.list-group-flush .list-group-item {
border-right: 0 !important;
border-left: 0 !important;
}
.list-group-flush .list-group-item {
border-right: 0;
border-left: 0;
border-radius: 0;
}
.list-group-item.active {
z-index: 2;
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
}
a.list-group-item, .list-group-item-action {
color: #404040;
font-weight: 600;
}
.list-group-item {
padding-top: 16px;
padding-bottom: 16px;
-webkit-transition: all .3s;
transition: all .3s;
border: 1px solid #e7e7e7 !important;
border-radius: 0 !important;
color: #404040;
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
}
.list-group-item {
position: relative;
display: block;
padding: .75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid rgba(0,0,0,0.125);
}
.list-group-item.active:not(.disabled)::before {
background-color: #ac32e4;
}
.list-group-item::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background-color: transparent;
content: '';
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 15px;
}
}
#exTab1 .tab-content {
color : #FCB900;
background-color: #fff;
padding : 5px 15px;
}
#exTab2 h3 {
color : #FCB900;
background-color: #428bca;
padding : 5px 15px;
}
/* remove border radius for the tab */
#exTab1 .nav-pills > li > a {
border-radius: 0;
}
/* change border radius for the tab , apply corners on top*/
#exTab3 .nav-pills > li > a {
border-radius: 4px 4px 0 0 ;
}
#exTab3 .tab-content {
color : white;
background-color: #428bca;
padding : 5px 15px;
}
/* Sidebar CSS */
.navbar-inverse .navbar-nav>li>a:hover {
color: #333;
}
.banner{
background-image: url('img/banner.jpg');
background-position: center center;
background-size: 100%;
margin: 0;
width: 100%;
height: 250px;
}
#media (min-width: 320px) and (max-width: 600px) {
.logo{
border: 1px solid #fff;
}
.head{
border-bottom: 0px solid #fff !important;
}
.header-right{
display: none !important;
}
.logo-media{
background: white;
border: 1px solid #979797;
padding: 5px 20px;
font-size: 14px;
width: 50%;
text-align: center;
font-weight: 600;
}
.no-margin{
margin-top: 0px !important;
margin-bottom: 0px;
}
.icon{
position: absolute !important;
top: 11px;
right: 0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Travelling | Account Settings </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/css.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>
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-inverse head">
<div class="container-fluid">
<span style="" onclick="openNav()" class="sidebar">☰</span>
<div class="navbar-header logo">
<a class="logo-media" href="#">Logo</a>
</div>
<div id="mySidenav" class="sidenav">
×
<div class="sidebar-logo">
<a class="logo-a" href="#">Logo</a>
</div>
<span class="sidebar-title">My Account</span>
<span class="glyphicon glyphicon-home p-r-10"></span> Home
<span class="glyphicon glyphicon-road p-r-10"></span> My Booking
<span class="glyphicon glyphicon-envelope p-r-10"></span> Messages
<span class="glyphicon glyphicon-user p-r-10"></span> Account
<hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">
<span class="sidebar-title">Settings</span>
Language
<hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">
<span class="sidebar-title">Information</span>
Customer Service
<hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">
<span class="fa fa-sign-in p-r-10" aria-hidden="true"></span>Login
<span class="fa fa-user-o p-r-10" aria-hidden="true"></span>Sign Up!
</div>
<ul class="nav navbar-nav navbar-right no-margin">
<li class="icon"><span class="glyphicon glyphicon-shopping-cart color-1 cart-icon "></span></li>
<li class="header-right">Login</li>
<li class="header-right">Sign Up</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-lg-4 pb-5">
<!-- Account Sidebar-->
<div class="author-card pb-3">
<div class="author-card-cover">
<!-- <a class="btn btn-style-1 btn-white btn-sm" href="#" data-toggle="tooltip" title="" data-original-title="You currently have 290 Reward points to spend"><i class="fa fa-award text-md"></i> 290 points</a> --></div>
<div class="author-card-profile">
<div class="author-card-avatar"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Daniel Adams">
</div>
<div class="author-card-details">
<h5 class="author-card-name text-lg">Daniel Adams</h5><span class="author-card-position">Joined February 06, 2017</span>
</div>
</div>
</div>
<div class="wizard">
<nav class="list-group list-group-flush">
<a class="list-group-item" href="#">
<div class="d-flex justify-content-between align-items-center">
<div><i class="fe-icon-heart mr-1 text-muted"></i>
<div class="d-inline-block font-weight-medium text-uppercase">Account Setting</div>
</div>
</div>
</a>
<a class="list-group-item" href="#">
<div class="d-flex justify-content-between align-items-center">
<div><i class="fe-icon-heart mr-1 text-muted"></i>
<div class="d-inline-block font-weight-medium text-uppercase">My Booking</div>
</div>
</div>
</a>
<a class="list-group-item" href="#">
<div class="d-flex justify-content-between align-items-center">
<div><i class="fe-icon-tag mr-1 text-muted"></i>
<div class="d-inline-block font-weight-medium text-uppercase">Wish List</div>
</div>
</div>
</a>
</nav>
</div>
</div>
<!-- Profile Settings-->
<div class="col-lg-8 pb-5">
<!-- <form class="row">
<div class="col-md-6">
<div class="form-group">
<label for="account-fn">First Name</label>
<input class="form-control" type="text" id="account-fn" value="Daniel" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-ln">Last Name</label>
<input class="form-control" type="text" id="account-ln" value="Adams" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-email">E-mail Address</label>
<input class="form-control" type="email" id="account-email" value="daniel.adams#example.com" disabled="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-phone">Phone Number</label>
<input class="form-control" type="text" id="account-phone" value="+7 (805) 348 95 72" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-pass">New Password</label>
<input class="form-control" type="password" id="account-pass">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-confirm-pass">Confirm Password</label>
<input class="form-control" type="password" id="account-confirm-pass">
</div>
</div>
<div class="col-12">
<hr class="mt-2 mb-3">
<div class="d-flex flex-wrap justify-content-between align-items-center">
<div class="custom-control custom-checkbox d-block">
<input class="custom-control-input" type="checkbox" id="subscribe_me" checked="">
<label class="custom-control-label" for="subscribe_me">Subscribe me to Newsletter</label>
</div>
<button class="btn btn-style-1 btn-primary" type="button" data-toast="" data-toast-position="topRight" data-toast-type="success" data-toast-icon="fe-icon-check-circle" data-toast-title="Success!" data-toast-message="Your profile updated successfuly.">Update Profile</button>
</div>
</div>
</form> -->
<h1>Account Settings </h1>
<div id="exTab1">
<ul class="nav nav-pills">
<li>
Personal Information
</li>
<li>Travel
</li>
<li>Security
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane" id="1a">
<form class="row">
<div class="col-md-4">
<div class="form-group">
<label for="First Name">First Name*</label>
<input class="form-control" type="text" id="account-fn" placeholder="First Name" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Last Name">Last Name*</label>
<input class="form-control" type="text" id="account-ln" placeholder="Last Name" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="gender">Gender</label>
<select class="form-control" id="sel1" placeholder="Gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="First Name">First Name*</label>
<input class="form-control" type="text" id="account-fn" placeholder="First Name*" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Last Name">Last Name*</label>
<input class="form-control" type="text" id="account-ln" placeholder="Last Name*" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Passport No.">Passport No.</label>
<input class="form-control" type="password" id="account-pass">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="Date of Birth">Date of Birth</label>
<input class="form-control" type="date" value="2011-08-19" id="example-date-input">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="Country">Country</label>
<select class="selectpicker countrypicker form-control" data-flag="true" ></select>
</div>
</div>
<div class="col-12">
<hr class="mt-2 mb-3">
<div class="d-flex flex-wrap justify-content-between align-items-center">
<button class="btn btn-style-1 btn-primary" type="button" data-toast="" data-toast-position="topRight" data-toast-type="success" data-toast-icon="fe-icon-check-circle" data-toast-title="Success!" data-toast-message="Your profile updated successfuly.">Update Profile</button>
</div>
</div>
</form>
</div>
<div class="tab-pane" id="2a">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
<div class="tab-pane" id="3a">
<h4> Change Password </h4>
<form>
<div class="form-group">
<label for="email" style="color:#2EC4B6">Current Password *</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Current Password">
</div>
<div class="form-group">
<label for="email" style="color:#2EC4B6">New Password *</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password">
</div>
<button type="submit" class="btn" style="background: #FCB900; color:#fff;">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</body>
</html>
Maybe you should consider something like this! :)
.author-card-shape {
width: 85px;
height: 85px;
border-radius: 50%;
overflow: hidden;
}
.author-card-img {
max-width: 100%;
height: auto;
}
<figure class="author-card-shape">
<img class="author-card-img" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Daniel Adams">
</figure>
I'm new to HTML/CSS and had some questions about my CodeCamp project
How do I move the label and input to the center of the form? I've tried using text-align: center on my row class but it only separates the label and input.
Why are the checkboxes not grouped together? I've tried expanding the bottom margin but it brings the checkboxes on the left column where the labels are supposed to be.
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Nunito', sans-serif;
background-color: #ea8a8a;
}
#title {
color: #685454;
text-align: center;
padding: 10px;
}
#description {
color: #685454;
text-align: center;
padding: 10px;
}
#outer-form {
border-radius: 10px;
background-color: #ebd5d5;
padding-bottom: 10px;
}
.row {}
.label {
color: #685454;
display: inline-block;
text-align: right;
float: left;
padding-top: 5px;
width: 190px;
margin-right: 20px;
}
#name {
padding: 4px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 110px;
}
#email {
padding: 4px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 110px
}
#number {
padding: 4px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 110px
}
#dropdown {
height: 30px;
margin-top: 5px;
margin-bottom: 14px;
display: inline-block;
vertical-align: middle;
horizontal-align: bottom;
margin-left: 20px;
width: 120px
}
input[type=radio] {
margin-left: 20px;
margin-bottom: 30px;
vertical-align: baseline;
margin-top: 20px;
}
input[type=checkbox] {
margin-left: 20px;
vertical-align: baseline;
}
#comments {
margin-top: 10px;
margin-bottom: 5px;
vertical-align: middle;
margin-left: 20px;
width: 150px;
height: 50px;
}
#submit {
background-color: #ea8a8a;
color: white;
border-radius: 5px;
font-size: 14px;
margin-top: 10px;
margin-bottom: 20px;
display: inline-block;
vertical-align: middle;
margin-left: 160px;
width: 100px;
height: 40px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700">
<h1 id="title">Doge Adoption Form</h1>
<div id="outer-form">
<p id="description">Please fill out the questionare below</p>
<form id="survey-form">
<div class="row">
<label class="label" id="name-label" for="name">Name: </label>
<input id="name" placeholder="Enter your name" required> </input>
</div>
<div class="row">
<label class="label" id="email-label" for="email">Email: </label>
<input id="email" type="email" placeholder="Enter your email" required> </input>
</div>
<div class="row">
<label class="label" id="number-label" for="age">Age: </label>
<input id="number" min="18" max="99" type="number" placeholder="Age:" required> </input>
</div>
<div class="row">
<text class="label">What is your favorite dog: </text>
<select id="dropdown">
<option value="Pomeranian"> Pomeranian</option>
<option value="Beagle"> Beagle</option>
<option value="German Shepard"> German Shepard</option>
</select>
</div>
<div class="row">
<label class="label">How likely are you to pick up doge poop:</label>
<input type="radio" name="odds" value="very likely"> Very Likely
<input type="radio" name="odds" value="not likely"> Not Likely
</div>
<div class="row">
<label class="label"> What tricks will you teach (select all that apply)</label>
<input type="checkbox" name="trick" value="Sit">Sit<br>
<input type="checkbox" name="trick" value="Army crawl">Army crawl<br>
<input type="checkbox" name="trick" value="Roll over">Roll over<br>
<input type="checkbox" name="trick" value="Speak">Speak<br>
</div>
<div class="row">
<label class="label">Any additional information?</label>
<textarea id="comments" placeholder="Enter your comment here..."></textarea>
</div>
<div class="row">
<input id="submit" type="submit" value="Submit">
</div>
</form>
</div>
Look at this answer, I have added two styles in your page:
#survey-form {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.div50 {
float: left;
width: 50%;
}
#survey-form for make the form alignment into center.
.div50 is to divide div as 50% of the parent div.
{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Nunito', sans-serif;
background-color: #ea8a8a;
}
#title {
color: #685454;
text-align: center;
padding: 10px;
}
#description {
color: #685454;
text-align: center;
padding: 10px;
}
#outer-form {
border-radius: 10px;
background-color: #ebd5d5;
padding-bottom: 10px;
}
.row {}
.label {
color: #685454;
display: inline-block;
text-align: right;
float: left;
padding-top: 5px;
width: 190px;
margin-right: 20px;
}
#name {
padding: 4px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 110px;
}
#email {
padding: 4px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 110px
}
#number {
padding: 4px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 110px
}
#dropdown {
height: 30px;
margin-top: 5px;
margin-bottom: 14px;
display: inline-block;
vertical-align: middle;
horizontal-align: bottom;
margin-left: 20px;
width: 120px
}
input[type=radio] {
margin-left: 30px;
margin-bottom: 15px;
vertical-align: baseline;
margin-top: 10px;
}
input[type=checkbox] {
margin-left: 30px;
vertical-align: baseline;
}
#comments {
margin-top: 10px;
margin-bottom: 5px;
vertical-align: middle;
margin-left: 20px;
width: 150px;
height: 50px;
}
#submit {
background-color: #ea8a8a;
color: white;
border-radius: 5px;
font-size: 14px;
margin-top: 10px;
margin-bottom: 20px;
display: inline-block;
vertical-align: middle;
margin-left: 160px;
width: 100px;
height: 40px;
}
#survey-form {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.div50 {
float: left;
width: 50%;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700">
<h1 id="title">Doge Adoption Form</h1>
<div id="outer-form">
<p id="description">Please fill out the questionare below</p>
<form id="survey-form">
<div class="row">
<label class="label" id="name-label" for="name">Name: </label>
<input id="name" placeholder="Enter your name" required>
</div>
<div class="row">
<label class="label" id="email-label" for="email">Email: </label>
<input id="email" type="email" placeholder="Enter your email" required>
</div>
<div class="row">
<label class="label" id="number-label" for="age">Age: </label>
<input id="number" min="18" max="99" type="number" placeholder="Age:" required>
</div>
<div class="row">
<text class="label">What is your favorite dog: </text>
<select id="dropdown">
<option value="Pomeranian"> Pomeranian</option>
<option value="Beagle"> Beagle</option>
<option value="German Shepard"> German Shepard</option>
</select>
</div>
<div class="row">
<div class="div50"><label class="label">How likely are you to pick up doge poop:</label></div>
<div class="div50">
<input type="radio" name="odds" value="very likely"> <label>Very Likely</label><br>
<input type="radio" name="odds" value="not likely"> <label>Not Likely</label>
</div>
</div>
<div class="row">
<div class="div50">
<label class="label"> What tricks will you teach (select all that apply)</label>
</div>
<div class="div50">
<input type="checkbox" name="trick" value="Sit">Sit<br>
<input type="checkbox" name="trick" value="Army crawl">Army crawl<br>
<input type="checkbox" name="trick" value="Roll over">Roll over<br>
<input type="checkbox" name="trick" value="Speak">Speak<br>
</div>
</div>
<div class="row">
<label class="label">Any additional information?</label>
<textarea id="comments" placeholder="Enter your comment here..."></textarea>
</div>
<div class="row">
<input id="submit" type="submit" value="Submit">
</div>
</form>
</div>
here is the code for u first of all a neat and clear alignment of a form you should write the code using bootstarp.
put this links also for working the code dear.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Signingroup Financial</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" type="text/css">
<link rel='stylesheet' href='http://fonts.googleapis.com/icon?family=Material+Icons' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet" type="text/css">
<div class="row">
<div class="sg_formslist">
<div class="col-sm-12 col-md-12">
<div id="Selection-1-container" >
<form class="form-horizontal" id="form1">
<div class="col-sm-12 ">
<div class="col-sm-2">
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-12">
<label class="control-label col-sm-6">Surname<span class="impstar">*</span></label>
<div class="col-sm-6">
<input type="text" class="form-control" name="customer_name" Placeholder="Customer Name" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label class="control-label col-sm-6">Mobile Number 1<span class="impstar">*</span></label>
<div class="col-sm-6">
<input type="tel" name="mob_num1" class="form-control" size="10" maxlength="10" Placeholder="+91 - 83445839284" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label class="control-label col-sm-6">Mobile Number 2<span class="impstar">*</span></label>
<div class="col-sm-6">
<input type="tel" name="mob_num1" class="form-control" size="10" maxlength="10" Placeholder="+91 - 83445839284 ">
</div>
</div>
</div>
<div class="form-group ">
<div class="col-sm-12">
<label class="control-label col-sm-6">Gender<span class="impstar">*</span></label>
<div class="col-sm-6">
<div class="radio" required>
<label >
<input type="radio" name="Selection" id="Selection-1" value="female" checked>
Female
</label>
<label >
<input type="radio" name="Selection" id="Selection-1" value="male" >
Male
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label class="control-label col-sm-6">Description <span class="impstar">*</span></label>
<div class="col-sm-6">
<textarea class="form-control" rows="3" name="description" placeholder="Description For Discount"></textarea>
</div>
</div>
</div>
<div class="form-group text-right">
<i class="fa fa-paper-plane plnay" ></i>
<input type="submit" class="btn btn-info" value="Submit ">
</div>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
let you try this code its working.
I'm very happy with my contact form, however the text in the message area overlaps the icon. I find this strange because it starts off on a perfect indent but as the person writes more it goes right into the icon. Can anyone help on how to fix this tiny issue. I have added a photo. My code is below:
<!--Contact-->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-horizontal" method="post">
<fieldset>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="fname" name="name" placeholder="Name" type="text" class="form-control">
<label for="fname" class="fa fa-user input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="email" name="email" type="text" placeholder="Email" class="form-control">
<label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"></textarea>
<label for="message" class="fa fa-pencil-square-o input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-outline-secondary btn-md">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
html{
box-sizing: border-box;}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body{background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family:"Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
navbar-brand{
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
.avatar{
border-radius: 5em;
margin-right: .5em;
margin-left: 1em;
}
.intro{
display: inline-block;
width: 100%;
padding: 65px 0 65px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1{
font-weight: medium;
text-shadow:5px 5px 10px black;
}
h4{
font-size: -.5em;
}
.row{
margin-right: 4em;
margin-left: 4em;
margin-top: .10em;
padding-bottom: -.30em;
}
.container {
margin-left: 17em;
padding-top: 1.5em;
}
.bigicon {
font-size: 35px;
color: #808080;
}
.input-icon {
position: absolute;
left: .5rem;
top: calc(50% - 0.5em);
/* Keep icon in center of input, regardless of the input height */
}
#message {
vertical-align: middle;
}
input {
padding-right:30px;
}
.form-control {
text-indent: 2rem;
width: 75%;
}
.input-wrapper {
position: relative;
}
.btn{
margin-right: 10em;
}
#media screen and (min-width: 640px){
}
#media screen and (min-width: 960px){
}
[![enter image description here][1]][1]
main {flex: 1;}
Try this snippet. I have changed the input-icon to align with your input text.
html {
box-sizing: border-box;
}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body {
background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: "Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
navbar-brand {
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
.avatar {
border-radius: 5em;
margin-right: .5em;
margin-left: 1em;
}
.intro {
display: inline-block;
width: 100%;
padding: 65px 0 65px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1 {
font-weight: medium;
text-shadow: 5px 5px 10px black;
}
h4 {
font-size: -.5em;
}
.row {
margin-right: 4em;
margin-left: 4em;
margin-top: .10em;
padding-bottom: -.30em;
}
.container {
margin-left: 17em;
padding-top: 1.5em;
}
.bigicon {
font-size: 35px;
color: #808080;
}
.input-icon {
position: absolute;
left: .5rem;
top: .9rem;
/* Keep icon in center of input, regardless of the input height */
}
#message {
vertical-align: middle;
}
input {
padding-right: 30px;
}
input.form-control {
padding-left: 2rem;
}
.input-wrapper {
position: relative;
}
textarea.form-control {
padding-left: 2rem;
}
.btn {
margin-right: 10em;
}
#media screen and (min-width: 640px) {}
#media screen and (min-width: 960px) {}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Contact-->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-horizontal" method="post">
<fieldset>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="fname" name="name" placeholder="Name" type="text" class="form-control">
<label for="fname" class="fa fa-user input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="email" name="email" type="text" placeholder="Email" class="form-control">
<label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"></textarea>
<label for="message" class="fa fa-pencil-square-o input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-outline-secondary btn-md">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>