I am using twitter bootstrap and I have a form. I need the first row to be like "colspan=2".
I hope I am clear enough.. how can I do this?
Here is my code:
<form class="form-horizontal">
<fieldset>
I Need this row to be like "colspan=2" in table td
<div class="control-group">
<label class="control-label" for="my_input">field name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="my_input" name="my_input"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="my_input">field name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="my_input" name="my_input"/>
</div>
</div>
</fieldset>
</form>
Here is jsFiddle: http://jsfiddle.net/3j7QP/7/
Like that: http://jsfiddle.net/3j7QP/16/ ?
<form class="form-horizontal">
<fieldset>
<div style="float: left; width: 100px; height: 80px; background: red;">
xxx
</div>
<div class="control-group" style="float:left;">
<label class="control-label" for="my_input">field name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="my_input" name="my_input"/>
</div>
</div>
<div class="control-group" style="float:left;">
<label class="control-label" for="my_input">field name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="my_input" name="my_input"/>
</div>
</div>
</fieldset>
</form>
Related
I have a form and am having a problem trying to style it.
Here is what it looks like now:
I need it to look like this:
I need to style the first row and column for the Title and the 2nd row 3rd column for to date of birth.
I'm having trouble targeting the correct selector/element. Here is what the html looks like:
<h6 class="title">Personal Information</h6>
<div class="row">
<div class="col-3">
<select name="title"></select>
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-3">
<input type="text" name="firstname" value="" id="firstname"
maxlength="50" size="50" class="" placeholder="First name*"
style="background-image: url("data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0I
Ars4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2
BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fz
Pfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTr
uqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNc
sFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4
NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjY
hUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5
NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7
GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWI
lfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN
3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJ
T1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoe
c5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII=");
background-repeat: no-repeat; background-attachment:
scroll; background-size: 16px 18px;
background-position: 98% 50%; cursor: auto;">
<!--<input type="text" placeholder="First name*">-->
<div class="form_error"></div>
</div>
<div class="col-3">
<!-- <input type="text" placeholder="Last name*">-->
<input type="text" name="lastname" value="" id="lastname"
maxlength="50" size="50" placeholder="Last name*">
<div class="form_error"></div>
</div>
<div class="col-3">
<!-- <input type="text" placeholder="Last name*">-->
<input type="text" name="dob" value="" id="dob" maxlength="50"
size="50" placeholder="Date of birth (DD/MM/YYYY)*">
<div class="form_error"></div>
<!--<input type="text" placeholder="Date of birth (DD/MM/YYYY)*" class="dob">-->
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-3">
<input type="text" name="mobile" value="" id="mobile"
maxlength="50" size="50" placeholder="Mobile*">
<div class="form_error"></div>
<!--<input type="tel" placeholder="Mobile*">-->
</div>
<div class="col-3">
<input type="email" name="email" value="" id="email"
maxlength="50" size="50" placeholder="Email*">
<div class="form_error"></div>
<!--<input type="email" placeholder="Email*">-->
</div>
<div class="col-3">
<input type="text" name="emailconf" value="" id="emailconf"
maxlength="50" size="50" placeholder="Confirm Email*">
<div class="form_error"></div>
<!--<input type="email" placeholder="Confirm Email*">-->
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-1">
<input type="text" name="address1" value="" id="address1"
maxlength="50" size="50" placeholder="Address*">
<div class="form_error"></div>
<!--<input type="text" placeholder="Address*">-->
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-3">
<input type="text" name="suburb" value="" id="suburb"
maxlength="50" size="50" placeholder="Suburb*">
<div class="form_error"></div>
<!--<input type="text" placeholder="Suburb*">-->
</div>
<div class="col-3">
<select name="stateid">
</select>
</div>
<div class="col-3">
<input type="text" name="postcode" value="" id="postcode"
maxlength="4" size="10" placeholder="Postcode*">
<div class="form_error"></div>
</div>
</div>
Any help is greatly appreciated
to make the structure better I would say load bootstrap CSS
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
and use this markup:
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="title">Personal Information</h2>
</div>
</div>
<div class="row">
<div class="col-md-2">
<select>
<option value="mr">Mr.</option>
<option value="mrs">Mrs.</option>
<option value="ms">Ms.</option>
</select>
</div>
<div class="col-md-4">
<input type="text" placeholder="First name">
</div>
<div class="col-md-4">
<input type="text" placeholder="Last name">
</div>
<div class="col-md-2">
<input type="date">
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" placeholder="Mobile">
</div>
<div class="col-md-4">
<input type="email" placeholder="Email">
</div>
<div class="col-md-4">
<input type="email" placeholder="Confirm Email">
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="Address">
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" placeholder="Suburb">
</div>
<div class="col-md-4">
<select>
<option value="mr">NSW</option>
</select>
</div>
<div class="col-md-4">
<input type="text" placeholder="Post Code">
</div>
</div>
</div>
and you can customize the look of the form fields, just put this code after you load the Bootstrap
input, select { width:100%; padding:14px; margin:10px 0; border:2px solid #6aa295; }
You should use something like this. And bootstrap is responsive so You could see how it look on the expand view.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form class="form-horizontal">
<div class="row">
<div class="col-md-12">
<h2><p class="text-center">Personal Information</p></h2>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<select class="form-control">
<option value="mr">Mr.</option>
<option value="ms">Ms.</option>
</select>
</div>
<div class="col-md-4">
<input type="text" class="form-control" id="firstname" class="form-control" placeholder="First name *">
</div>
<div class="col-md-4">
<input type="text" class="form-control" id="lastname" class="form-control" placeholder="Last name *">
</div>
<div class="col-md-2">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" id="mobile" class="form-control" placeholder="Mobile *">
</div>
<div class="col-md-4">
<input type="email" id="email" class="form-control" placeholder="Email *">
</div>
<div class="col-md-4">
<input type="email" id="emailconf" class="form-control" placeholder="Confirm Email *">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" id="address1" class="form-control" placeholder="Address *">
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" id="suburb" class="form-control" placeholder="Suburb *">
</div>
<div class="col-md-4">
<select class="form-control">
<option class="collapse" value="mr">Info</option>
</select>
</div>
<div class="col-md-4">
<input type="text" id="postcode" class="form-control" placeholder="Post Code *">
</div>
</div>
</form>
</div>
I have the following markup:
<form accept-charset="UTF-8" action="/task_categories/1" class="form-horizontal" id="edit_task_category_1" method="post">
<div class="row">
<div class="col-md-4">
<div class="well">
<div class="form-group"><label class="control-label col-sm-6" for="task_category_task_category_users_attributes_0_Enable">Enable?</label><div class="col-sm-6"><input name="task_category[task_category_users_attributes][0][enable]" type="hidden" value="0"><input class="form-control" id="task_category_task_category_users_attributes_0_enable" name="task_category[task_category_users_attributes][0][enable]" type="checkbox" value="true"></div></div>
<div class="form-group"><label class="control-label col-sm-6" for="task_category_task_category_users_attributes_0_Enable Comment">Enable comment?</label><div class="col-sm-6"><input name="task_category[task_category_users_attributes][0][comments_enabled]" type="hidden" value="0"><input class="form-control" id="task_category_task_category_users_attributes_0_comments_enabled" name="task_category[task_category_users_attributes][0][comments_enabled]" type="checkbox" value="true"></div></div>
<input id="task_category_task_category_users_attributes_0_user_id" name="task_category[task_category_users_attributes][0][user_id]" type="hidden" value="1">
</div>
</div>
<div class="col-md-4">
<div class="well">
<div class="form-group"><label class="control-label col-sm-6" for="task_category_task_category_users_attributes_1_Enable">Enable?</label><div class="col-sm-6"><input name="task_category[task_category_users_attributes][1][enable]" type="hidden" value="0"><input class="form-control" id="task_category_task_category_users_attributes_1_enable" name="task_category[task_category_users_attributes][1][enable]" type="checkbox" value="true"></div></div>
<div class="form-group"><label class="control-label col-sm-6" for="task_category_task_category_users_attributes_1_Enable Comment">Enable comment?</label><div class="col-sm-6"><input name="task_category[task_category_users_attributes][1][comments_enabled]" type="hidden" value="0"><input class="form-control" id="task_category_task_category_users_attributes_1_comments_enabled" name="task_category[task_category_users_attributes][1][comments_enabled]" type="checkbox" value="true"></div></div>
<input id="task_category_task_category_users_attributes_1_user_id" name="task_category[task_category_users_attributes][1][user_id]" type="hidden" value="2">
</div>
</div>
</div>
</form>
The problem is the label text does not float left. Even when I add a text-align: left to the containing div, it still does not align left. What may I be doing wrong?
You need to add a text-align: left style to .control-label.
Because bootstrap gives labels within horizontal forms the text align style using the selector .form-horizontal .control-label, you need to use the same or a more specific selector:
.form-horizontal .control-label{
text-align: left;
}
JSFiddle
Set the text-align property to the .control-label. View output in Full screen.
.form-horizontal .control-label {
text-align: left !important; /* !important added for priority in SO snippet. */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form accept-charset="UTF-8" action="/task_categories/1" class="form-horizontal" id="edit_task_category_1" method="post">
<div class="row">
<div class="col-md-4">
<div class="well">
<div class="form-group">
<label class="control-label col-sm-6" for="task_category_task_category_users_attributes_0_Enable">Enable?</label>
<div class="col-sm-6">
<input name="task_category[task_category_users_attributes][0][enable]" type="hidden" value="0">
<input class="form-control" id="task_category_task_category_users_attributes_0_enable" name="task_category[task_category_users_attributes][0][enable]" type="checkbox" value="true">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6" for="task_category_task_category_users_attributes_0_Enable Comment">Enable comment?</label>
<div class="col-sm-6">
<input name="task_category[task_category_users_attributes][0][comments_enabled]" type="hidden" value="0">
<input class="form-control" id="task_category_task_category_users_attributes_0_comments_enabled" name="task_category[task_category_users_attributes][0][comments_enabled]" type="checkbox" value="true">
</div>
</div>
<input id="task_category_task_category_users_attributes_0_user_id" name="task_category[task_category_users_attributes][0][user_id]" type="hidden" value="1">
</div>
</div>
<div class="col-md-4">
<div class="well">
<div class="form-group">
<label class="control-label col-sm-6" for="task_category_task_category_users_attributes_1_Enable">Enable?</label>
<div class="col-sm-6">
<input name="task_category[task_category_users_attributes][1][enable]" type="hidden" value="0">
<input class="form-control" id="task_category_task_category_users_attributes_1_enable" name="task_category[task_category_users_attributes][1][enable]" type="checkbox" value="true">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6" for="task_category_task_category_users_attributes_1_Enable Comment">Enable comment?</label>
<div class="col-sm-6">
<input name="task_category[task_category_users_attributes][1][comments_enabled]" type="hidden" value="0">
<input class="form-control" id="task_category_task_category_users_attributes_1_comments_enabled" name="task_category[task_category_users_attributes][1][comments_enabled]" type="checkbox" value="true">
</div>
</div>
<input id="task_category_task_category_users_attributes_1_user_id" name="task_category[task_category_users_attributes][1][user_id]" type="hidden" value="2">
</div>
</div>
</div>
</form>
I am trying to align textfields with bootstrap however I keep failing to adopt anything I found on sources to my project. What I am trying to do is aligning e-mail and password text-fields but leave 'Remember me' and 'Login' centered.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
You can use Bootstrap's form-horizontal class to help achieve the layout.
Demo: http://www.bootply.com/nJ2P2gi76B
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Log in</button>
</div>
</div>
</form>
You can access only the text input by using a css attribute selector.
For Example...
input[type="text"] {
...
}
You can get more specific if needed...
#someID input[type="text"] {
...
}
you can use text-center to center the inner content of your div. you can use text-left, text-center, text-right classes to align the contents.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css);
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group text-center">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
It would help if you could post a JSFiddle with the css you are using!
Guessing from what i see:
You could add a class to both fields and override the css.
or put both fields in a div and align them without impacting the rest.
Using an enclosing div:
JSFiddle
CSS:
.input-fields {
width: 300px;
}
.input-fields .form-group {
float: right;
}
.form-group {
clear: both;
text-align: center;
}
HTML:
<form method="POST" action="/auth/login">
<div class="input-fields">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
I'm having trouble styling the following form using Twitter Bootstrap 2.3.2
I can't seem to right-align the button with the other labels. Also, I can't get the last textbox to be in line with the button.
This is the form I have so far: JSFiddle example
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputFirstname">First name</label>
<div class="controls">
<input type="text" id="inputFirstname" placeholder="First name">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputSurname">Surname</label>
<div class="controls">
<input type="text" id="inputSurname" placeholder="Surname">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<button class="btn btn-primary">Browse</button>
<div class="controls">
<input type="text" id="inputSomeText" placeholder="Some text">
</div>
</div>
This is the end result which I trying to achieve:
Any help is greatly appreciated!!
Change your last control-group and also add margin-top:-5px; to the button (shown below via class label-btn):
HTML for last control-group:
<div class="control-group">
<label class="control-label"><button class="btn btn-primary inline label-btn">Browse</button></label>
<div class="controls">
<input type="text" id="inputSomeText" placeholder="Some text">
</div>
</div>
CSS
.label-btn {
margin-top: -5px;
}
Updated fiddle
Change last control-group to this
<div class="control-group">
<label class="control-label">
<button class="btn btn-primary inline">Browse</button>
</label>
<div class="controls">
<input type="text" id="inputSomeText" placeholder="Some text">
</div>
</div>
I have a quick Bootstrap issue. I am setting up a form and it seems that the form label is not aligning to the input field. I have had an issue like this before which was solved by adding clearfix to the class. This did not resolve the issue.
Fiddle example:
http://jsfiddle.net/mwoods98/P6ux2/1/
<div id="pane2" class="tab-pane">
<div class="well">
<label class="control-label" for="interview">Label 1</label>
<div class="controls">
<div>
<input type="text" id="interview" name="FDFINTERVIEW" class="" />
</div>
</div>
<label class="control-label" for="resume">Label 2</label>
<div class="controls">
<div>
<input type="text" id="resume" name="FDFMEMOSENT" class="" />
</div>
</div>
<label class="control-label" for="memoreceived">Label 3</label>
<div class="controls">
<div>
<input type="text" id="memoreceived" name="FDFMEMORECV" class="" />
</div>
</div>
<label class="control-label" for="selectionemail">Label 4</label>
<div class="controls">
<div>
<input type="text" id="selectionemail" name="fdfEmailSent" class="" />
</div>
</div>
<label class="control-label" for="fdfSECSbmt">Label 5</label>
<div class="controls">
<div>
<input type="text" id="fdfSECSbmt" name="fdfSECSbmt" class="" />
</div>
</div>
<label class="control-label" for="fdfInSECGrnt">Label 6</label>
<div class="controls">
<div>
<input type="text" id="fdfInSECGrnt" name="fdfInSECGrnt" class="" />
</div>
</div>
<label class="control-label" for="fdfInSECDeny">Label 1=7</label>
<div class="controls">
<div>
<input type="text" id="fdfInSECDeny" name="fdfInSECDeny" class="" />
</div>
</div>
<label class="control-label" for="fdfFullSECGrnt">Label 8</label>
<div class="controls">
<div>
<input type="text" id="fdfFullSECGrnt" name="fdfFullSECGrnt" class="" />
</div>
</div>
<label class="control-label" for="fdfMEDGrnt">Label 9</label>
<div class="controls">
<div>
<input type="text" id="fdfMEDGrnt" name="fdfMEDGrnt" class="" />
</div>
</div>
<label class="control-label" for="fdfEOD">Label 10</label>
<div class="controls">
<div>
<input type="text" id="fdfEOD" name="fdfEOD" class="" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Label 11</label>
<div class="controls">
<textarea class="input-xlarge" id="textarea" rows="3"></textarea>
</div>
</div>
</div>
<!-- end of well -->
</div>
TIA
You have to put the element in a control-group class and add to your form the form-horizontal class, you also don't need an extra div for your input.
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="interview">Label 1</label>
<div class="controls">
<input type="text" id="interview" name="FDFINTERVIEW" class="" /></div>
</div>
</div>
</div>
Add .form-horizontal to the form.
Wrap labels and controls in .control-group
Add .control-label to the label
Wrap any associated controls in .controls for proper alignment
Twitter Bootstrap doc - Horizontal Form