I have an old app that uses Bootstrap 2 and the wireframes for a new feature requires me to put a checkbox below a label, but by the side of a multiline textbox.
This picture illustrate the situation:
All of my fields use the following structure:
<div class="row-fluid extended-row">
<div class="span6">
<div class="control-group">
<label class="control-label" for="<%=txtMyField.ClientID %>">
My Field</label>
<div class="controls">
<asp:TextBox class="input-large" ID="txtMyField" runat="server" ReadOnly="True" />
</div>
</div>
.
.
.
.
</div>
So I don't know how to position the checkbox below as I think that using form layout on bootstrap doesn't allow you to put controls below and next to the label.
Is this possible using bootstrap 2?
I don't remember the classes for bootstrap 2 but I believe that they should be similar to that of bootstrap3. Try using the col-md-offset class or pull-right.
offsetting columns in bootstrap3
Ok I found a way of doing this. I can't still align the label to the top, but the result is good enough
<div class="control-group">
<div class="control-label">
<label class="control-label" for="<%= txtCommentary.ClientID %>">Commentary</label><br />
<input id="chkRepeatfailure" type="checkbox" runat="server" />
</div>
<div class="controls">
<asp:TextBox TextMode="MultiLine" Rows="4" class="input-xlarge" ID="txtCommentary" runat="server"
placeholder="" />
</div>
</div>
Related
I am new to bootstrap and learning it.I am trying to create an form page like this which i had made in JSP .This is a part of the page.
But when trying with bootstrap , all i could come up was something like this. I would like to know which form / guideness on how to proceed to recreate the content .I tried using plain html . But i couldnt come up with a form like the one i made in JSP
Try something like:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="row">
<div class="col-xs-6 form-group">
<label>Label 1</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label 2</label>
<input class="form-control" type="text" />
</div>
</div>
</form>
Based on:
Bootstrap 3 2-column form layout
Trying to align two form elements side by side to create an hours per week field
e.g
Hours per week (box here) - (box here)
but when I use two col-md-2 with a - between them I get the result of
Hours per week (box here) (box here) -
Anyone have a solution to display the - between the two boxes? I've tried using 3 col-md-1 but the alignment gets all out of whack!
The below code follows Bootstrap form construction. Using .input-group allows you to nest .input-group-addon between to fields with the .form-control class - though you do need to specify a width (hence the .col-xs-9).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label class="col-xs-3 control-label" for="HoursPerWeek">Hours Per Week</label>
<div class="col-xs-9">
<div class="input-group">
<input type="text" id="BoxOne" class="form-control">
<span class="input-group-addon">-</span>
<input type="text" id="BoxTwo" class="form-control">
</div>
</div>
</div>
</form>
Solution without the bootstrap grid
<form class="inline">
<div>
<label for="HoursPerWeek">Hours Per Week</label>
<input type="text" id="BoxOne">
<label for="#">-</label>
<input type="text" id="BoxTwo">
</div>
</form>
Solution using the bootstrap grid
<form>
<div class="form-group">
<label class="col-md-3" for="HoursPerWeek">Hours Per Week</label>
<input class="col-md-3" type="text" id="BoxOne">
<label class="col-md-3" for="#">-</label>
<input class="col-md-3" type="text" id="BoxTwo">
</div>
</form>
When I change the to at at line one. I get the following alignment.
I have got only the input boxes aligned "center" but not the labels. Sorry, I couldn't upload the screenshot here.
I have tried also with all the next nested div until form tag. But there is no use.
Can anybody help to align my form?
<body>
<div class="container">
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Ajouter un employé</legend>
<!-- Select Basic -->
<div class="control-group">
<label class="control-label" for="selectbasic">Titre</label>
<div class="controls">
<select id="selectbasic" name="selectbasic" class="input-small">
<option>M.</option>
<option>Mme.</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="prenom">Prénom</label>
<div class="controls">
<input id="prenom" name="prenom" type="text" placeholder="Prénom" class="input-xlarge" required="">
</div>
</div>
</fieldset>
</form>
</div>
</body>
I have tried also for each div of label and input tags. But it's not getting aligned center. I am totally stuck. Can anybody please pay attention to my post?
I am building an inline form with Bootstrap 3 and I can't figure out how to keep the inputs from overlapping. I hope you can see from the screenshot that the third input is overlapping the second and the fourth in overlapping it. How can I get them to align next to each other?
Here are the main parts of the html;
<div class="form-inline">
<div class="form-group">
<input class="form-control addon-input" id="units" name="units" placeholder="units" value="30" type="text">
</div>
<div class="form-group">
<input class="string optional form-control addon-input" id="unit_price" name="unit_price" placeholder="unit price" type="text">
</div>
</div>
When appending an input-group to a form-inline, the input-group appears below the form on a "new line" instead of inline with the other controls.
It seems that this is because the input-group wrapper class has display set to table whereas the other inputs, which work fine, have their display set to inline-block. Of course, it is not possible to give the input-group the inline-block display because its child add-on span, which has display: table-cell, needs the property of the parent to align correctly.
So my question is: is it possible to use input-group inside an inline form using Bootstrap classes exclusively? If not, what would be the best work-around allowing the use of custom classes.
Here is a demo illustrating my point. The code is the following:
<form action="" class="form-inline">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
<input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>
<div class="checkbox">
<label>
<input type="checkbox" /> and Checkboxes
</label>
</div>
<select class="form-control" style="width: 150px;">
<option>and Selects</option>
</select>
<button type="submit" class="btn btn-default">and Buttons</button>
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</form>
This was indeed a bug and was resolved (check the issue on github for more info).
From now on the inline forms in BootStrap require to wrap the child form controls with .form-group.
So my code would become:
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
</div>
...
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</div>
</form>
I think you may need to separate your form into columns to get the inline layout you want. An example (I think of what you're after) is on the Bootstrap site here.
try putting
<div class="col-lg-1"></div>
around your controls to see what I mean. You of course need to work in columns of 12 so this will need to be adjusted accordingly.