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
Related
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.
i have issue with my design in contact form i am trying to represent my contact form like following picture: https://cdn.discordapp.com/attachments/772606698283073557/951615088966631505/unknown.png
But my columns display vertically and i want the textarea (Message) to be inline with input Subject, could you help me please? Thank you!
My HTML:
<section class="contact-form">
<div class="container">
<div class="formRow row">
<div class="titleSection text-center">
<h2 class="contact_text text-center">Contact Us</h2>
</div>
<form action="">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Subject" required>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="col-md-6 m-0">
<div class="form-group">
<textarea name="text" id="" class="form-control" cols="74" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12 text-center mt-5">
<div class="contact-btn text-center">
<input type="sumbit" class="btn" value="Sent Message">
</div>
</div>
</form>
</div>
</div>
</section>
My css:
/***********************************************
For Contact Section
************************************************/
.contact-form {
padding: 56px 0 60px;
}
.formRow{
display: block;
flex-wrap: nowrap;
margin-right: -15px;
margin-left: -15px;
}
.contact_text{
color: #990000;
font-size: 40px;
font-weight: 700;
}
.titleSection{
margin-bottom: 30px;
}
.contact-form .form-group .form-control {
border-radius: 0;
padding: 20px;
background: transparent;
border-color: black;
min-height: 70px;
font-size: 16px;
width: 100%;
color: black;
}
.contact-form .form-group textarea {
height: 240px;
}
.btn{
letter-spacing: 0.1em;
cursor: pointer;
font-size: 14px;
font-weight: 400;
padding: 0px 0px;
line-height: 45px;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
color:#fff;
background-color: #990000;
}
You need to encapsulate the columns inside a row
...
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
<div class="col-md-12">
...
</div>
</div>
...
You can check the example below, please note that I have removed the md from the columns classes because the preview is less than the medium screen breakpoint
.contact-form {
padding: 56px 0 60px;
}
.formRow{
display: block;
flex-wrap: nowrap;
margin-right: -15px;
margin-left: -15px;
}
.contact_text{
color: #990000;
font-size: 40px;
font-weight: 700;
}
.titleSection{
margin-bottom: 30px;
}
.contact-form .form-group .form-control {
border-radius: 0;
padding: 20px;
background: transparent;
border-color: black;
min-height: 70px;
font-size: 16px;
width: 100%;
color: black;
}
.contact-form .form-group textarea {
height: 240px;
}
.btn{
letter-spacing: 0.1em;
cursor: pointer;
font-size: 14px;
font-weight: 400;
padding: 0px 0px;
line-height: 45px;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
color:#fff;
background-color: #990000;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section class="contact-form">
<div class="container">
<div class="formRow row">
<div class="titleSection text-center">
<h2 class="contact_text text-center">Contact Us</h2>
</div>
<form action="">
<div class="row">
<div class="col-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Subject" required>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="col-6 m-0">
<div class="form-group">
<textarea name="text" id="" class="form-control" cols="74" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="col-12 text-center mt-5">
<div class="contact-btn text-center">
<input type="sumbit" class="btn" value="Sent Message">
</div>
</div>
</div>
</form>
</div>
</div>
</section>
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 trying to center the submit button at the bottom.
Here is the code:
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: #F8F8FF;
}
.header {
width: 30%;
margin:50px auto 0px;
color: white;
background: #5F9EA0;
text-align:center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
}
form, .content {
width: 576px;
margin: 0px auto;
padding: 20px;
border: 1px solid #B0C4DE;
background: white;
border-radius: 0px 0px 10px 10px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 20px;
width: 60%;
padding: 5px 10px;
font-size: 1em;
border-radius: 1px;
border: 1px solid gray;
margin-left: 3px;
}
.btn {
padding: 8px;
font-size: 1em;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
margin:0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Register-Art and chill</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="header">
<h2> Register </h2>
</div>
<form method="post" action="register.php">
<div class="input-group">
<label> Username </label>
<input type="text" name="username">
</div>
<div class="input-group">
<label> Email </label>
<input type="email" name="email">
</div>
<div class="input-group">
<label> Password </label>
<input type="password" name="password_1">
</div>
<div class="input-group">
<label> ConfirmPassword </label>
<input type="password" name="password_2">
</div>
<div class="input-group">
<button type="submit" class="btn"> Register </button>
</div>
</form>
</body>
</html>
Replace your .btn CSS class with this:
.btn {
padding: 8px;
font-size: 1em;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
margin:0 auto;
display:block;
}
The problem is the default display:inline-block
You can put text-align: center; on the container that the button is in, i.e. .input-group. Of course if you put it in .input-group, all the other elements whose parent is an .input-group will be centered as well, so you might have to make a class just for the button or put an inline style on the button's .input-group parent.
CSS
.input-group-btn {
text-align:center;
}
HTML
<div class="input-group input-group-btn">
<button type="submit" class="btn"> Register </button>
</div>
Add display: block; to .btn class
To make it more neat and clean, replace your html with the following code:-
<form method="post" action="register.php">
<div class="form-inner">
<div class="input-group">
<label> Username </label>
<input type="text" name="username">
</div>
<div class="input-group">
<label> Email </label>
<input type="email" name="email">
</div>
<div class="input-group">
<label> Password </label>
<input type="password" name="password_1">
</div>
<div class="input-group">
<label> ConfirmPassword </label>
<input type="password" name="password_2">
</div>
<div class="input-group">
<button type="submit" class="btn"> Register </button>
</div>
</div>
</form>
And add this to your CSS:-
.form-inner {
width: 60%;
}
Live example here:- https://jsfiddle.net/sq6zow6v/
I created a form and I want the content of the form to all be left-aligned. The inputs and paragraphs in the form end up on top of each other when I use float: left; so I am trying to figure out how to properly implement this so they are all neatly stacked on top of one another.
The header is in a perfect position as is. I only want the form to be left aligned.
* {
box-sizing: border-box;
}
body {
background-color: black;
margin-left: 20%;
margin-right: 20%;
margin-top: 3%;
}
button {
background-color: white;
border: none;
color: black;
float: left;
font-family: Gilroy-Bold;
font-size: 57px;
height: 110px;
margin-bottom: 40px;
margin-top: 40px;
width: 300px;
}
button:hover {
background-color: lightgray;
}
form {
float: left;
}
textarea {
float: left;
font-family: Gilroy;
font-size: 25px;
height: 400px;
padding-left: 10px;
padding-top: 5px;
width: 600px;
}
#font-face {
font-family: Gilroy;
color: white;
src: typefaces/gilroy-bold.ttf (gilroy-bold.ttf);
}
form {
font-family: Gilroy;
padding-top: 20px;
padding-bottom: 40px;
}
h1 {
color: white;
font-family: Gilroy-Bold;
font-size: 95px;
margin-bottom: 0px;
margin-top: 0px;
text-align: center;
}
hr {
border: 0;
border-bottom: 1px solid white;
border-top: 12px solid white;
width: 760px;
}
input {
float: left;
font-family: Gilroy;
font-size: 25px;
padding-left: 5px;
height: 50px;
width: 500px;
}
p{
color: white;
float: left;
font-family: Gilroy-Bold;
font-size: 30px;
}
<DOCTYPE! html>
<html>
<head>
<title>1520 Sedgwick Avenue - Sign The Petition</title>
<link href="css/form.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="petition.js"></script>
</head>
<body>
<header>
<hr>
<h1>SIGN THE PETITION</h1>
<hr>
</header>
<div class="col-sm-6 col-sm-offset-3">
<form action="petition.php" method="POST">
<p>FIRST NAME</p>
<div id="first-name-group" class="form-group">
<label for="first-name">First Name</label>
<input type="text" class="form-control" name="first-name" placeholder="John">
</div>
<p>LAST NAME</p>
<div id="last-name-group" class="form-group">
<label for="last-name">Last Name</label>
<input type="text" class="form-control" name="last-name" placeholder="Smith">
</div>
<p>EMAIL</p>
<div id="email-group" class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" name="email" placeholder="jsmith#gmail.com">
</div>
<p>COUNTRY</p>
<div id="country-group" class="form-group">
<label for="country">Country</label>
<input type="text" class="form-control" name="country" placeholder="United States">
</div>
<p>STREET ADDRESS</p>
<div id="street-address-group" class="form-group">
<label for="street-address">Street Address</label>
<input type="text" class="form-control" name="street-address" placeholder="123 Brick Lane">
</div>
<p>ZIP CODE</p>
<div id="zip-code-group" class="form-group">
<label for="zip-code">Zip Code</label>
<input type="text" class="form-control" name="zip-code" placeholder="12345">
</div>
<p>COMMENT (OPTIONAL)</p>
<div id="comment-group" class="form-group">
<label for="comment">Comment</label>
<textarea rows "4" cols = "50" type="text" class="form-control" name="comment" placeholder="I'm signing because..."></textarea>
</div>
<button type="submit" class="btn btn-success">SUBMIT</button>
</form>
</div>
</body>
</html>
Cleared form-group class. Because you are floating the inputs to left. The wrapper of it which is form-group must clear itself so that the next div can come after it.
I also made paragraph tag to take 100% width.
Also note that for refers to the name attribute in the <input> tag in your code. It should refer to the id attribute. [ Mentioned by - Roy_Dorsthorst]
* {
box-sizing: border-box;
}
body {
background-color: black;
margin-left: 20%;
margin-right: 20%;
margin-top: 3%;
}
button {
background-color: white;
border: none;
color: black;
float: left;
font-family: Gilroy-Bold;
font-size: 57px;
height: 110px;
margin-bottom: 40px;
margin-top: 40px;
width: 300px;
}
.form-group:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
button:hover {
background-color: lightgray;
}
form {
float: left;
}
textarea {
float: left;
font-family: Gilroy;
font-size: 25px;
height: 400px;
padding-left: 10px;
padding-top: 5px;
width: 600px;
}
#font-face {
font-family: Gilroy;
color: white;
src: typefaces/gilroy-bold.ttf (gilroy-bold.ttf);
}
form {
font-family: Gilroy;
padding-top: 20px;
padding-bottom: 40px;
}
h1 {
color: white;
font-family: Gilroy-Bold;
font-size: 95px;
margin-bottom: 0px;
margin-top: 0px;
text-align: center;
}
hr {
border: 0;
border-bottom: 1px solid white;
border-top: 12px solid white;
width: 760px;
}
input {
float: left;
font-family: Gilroy;
font-size: 25px;
padding-left: 5px;
height: 50px;
width: 500px;
}
p{
color: white;
float: left;
font-family: Gilroy-Bold;
font-size: 30px;
width: 100%;
}
<DOCTYPE! html>
<html>
<head>
<title>1520 Sedgwick Avenue - Sign The Petition</title>
<link href="css/form.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="petition.js"></script>
</head>
<body>
<header>
<hr>
<h1>SIGN THE PETITION</h1>
<hr>
</header>
<div class="col-sm-6 col-sm-offset-3">
<form action="petition.php" method="POST">
<p>FIRST NAME</p>
<div id="first-name-group" class="form-group">
<label for="first-name">First Name</label>
<input type="text" class="form-control" id="first-name" name="first-name" placeholder="John">
</div>
<p>LAST NAME</p>
<div id="last-name-group" class="form-group">
<label for="last-name">Last Name</label>
<input type="text" class="form-control" id="last-name" name="last-name" placeholder="Smith">
</div>
<p>EMAIL</p>
<div id="email-group" class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="jsmith#gmail.com">
</div>
<p>COUNTRY</p>
<div id="country-group" class="form-group">
<label for="country">Country</label>
<input type="text" class="form-control" id="country" name="country" placeholder="United States">
</div>
<p>STREET ADDRESS</p>
<div id="street-address-group" class="form-group">
<label for="street-address">Street Address</label>
<input type="text" class="form-control" id="street-address" name="street-address" placeholder="123 Brick Lane">
</div>
<p>ZIP CODE</p>
<div id="zip-code-group" class="form-group">
<label for="zip-code">Zip Code</label>
<input type="text" class="form-control" id="zip-code" name="zip-code" placeholder="12345">
</div>
<p>COMMENT (OPTIONAL)</p>
<div id="comment-group" class="form-group">
<label for="comment">Comment</label>
<textarea rows "4" cols = "50" type="text" class="form-control" id="comment" name="comment" placeholder="I'm signing because..."></textarea>
</div>
<button type="submit" class="btn btn-success">SUBMIT</button>
</form>
</div>
</body>
</html>