I have an asp page using bootstrap and I can't figure out how to change the size of a label in a form group. If I change the <div> column size it changes the width for the label and input. I need the label to be long but the input to be short. Here is what I have. Pretty basic. In the code below i just need the label to be size 8 and the input size 3. I've tried wrapping the input in its own div but the formatting looks really bad.
<div class="form-group">
<div class="col-xs-8">
<asp:label class="control-label dark-label">Inititiating Date: (if different than request date)</asp:label>
<asp:TextBox ID="initDate" runat="server" class="form-control" placeholder="Inititiating Date"></asp:TextBox>
</div>
</div>
If I understand you correctly, you can add the label and the input grid classes (col-xs-)
Like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label class="control-label dark-label col-xs-8">Inititiating Date: (if different than request date)</label>
<input class="col-xs-3" type="text" ID="initDate" class="form-control" placeholder="Inititiating Date" />
</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
I am working on a requirement where the input group contains two text-boxes separated by input-group-addon. The problem I am facing is I am not able to set the width of the text-boxes using bootstrap css. The first text-box should be wider than the second text-box.
JSFiddle: https://jsfiddle.net/Vimalan/5eqdkveb/3/
Current:
The textbox before and after delimiter are of same size.
Expected:
The textbox after delimiter should be small. I am more interested in a solution which uses bootstrap css and not custom css.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Approval Number</label>
<div class="col-xs-9">
<div class="input-group">
<input type="text" class="form-control input-sm" id="ApprovalNumberTextBox" />
<span class="input-group-addon">Delimiter</span>
<input type="text" class="form-control input-sm" id="ApprovalNumberDelimiterTextBox" />
</div>
</div>
</div>
</div>
I don't get why you are not able to set text-boxes width?!
You can simply add css rule to the input you want and set its width, like
<style>
#ApprovalNumberDelimiterTextBox {
width:40%;
}
</style>
and it is working Here or there is another problem I don't get?
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>
I need my 2 inputs which placed inline to have width of parent div which defines col-md-6 and col-md-3. Right now inputs are aligned correctly but have width which in one case less than col-md-6 and in second case more than col-md-3. How to make this inputs have width col-md-6 and col-md-3 correspondingly?
<div class="col-md-9">
<form action="" role="form" class="form-inline">
<div class="col-md-6">
<div class="form-group">
<label for="iR" class="sr-only">i R</label>
<input type="text" class="form-control" id="iR" placeholder="some mid long explanation" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="iS" class="sr-only">i S</label>
<input type="text" class="form-control" id="iS" placeholder="some mid long explanation 2" />
</div>
</div>
</div>
As others have mentioned, you need to specify custom widths with inline forms. From the docs:
Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.
In your case, you need to specify width: 100% for both the input and the form-group:
<div class="form-group" style="width: 100%">
and
<input type="text" class="form-control" id="iR" placeholder="some mid long explanation" style="width: 100%" />
Working example in JSFiddle
Just put style="width: 100%;" on the input; Btw, you are missing a form closing tag.
Also if you look at bootstraps for any elements you set up most of the time they leave a bit of margins. So if you don't want any margins just change the margins to 0.
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.