I have this Bootstrap horizontal form but the problem is label text is not aligned . How can I align the label text.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Signup Form</h3><hr/>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-4">
<input type="text" placeholder="Your Username ..." class="form-control"/>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-4">
<input type="email" placeholder="Your Email ..." class="form-control"/>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="bootstrap/js/jquery-1.11.3.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
I want Email label to be aligned with Username label
It is aligned right by default in Bootstrap stylesheet, you can give your form and id and add something like this to your stylesheet:
#signup-form label {
text-align: left;
}
This will align all the labels in your form to left, you may modify the selector to your needs to limit the scope of this style.
Working sample at JSBin.
.form-horizontal .control-label {
text-align: left;
}
simply use this.
CSS:
.control-label {
text-align:left!important;
}
Related
There is a multiple input feature provided in Bootstrap 4 that looks like the following:
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
Is there a trivial way to replicate this behavior using Bootstrap 3.3.7? Would it require stripping styles from Bootstrap 4 or is there something I'm overlooking in 3.3.7 that already allows this behavior? The documentation is available here: https://getbootstrap.com/docs/4.0/components/input-group/#multiple-inputs
I cannot speak to it being trivial or not, but with some additional CSS and with the assistance of the Bootstrap Grid you can achieve similar results:
.input-group-multi [class*='col-'] {
margin: 0 !important;
padding: 0 !important;
}
.input-group-multi .form-control {
border-right: 0;
}
.input-group-multi [class*='col-']:last-child .form-control {
border-radius: 0 4px 4px 0;
border-right: 1px solid #ccc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-6"><input type="text" class="form-control"></div>
<div class="col-xs-6 no-gutters"><input type="text" class="form-control"></div>
</div>
<br />
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
</div>
<br />
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
</div>
In the above code snippet you can see how .input-group-mutli is sort of the heavy-lifter here. With this new class we can use a wildcard match on the Bootstrap Grid column to remove all margin and padding. That alone gets you to where your multiple inputs will line up nicely... but with the borders doubling up.
A little extra CSS to detect remove the right-border and then re-apply that border on the last column+input provides you with a pretty spot on multiple input feature. With one exception of course; this presumes that input-group-addon is always on the left.
A little CSS will give you the same effect.
In the following snippet I created the css class input-multiple and modified the CSS styling accordingly. Adjust field widths as needed, here I simply altered the width:100% associated with Bootstraps .form-control class
.input-multiple>input.form-control {
width: auto;
}
.input-multiple>input.form-control+input.form-control {
border-left: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div style="padding:20px">
<div class="row">
<div class="col-lg-6">
<div class="input-group input-multiple">
<span class="input-group-addon" id="sizing-addon1">First and Last Name</span>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>
</div>
</div>
</div>
I have 2 textboxes in an input-group, seperated by an input-group-addon span. My problem is, I want textbox 1 to be wider than textbox 2. Textbox 1 is supposed to be the phone number (larger) and textbox 2 is an extension number (slimmer). I have a fiddle below:
https://jsfiddle.net/Lhhj7f5d/
<div class="col-xs-6">
<div class="input-group">
<input class="form-control" type="tel" placeholder="Phone Number" />
<span class="input-group-addon">Ext.</span>
<input class="form-control" type="text" placeholder="Extension"/>
</div>
</div>
Thanks!
You can set a width to your form
<div class="col-xs-6">
<div class="input-group">
<input class="form-control" type="tel" placeholder="Phone Number" />
<span class="input-group-addon">Ext.</span>
<input class="form-control" type="text" placeholder="Extension" style="width : 20px;"/>
</div>
</div>
or use css
You need to put your input tag inside a div with col-xs-*.
#phoneField .col-xs-3{
padding:0;
}
#phoneField .col-xs-3::after{
content: "-";
position:absolute;
margin:5px;
}
<!DOCTYPE html>
<html>
<head>
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-xs-6">
<div id="phoneField" class="input-group">
<div class="col-xs-3">
<input class="form-control" type="text" placeholder="Ext" maxlength="3"/>
</div>
<div class="col-xs-9">
<input class="form-control" type="tel" placeholder="Phone Number" maxlength="10"/>
</div>
</div>
</div>
</body>
</html>
I'm making a horizontal form with bootstrap 3 and for required input fields I'd like to add an asterisc after each label. Of course this isn't a problem, but for layout purposes I want to do two things:
1) if a label (question) in the form is so long that it causes a linebreak I want the second part of the label (on the 2nd line) to be outlined on the right side with the first line.
2) labels without asterisc should be in line with labels with a asterisc.
See the image for an example
Can anyone please explain how I can use bootstrap styling/layout to have the labels with/without asterisc display at the same position, even when labels are spread across twee lines of text?
.form-group.required .control-label:after {
content: " *";
color: red;
}
label {
text-align: right; /* bootstrap styling is missing, but usually label is aligned right */
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
<div id="myForm">
<div class="form-group required">
<label class="col-xs-4 control-label" for="question1">This is a really long label that breaks and spreads</label>
<div class="input-group">
<input type="text" name="question1" id="question1" class="form-control">
</div>
</div>
<div class="form-group required">
<label class="col-xs-4 control-label" for="question1">Short label (required)</label>
<div class="input-group">
<input type="text" name="question1" id="question1" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label" for="question1">Short label (not required)</label>
<div class="input-group">
<input type="text" name="question1" id="question1" class="form-control">
</div>
</div>
</div>
</form>
Sorry if this is such a basic question, but how do I left align two text box elements in different divs with labels that are different lengths? I have a screen shot below. I want to align the textbox for "Dive Profile Id" and "Dive Profile Name". The way I have it now, is the "Dive Profile Id" and "Description" labels and textbox are in one div and the "Dive Profile Name" is in another div. How would I align these two input elements?
Here is my actual HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<LINK href="dive.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main" >
<div id="header">
<form name="header">
<div id="topline">
<label for="profileId" style="vertical-align: top">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId">
<label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea>
</div>
<div id="secondline">
<label for="profileName" style="position: relative; vertical-align: top; float: left">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName">
</div>
</form>
</div>
<div id="profilePlot">
</div>
<div id="buttonMenu">
</div>
</div>
<div name="diveData">
</div>
<div id="mydiv">
</div>
</body>
</html>
the easy way is to transform your label into inline blocks and giving them the same size
with something like this :
<label class="label" for="profileId"...
<label class="label" for="profileName" ...
and the CSS, for example:
.label {
display: inline-box;
width: 100px;
}
so if you want the style in your html :
<div id="topline">
<label for="profileId" style="display:inline-box;width:100px;">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId">
<label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea>
</div>
<div id="secondline">
<label for="profileName" style="display:inline-box;width:100px;">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName">
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<LINK href="dive.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main" >
<div id="header">
<form name="header">
<div id="topline">
<label for="profileId" style="vertical-align: top">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId">
<br />
<label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px; ">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea>
</div>
<div id="secondline">
<label for="profileName" style="position: relative; vertical-align: top; float: left">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName">
</div>
</form>
</div>
<div id="profilePlot">
</div>
<div id="buttonMenu">
</div>
</div>
<div name="diveData">
</div>
<div id="mydiv">
</div>
</body>
</html>
Include bootstrap.css
<html>
<head>
<title></title>
<!--INCLUDE BOOTSTRAP.CSS--->
<!-- <LINK href="dive.css" rel="stylesheet" type="text/css"> -->
<style>
label {
display: inline!important;
}
</style>
</head>
<body>
<div id="main" >
<div id="header">
<form name="header">
<div id="topline" class="span8 control-group">
<label for="profileId" class="control-label">Dive Profile Id </label>
<input type="text" name="profileId" id="profileId" class="controls">
<label for="descriptionTxtArea" class="control-label">Description</label>
<textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea" class="controls"></textarea>
</div>
<div class="clearfix"></div>
<div id="secondline " class="control-group">
<label for="profileName" class="control-label" >Dive Profile Name</label>
<input type="text" name="profileName" id="profileName" class="controls">
</div>
</form>
</div>
<div id="profilePlot">
</div>
<div id="buttonMenu">
</div>
</div>
<div name="diveData">
</div>
<div id="mydiv">
</div>
</body>
</html>
I have spent more time than I ever care to admit trying to fix this stupid bug. I have a form that displays to the left of some content. It looks okay on a wide and narrow screen, but on a tablet width (it overlays between 770 and 950 or so) the content to the right overlaps the form fields.
Am I missing something in my markup to use Twitter Bootstrap properly or do I need to add some custom styles using breakpoints to fix it? It appears that the fixed pixel width is causing the issue defined in bootstrap.css. Shouldn't these width properties use % since I'm using a fluid responsive layout?
<div class="container-narrow">
<div class="content">
<div class="row-fluid">
<div class="span5">
<form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
<div class="control-group">
<label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
<div class="controls">
<input size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
<div class="controls">
<input size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
</form>
</div>
<div class="span7">
<div class="promo-btm">
<h2>Heading 2</h2>
<ul class="checks">
<li>Bullet One</li>
<li>Bullet Two</li>
</ul>
</div>
</div>
</div>
</div>
</div>
See the attached screenshot for the bug or you can reproduce it yourself using my fiddle.
If someone could help point out a way to fix this I would be extremely appreciative!
Just add a width to your input elements so they can adapt responsively with all of your screen sizes. You can use something like .span12 as a width on your input elements and that should fix the issue:
HTML
<div class="container-narrow">
<div class="content">
<div class="row-fluid">
<div class="span5">
<form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
<div class="control-group">
<label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
<div class="controls">
<input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
<div class="controls">
<input class="span12" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
</form>
</div>
<div class="span7">
<h2>Heading 2</h2>
<ul class="checks">
<li>Bullet One</li>
</ul>
</div>
</div>
</div>
</div>
Demo: http://jsfiddle.net/yR7Ap/18/
The other posts have pinpointed the root cause of the problem, that your form is too wide for the span5 div with the default bootstrap css
It's not too difficult to make it fit though. See if this helps : http://jsfiddle.net/panchroma/FXXaZ/
I have tightened up your form with this CSS:
/* pull control label left */
.form-horizontal .control-label {
width:70px; /* default 160 */
}
/* pull input box left */
.form-horizontal .controls {
margin-left: 90px; /* defaul 180 */
}
/* shorten input box */
input, textarea, .uneditable-input {
width: 180px; /* default 206 */
}
Good luck!
Your form is too wide for the .span5 column. Try adding this above:
<div class="row-fluid">
<div class="span5">hello</div>
<div class="span7">world</div>
</div>
and add the following style:
.row-fluid > div { outline: 5px solid green; }
and you'll see what I mean.