I have two input fields for the user to fill namely username and password. This is how it looks like
Here is the code below for the same
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-3">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
</form>
</div>
</body>
</html>
Now I want the Email and Password to be aligned vertically just like the input fields are aligned.
I read about form-control-static but I am unable to see the effect here. I tried using it for the classes for Email and Password something like
<label class="control-label col-sm-2 form-control-static" for="pwd">Password:</label>
But I do not see any change. What am I doing wrong?
Note: I am using Bootstrap 3
The above style is coming from Bootstrap 3 only, "Text-align:right"
#media (min-width: 768px)
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
If you want to align labels to left, override the above property in your code as follows:
#media (min-width: 768px)
.form-horizontal .control-label {
text-align: left;
}
Your code seems to work as expected..., try verifying if you have made any css changes...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<body>
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class=" col-sm-2 col-xs-3" for="email">Email:</label>
<div class="col-sm-3 col-xs-3">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label class=" col-sm-2 col-xs-3" for="pwd">Password:</label>
<div class="col-sm-3 col-xs-3">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
</form>
</div>
UPDATE the control-label class is by default aligning items to the right on bigger screens.. to solve it you can remove it.. or use bootstrap alingment classes...
Related
I want to design a page in which half-left portion of the viewport for Login & other half-right portion of the viewport for Signup i.e with split layout(side by side in tablet,desktop, and large screen & stacked(top for login & Bottom for Signup after reaching within a mobile width range) in mobile, and lower devices). I made this with two col-md-6 (one for Login & another for Signup) with 100vh for min-width:768px and above and with 50vh for max-width:768px devices(means in mobile devices it display as stacked) and below. I made this code but after size testing(by scaling browser window) I am facing problem(on scale down) like Login portion(i.e. Half-left) height take size as the login form. I have not given any specific width & height of any div(Because bootstrap handle it automatically using grid system). I am giving the code so that you can help me.
I Want this Output(Actually I get it with small flaw)
Sample-in-mobile
Sample-in-Computer
Problem:
Problem
/*index.css*/
body {
padding-top: 56px;
}
.tmbl-nav {
background-color: #001427;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}
/*.left-side,.right-side{
height:50vh;
width:100%;
}
*/
.left-side {
background-color: #BF0603;
}
.right-side {
background-color: #8D0801;
}
.form-box {
background-color: white;
padding: 25px 25px 25px 25px;
}
/* Medium devices (landscape tablets, 768px and down) */
#media only screen and (max-width:768px) {
.nav-link {
text-align: center;
}
}
#media screen and (min-width:768px) {
.left-side,
.right-side {
height: 100vh;
}
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--index.php-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles/index.css" />
<title>My Web Site</title>
</head>
<body>
<?php include_once("inc/header.php");?>
<!--navbar for navigation-->
<div class="container-fluid">
<div class="row no-gutters">
<div class="left-side col-md-6 d-flex align-items-center">
<div class="container">
<div class="row no-gutters justify-content-center">
<div class="col-md-6 text-center align-items-center">
<div class="form-box-top text-center text-light">
<h2>Login Now</h2>
<p>Enter Username & Password to Log on.</p>
</div>
<div class="form-box rounded">
<form>
<div class="form-group">
<label for="inputUName" class="sr-only">Username</label>
<input type="text" class="form-control" id="inputUName" aria-describedby="userName" placeholder="Username" />
</div>
<div class="form-group">
<label for="inputPsword" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPsword" aria-describedby="password" placeholder="Password" />
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="right-side col-md-6 d-flex align-items-center">
<div class="container">
<div class="row no-gutters justify-content-center">
<div class="col-md-6 text-center align-items-center">
<div class="form-box-top text-center text-light">
<h2>Register Now</h2>
<p>Fill in the below form to get instant access.</p>
</div>
<div class="form-box rounded">
<form>
<div class="form-group">
<label for="inputFName" class="sr-only">Full Name</label>
<input type="text" class="form-control" id="inputFName" aria-describedby="fullName" placeholder="Full Name" />
</div>
<div class="form-group">
<label for="inputEmail" class="sr-only">Email</label>
<input type="email" class="form-control" id="inputEmail" aria-describedby="email" placeholder="Email" />
</div>
<div class="form-group">
<label for="inputMobile" class="sr-only">Mobile</label>
<input type="number" class="form-control" id="inputMobile" aria-describedby="mobile" placeholder="Mobile Number" />
</div>
<div class="form-group">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword" aria-describedby="password" placeholder="Password" />
</div>
<div class="form-group">
<label for="inputCPassword" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputCPassword" aria-describedby="confirmPassword" placeholder="Confirm Password" />
</div>
<div class="form-group row text-dark">
<label for="checkYesNo" class="col-auto pt-0 col-form-label">You have Reference ID:</label>
<div class="col-auto">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio1" value="option1" />
<label class="custom-control-label" for="inlineRadio1">Yes</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio2" value="option2" />
<label class="custom-control-label" for="inlineRadio2">No</label>
</div>
</div>
</div>
<div class="form-group">
<label for="inputREmail" class="sr-only">Reference Email ID</label>
<input type="email" class="form-control" id="inputREmail" aria-describedby="referenceEmail" placeholder="Referral Email ID" />
</div>
<div class="form-group text-dark">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkTC" />
<label class="custom-control-label" for="checkTC">
I Agree all the Terms & Condition
</label>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JQuery,then Popper.js, then Bootstrap.min.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/indexnavigation.js"></script>
</body>
</html>
just remove the following code present in your CSS, That should fix it.
#media screen and (min-width:768px) {
.left-side,
.right-side {
height: 100vh;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<h1>Contact Person</h1>
<div class="form-group row">
<div class="col-xs-6 form-field">
<label for="ex1">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</section>
The two input fields do not align in the same line when i take the label off the second field how can this be corrected ?
Make the label as siblings of the form-group instead if you are planning to use only one label, and you can instead use <span> or any other element, because semantically speaking, <label> is not for this kind of naming, much like using <h1> in Contact Person instead of a <label> with style
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<h1>Contact Person</h1>
<label for="ex1">Name</label>
<div class="form-group row">
<div class="col-xs-6 form-field">
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</section>
Swellar has a good solution in his answer. However, if you are looking for an alternative, you can put a dummy label element and then set its CSS property as visibility: hidden;. So, you don't have to take out your label element from second field, and this label will be hidden.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<h1>Contact Person</h1>
<div class="form-group row">
<div class="col-xs-6 form-field">
<label for="ex1">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<label for="ex1" style="visibility: hidden;">LName</label>
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</section>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<div class="col-xs-12"><h1>Contact Person</h1> </div>
<div class="form-group">
<div class="col-xs-6 form-field">
<label for="ex1">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
</div>
<div class="form-group">
<div class="col-xs-6 form-field">
<label for="ex2">Last Name</label>
<input class="form-control" id="ex2" placeholder="Last name" type="text">
</div>
</div>
</section>
You have to add a <label> to your last name field.
You should always include a label for better accessibility.
If you don't want to use a label (which is not recommended), you can use flex-box to align it to the bottom:
.form-group: {
align-items: flex-end;
display: flex;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- website templates CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- custom CSS -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!-- website templates fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="form-group row">
<div class="col-xs-6 form-field">
<label for="ex1" style="margin-bottom:0">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<label></label>
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</form>
</div>
</body>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- website template JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- custom date picker JavaScript -->
<script src="/js/myScript1.js"></script>
</html>
I am a bit new to angular and bootstrap so bear with me. I think form is only a part of bootstrap to make it easier.
I can't seem to align it well with the rest of my html. The form is at the bottom and the top of the form where it says Job Name is against the edge of the panel right above it. I want to space it more to look better. But padding/margin/css isn't working so IDK how to do it. Thanks!
<form name="jobForm">
<div class="form-group">
<label for="jobName">Job Name</label>
<input type="text"/>
</div>
<div>
<label>By:</label>
<input type="email" ng-model="reviewCtrl.review.author" required />
<!-- $ referencing property on the form, valid comes with angular-->
<div> reviewForm is {{reviewForm.$valid}}</div>
<input type="submit" value="Submit" />
</div>
</form>
You'll need to post a minimal, complete, and verifiable example. Adding a margin-top or padding-top both work on the form element. It must be something else in your code that is causing this problem. Is the element above the form using the float property?
form {
margin-top: 25px;
padding-top: 25px;
// Both margin-top and padding-top work.
}
<form name="jobForm">
<div class="form-group">
<label for="jobName">Job Name</label>
<input type="text"/>
</div>
<div>
<label>By:</label>
<input type="email" required/>
<div>Text</div>
<input type="submit" value="Submit" />
</div>
</form>
Add bootstrap panel element and don't forget to add container.You maybe forgot to add css class properly, unless it works fine with bootatraps current margins and paddings.
.form{
margin:10px;
}
<title>Bootstrap Example</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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel panel-default">
<form class="form-horizontal form" name="jobForm" >
<div class="form-group">
<label class="control-label col-sm-2" for="jobName">Job Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" >By:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div> reviewForm is {{reviewForm.$valid}}</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
You can use form class on form tag & add following CSS
form {
margin-top: 25px;
}
Hi below is the simplest solution, You have to put simple div element above the form with some height, now their is an empty div of height 50px above the form
<div style="height:50px;"></div>
<form name="jobForm">
<div class="form-group">
<label for="jobName">Job Name</label>
<input type="text"/>
</div>
<div>
<label>By:</label>
<input type="email" ng-model="reviewCtrl.review.author" required />
<!-- $ referencing property on the form, valid comes with angular-->
<div> reviewForm is {{reviewForm.$valid}}</div>
<input type="submit" value="Submit" />
</div>
</form>
HTML
<div class="form-group">
<label class="col-lg-2 control-label">Person Name </label>
<div class="col-lg-10">
<input type="text" class="form-control" placeholder="Enter Person Name ">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Event Title </label>
<div class="col-lg-10">
<input type="text" class="form-control" placeholder="Enter Person Name ">
</div>
</div>
Person Name and Event Title, both have same number of characters that is 11. But still when I see in my webpage. I get Person Name , getting in two lines.
Here is the image for the same.
Thank You.
Update like this :
<label class="col-lg-3 control-label">Person Name </label>
<div class="col-lg-9">
use form-horizontal class to look good in all devices and text in same line.
Large devices : label and input are in one line.
Small devices (mobile) : label comes top of input. and it looks good.
try this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="Person Name" >Person Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Person Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="Event Title">Event Title:</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Person Name">
</div>
</div>
</form>
</div>
</body>
</html>
Just add below code in your css
.control-label{white-space: nowrap;}
I just started with Bootstrap and having an issue with textarea HTML element - it doesn't follow left alignment with other text fields and goes across the entire page instead. Any ideas?
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body name="viewport" content="width=device-width, initial-scale=1.0">
<div id="container">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="name">
Name
</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="name" placeholder="Your name" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="email">
E-mail
</label>
<div class="col-sm-4">
<input class="form-control" type="email" id="email" placeholder="Your email address" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="comment">
Message
</label>
<div class="cols-sm-4">
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input class="btn btn-success" type="submit" value="Send" />
</div>
</div>
</form>
</div>
</body>
</html>
And the result looks like this below.
Textarea too wide and not aligning with other text elements above it
fix this:
<div class="cols-sm-4">
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
to
<div class="col-sm-4">
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
You could add:
.cols-sm-4{
width: 33.33333333%;
margin-left: 15px;
display: inline-block;
}