I'm using bootstrap to design web pages. I have two major problems.Firstly, can't really figure out how to align fields in a form.Secondly, adjusting the fields(the width height etc..) in a form tag. Do I have to use css for each and every field? I tried doing that, but then the alignment gets messed up. Here's my code .
<div class="container">
<form class="form-inline">
<div class="form-group">
<label class="form-control">In Out Specifier</label>
<select class="form-control" id="processInOutSpecifier" name="inOutSpecifier" >
<option></option>
</select>
</div>
<div class="form-group">
<label class="form-control" id="callDateLabel">Call Date</label>
<select class="form-control" id="callDate" name="callDate" >
<option></option>
</select>
</div>
<div class="form-group">
<label class="form-control" id="processCallDateFormatLabel" >Call Date Format</label>
<select class="form-control" id="callDate" name="callDateForamt">
<option>yyyy-MM-dd</option>
<option> yyyy/MM/dd</option>
<option> MM-dd-yyyy</option>
<option> MM/dd/yyyy</option>
<option> dd-MM-yyyy</option>
<option> dd/MM/yyyy</option>
<option>dd/MM/yy</option>
<option> MM/dd/yy</option>
<option> yyMMdd</option>
<option> MMddyy</option>
<option> dd.MM.yy</option>
<option> MM.dd.yy</option>
<option>MM.dd.yy</option>
<option>dd/MM</option>
<option>dd-MM</option>
</select>
</div>
<div class="form-group">
<label class="form-control">Call Time</label>
<select class ="form-control" id="callTime" name="callTime" >
<option></option>
</select>
</div>
<br><br>
<div class="form-group">
<label class="form-control" >Call Time Format</label>
<select id="callTimeFormat" class="form-control" name="CalltimeFormat">
<option>HH:MM:SS/12 HOUR</option>
<option>HH:MM:SS/24 HOUR</option>
<option> HH:MM/12 HOUR</option>
<option> HH:MM/24 HOUR</option>
<option> HH:MM/AMPM</option>
<option>HHMM/24 HOUR</option>
</select>
</div>
<div class="form-group">
<label class="form-control" >Trunk </label>
<input class="form-control" type="text" id="processTrunk" placeholder="Trunk">
</div>
<div class="form-group">
<label class="form-control" >Duration </label>
<input class="form-control" type="text" id="processDuration" placeholder="Duration">
</div>
</form>
</div>
Here's the fiddle
http://jsfiddle.net/core972/SMkZV/2/
Try this fiddle,
<div class="container">
<form name="registration_form" id='registration_form' class="form-inline">
<div class="row">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="username" class="sr-only"></label>
<input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username" title="Enter username" placeholder="Username" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="password" class="sr-only"></label>
<input id="password" class="form-control input-group-lg" type="password" name="password" title="Enter password" placeholder="Password" />
</div>
</div>
</form>
</div>
Check this DEMO 1
<form name="registration_form" id='registration_form' class="form-inline">
<div class="row">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="First name"/>
</div>
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Last name"/>
</div>
</div>
<div class="row" style="padding-top: 5px;">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="Username"/>
</div>
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Password"/>
</div>
</div>
</form>
This another style you can create form Check this DEMO 2
You can try like this: Demo
<form name="registration_form" id='registration_form' class="form-horizontal col-md-8">
<div class="row">
<div class="form-group">
<div class="col-xs-6">
<input id="firstname" class="form-control reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name" />
</div>
<div class="col-xs-6">
<input id="lastname" class="form-control reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-6">
<input id="username" class="form-control reg_name" type="text" autocapitalize='off' name="username" title="Enter username" placeholder="Username" />
</div>
<div class="col-xs-6">
<input id="password" class="form-control reg_name" type="password" name="password" title="Enter password" placeholder="Password" />
</div>
</div>
</div>
</form>
Form with label Demo
For more details refer Bootstrap Forms
Check this
Demo
<form name="registration_form" id='registration_form' class="form-inline ">
<div class="row">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="First name"/>
</div>
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Last name"/>
</div>
<div class="form-group col-xs-12">
<label for="username" class="sr-only"></label>
<input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username"
title="Enter username"
placeholder="Username"/>
</div>
<div class="form-group col-xs-12">
<label for="password" class="sr-only"></label>
<input id="password" class="form-control input-group-lg" type="password" name="password"
title="Enter password"
placeholder="Password"/>
</div>
</div>
Related
I have tried all the possible ways but I could not get the fields horizontally aligned.
<form class="form-horizontal" role="form">
<div class="form-inline">
<div class="form-group">
<label for="acctName" class="col-sm-2 control-label">Account Name </label>
<div class="col-sm-10">
<input type="text" ng-model="vm.acctName" class="input-xlarge" placeholder="Account Name" />
</div>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label for="acctId" class="col-sm-2 control-label">Account ID </label>
<div class="col-sm-10">
<input type="text" ng-model="vm.acctId" class="input-xlarge" placeholder="Account ID" />
</div>
</div>
</div>
I also tried
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="acctName" class="col-sm-2 control-label">Account Name </label>
<div class="col-sm-10">
<input type="text" ng-model="vm.acctName" class="input-xlarge" placeholder="Account Name" />
</div>
</div>
<div class="form-group">
<label for="acctId" class="col-sm-2 control-label">Account ID </label>
<div class="col-sm-10">
<input type="text" ng-model="vm.acctId" class="input-xlarge" placeholder="Account ID" />
</div>
</div>
Still, the fields appear stacked vertically.
What am I doing wrong?
Check this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label for="acctName" class="control-label">Account Name </label>
<input type="text" class="form-control input-xlarge" ng-model="vm.acctName" placeholder="Account Name" />
</div>
<div class="form-group">
<label for="acctId" class="control-label">Account ID </label>
<input type="text" class="form-control input-xlarge" ng-model="vm.acctId" placeholder="Account ID" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</form>
It seems to be invalid use of classes. Try the following code:
<form class="form-inline">
<fieldset>
<div class="form-group">
<label for="acctName" class="col-lg-2 control-label">Account Name</label>
<div class="col-lg-10">
<input type="text" class="form-control input-xlarge" id="acctName" ng-model="vm.acctName" placeholder="Account Name" />
</div>
</div>
<div class="form-group">
<label for="acctId" class="col-lg-2 control-label">Account ID</label>
<div class="col-lg-10">
<input type="text" class="form-control input-xlarge" id="acctId" ng-model="vm.acctName" placeholder="Account ID" />
</div>
</div>
</fieldset>
</form>
Please help me on this project. I want to align the Username and all the labels beside the textbox. Specifically on the left side of the textbox. I'm using the primary bootstrap from getbootstrap.com
This is my code:
<div>
<label>Username:</label>
<input type="text" class="form-control" placeholder="Username" tabindex="1"><br>
<input type="text" class="form-control" placeholder="Password" tabindex="2" float="right"><br>
<input type="text" class="form-control" placeholder="Company Name" tabindex="3" float="right"><br>
<input type="text" class="form-control" placeholder="Product Type" tabindex="4" float="right"><br>
</div>
You probably want to use the form-horizontal class for the form. Also, I noticed your inputs didn't have any name attributes, which I'm assuming you'll need. Documentation: http://getbootstrap.com/css/#forms
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" placeholder="Username" tabindex="1" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="password" placeholder="Password" tabindex="2" />
</div>
</div>
<div class="form-group">
<label for="company_name" class="col-sm-2 control-label">Company Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="company_name" placeholder="Company Name" tabindex="3" />
</div>
</div>
<div class="form-group">
<label for="product_type" class="col-sm-2 control-label">Product Type</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="product_type" placeholder="Product Type" tabindex="4" />
</div>
</div>
</form>
I am trying to position my form box. To see where I was going I just made some inline style. It is also looking like I want on the desktop version, but when I see it on mobile version the form box is out of the picture.
If I made the Inline CSS in an external stylesheet, and made a Mediaquery, it would not be the correct way to do it, would it? For me it seems like bad practice?
<!-- Content -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" style="width:25%; top: 70px; left: 1000px;">
#Umbraco.RenderMacro("Ebook")
</div>
</div>
</div>
<div class="sign-up">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
Here's an example with the form floating to the right for larger screens, and showing full-width for smaller screens.
.floating-form {
background: #eee;
float: right;
padding: 20px 0;
width: 320px;
}
#media (max-width: 479px) {
.floating-form {
float: none;
width: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="floating-form">
<div class="container-fluid">
<div class="row">
<div class="sign-up col-xs-12">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
#Umbraco.RenderMacro("Ebook")
</div>
<div class="sign-up col-xs-6 col-md-6 col-lg-6">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
</div>
</div>
Fiddle
This Will Useful for you..
I would like the fields "Name" and "Last Name" to be on the same row.
I've found some solutions such as this one here in stackoverflow, but the problem is that I want the labels positioned above the fields to be side by side too.
How is that possible?
Here's the form code:
<form>
<div class="form-group">
<label for="inputName">Name:</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Leandro">
</div>
<div class="form-group">
<label for="inputLastName">Last Name:</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Faria">
</div>
<div class="form-group">
<label for="inputTitle">Title:</label>
<input type="text" class="form-control" id="inputTitle" placeholder="Enter your title here" value="CEO">
</div>
<div class="form-group">
<label for="inputEmail">Email:</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter your email here" value="leo#saasmetrics.co">
</div>
<div class="form-group bottom-buffer">
<label for="selectEmail">Notifications:</label>
<select class="form-control" id="selectEmailNotifications">
<option>None</option>
<option>Daily</option>
<option>Weekly</option>
<option selected>Monthly</option>
</select>
</div>
<div class="form-group bottom-buffer">
<label for="selectEmail">Status:</label>
<select class="form-control" id="selectEmailNotifications">
<option selected>Active</option>
<option>Inactive</option>
</select>
</div>
<div class="form-group bottom-buffer">
<label for="selectEmail">Profile:</label>
<select class="form-control" id="selectEmailNotifications">
<option selected>Administrator</option>
<option>User</option>
</select>
</div>
</form>
Something like this should get you started.
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputName">Name:</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Leandro">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputLastName">Last Name:</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Faria">
</div>
</div>
</div>
Yes, the top answer is true, but this is another solution.You can use inline bootstrap forms like this:
<div class="form-inline">
<div class="form-group" style="width: 50%">
<label for="input1">Name</label>
<input type="text" class="form-control" id="input1" placeholder="David">
</div>
<div class="form-group" style="width: 49%">
<label for="input2">Last Name</label>
<input type="text" class="form-control" id="input2" placeholder="Tanner">
</div>
</div>
Read the bootstrap document
I trying to format my registration page with Bootstrap 3.1.1. I would like the first two inputs to be on the same line while the other inputs are one there own line. I have played around with the bootstrap classes "row", "form-inline", and "form-horizontal" to no avail.
Does anybody know how to do it?
Here is the Fiddle
<style>
.reg_name {
max-width:200px;
}
</style>
<form name="registration_form" id='registration_form' class="form-inline">
<div class="form-group">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="First name"/>
</div>
<div class="form-group">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Last name"/>
</div>
<div class="form-group">
<label for="username" class="sr-only"></label>
<input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username"
title="Enter username"
placeholder="Username"/>
</div>
<div class="form-group">
<label for="password" class="sr-only"></label>
<input id="password" class="form-control input-group-lg" type="password" name="password"
title="Enter password"
placeholder="Password"/>
</div>
</form>
Use <div class="row"> and <div class="form-group col-xs-6">
Here a fiddle :https://jsfiddle.net/core972/SMkZV/2/
You can wrap the inputs in col-* classes
<form name="registration_form" id="registration_form" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name">
</div>
<div class="col-sm-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name">
</div>
</div><!--/form-group-->
<div class="form-group">
<div class="col-sm-12">
<label for="username" class="sr-only"></label>
<input id="username" class="form-control input-group-lg" type="text" autocapitalize="off" name="username" title="Enter username" placeholder="Username">
</div>
</div><!--/form-group-->
<div class="form-group">
<div class="col-sm-12">
<label for="password" class="sr-only"></label>
<input id="password" class="form-control input-group-lg" type="password" name="password" title="Enter password" placeholder="Password">
</div>
</div><!--/form-group-->
</form>
http://bootply.com/127825
You can code like two input box inside one div
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input style="width:50% " class="form-control " placeholder="first name" name="firstname" type="text" />
<input style="width:50% " class="form-control " placeholder="lastname" name="lastname" type="text" />
</div>
I resorted to creating 2 style cascades using inline-block for input that pretty much override the field:
.input-sm {
height: 2.1em;
display: inline-block;
}
and a series of fixed sizes as opposed to %
.input-10 {
width: 10em;
}
.input-32 {
width: 32em;
}