This question already has answers here:
Bootstrap: Input inside a label
(2 answers)
Closed 5 years ago.
I would expect the following HTML to show a UI like this
Label [Input]
Label [Input]
But it is showing the labels above the inputs at all resolutions. Can anyone tell me why?
<form class="form-horizontal">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
specify label width and input tye's width
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<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-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
</form>
Expand snippet to see in large display
This is the base of what you are looking for.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
Related
I am trying to put on same line firstname,lastname inputs and button.
The total width of the above 3, should be equal to the 'xxxxxxx' input.
you can find the code here
http://jsfiddle.net/zxb53wjq/1/
<div class="container">
<form role="form" action="" method="post">
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<div class="form-group">
<input maxlength="200" type="text" class="form-control" placeholder="xxxxxxxx"/>
</div>
<div class="form-group">
<label class="control-label">Application:</label>
<div class="input-group">
<input style="width:50% " class="form-control " placeholder="first name" name="firstname" type="text" />
<input style="width:50% " class="form-control " placeholder="last name" name="lastname" type="text" />
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
using bootstrap css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Bootstrap 4 is not the same as bootstrap 3. Most of the classes have been renamed and unlike bootstrap 3, bootstrap 4 uses flex box.
Bootstrap 4
Remove the two inputs' inline styles
Use input-group-append instead of input-group-btn.
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<input class="form-control " placeholder="last name" name="lastname" type="text" />
<div class="input-group-append">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</div>
</div>
http://jsfiddle.net/fhg3qx96/
Bootstrap 3
Use input-group-btn inside input-group
<div class="input-group mb-3">
<input class="form-control" style="width:50%" placeholder="first name" name="firstname" type="text" />
<input class="form-control" style="width:50%" placeholder="last name" name="lastname" type="text" />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
https://codepen.io/anon/pen/dQrJeW
This question is about best practice. Can I use form-horizontal class on a <div> element. I am trying to use style that these form class provides but I don't want to use form tag.
Is it good practice ?
<div class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
</div>
My form is to be capable of switching between view and edit modes. By default the form should display in view mode and when I click edit button the fields should be available for change. The form is working good between view and edit modes as expected, but in view mode the span element (for display value) is misaligned with the label, I mean the span element's value is displaying a bit higher to the horizontal line of the label.
Below is a piece of code from my form:
div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<span class="control-label" *ngIf="!editMode">{{model.name}</span>
<div class="col-sm-6" *ngIf="editMode">
<input class="form-control" type="text" name="name" [(ngModel)]="model.name" />
</div>
</div>
</form>
</div>
Use a form static control instead of a <span> element:
div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6" *ngIf="editMode">
<p class="form-control-static" *ngIf="!editMode">{{model.name}}</p>
<input class="form-control" type="text" name="name" [(ngModel)]="model.name" />
</div>
</div>
</form>
</div>
Here is a "static" Bootstrap snippet (view in full page):
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6">
<input class="form-control" type="text" name="name" value="model name" />
</div>
</div>
</form>
</div>
<div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6">
<p class="form-control-static">model name</p>
</div>
</div>
</form>
</div>
It works now. Thanks for the help. However I have modified the code to meet my requirement and it's as below.
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6">
<p class="form-control-static" *ngIf="!editMode">{{var1}}</p>
<input class="form-control" *ngIf="editMode" type="text" name="var1" [(ngModel)]="var1" />
</div>
</div>
I have a multi-step reg form with each step in a fieldset,i am using bootstrap validator for validation.I made the 'next' button in first step to toggle validation.And it works well...
The problem i have is,i have to prevent going to next step on an error.
Now, validation works on clicking 'next'in first step but immediately passes to next step.
I want to stay there until validation is success...
How to do this?
i m giving my chunk of code...i have all libraries included...
...
<fieldset id="first_step">
<h2 class="fs-title">Create your account</h2>
<div class="form-group">
<label class="col-md-3 control-label">Username</label>
<div class="col-md-9">
<input type="text" class="form-control" name="uname" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input type="password" class="form-control" name="pwd" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm Password</label>
<div class="col-md-9">
<input type="password" class="form-control" id="cpwd" />
</div>
</div>
<input type="button" name="next" id="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle"></h3>
<div class="form-group">
<label class="col-md-3 control-label">*Register Number</label>
<div class="col-md-9">
<input type="text" class="form-control" id="Text1" name="reg" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">*Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="Text2" name="stname" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-offset-3 col-md-12">
</div>
</div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" id="sub_but" name="submit" class="submit action-button" value="Submit" />
</fieldset>
<script type="text/javascript">
$(".next").click(function() {
$('#msform').data('bootstrapValidator').validate();
//prevent here????
//Script to slide first fielset
}
$(".previous").click(function() {
//Script to slide back to first fieldset
}
</script>
I have created form using bootstrap 3. how can I make a 2 column form. that is the label on the left and the input, drop down box etc on the right
<fieldset>
<div class="form-group">
<label for="exampleInputProject">Map info</label>
<input type="text" class="form-control" id="exampleInput" placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Class</label>
<input type="text" class="form-control" id="exampleInputTeam" placeholder="Team Project information">
</div>
<div class="form-group">
<label for="exampleInputProject"> info</label>
<input type="text" class="form-control" id="exampleInput" placeholder="Build Defintion">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="exampleInputPassword1">Name</label>
<input type="text" class="form-control" id="exampleInputTeam" placeholder="Build Def Name">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Location</label>
<input type="text" class="form-control" id="exampleInputTeam" placeholder="Config Location">
</div>
</fieldset>
by adding <div class="col-md-6"> surrounding the two fieldsets
<div class="row">
<div class="col-md-6">
<fieldset>
...
</fielset>
</div>
<div class="col-md-6">
<fieldset>
...
</fielset>
</div>
</div>
http://www.bootply.com/JziKUuxQYM