<div class="form-inline">
<div class="form-group has-feedback">
<label for="id_first_name">First Name</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" id="id_first_name" name="first_name" type="text" />
</div>
</div>
<div class="form-group has-feedback">
<label for="id_last_name">Last Name</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" id="id_last_name" name="last_name" type="text" />
</div>
</div>
</div>
I get a output similar to this: http://i.stack.imgur.com/YKvOY.png
But I want the labels above the fields.
I googled and I see a lot of people have the same problem but exactly the opposite. They have the labels above the fields and want them in the same line. However I tried their code, still not working.
I've created this fiddle demonstrating this using what you provided. form-group should do the trick.
Related
I'm using <label asp-for and <input asp-for tags inside my form to carry out "Create Form" action as well as Bootstrap for looks. How do I fix this bug, it's working with asp-for, I can create and edit successfully through these fields but its looks rather twisted than user friendly.
<div class="form-group">
<label asp-for="City" class="control-label"></label>
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger"></span>
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<label asp-for="Department" class="dropdown-item">HR</label>
<input asp-for="Department" class="form-control" />
<label asp-for="Department" class="dropdown-item">Sales</label>
<input asp-for="Department" class="form-control" />
</div>
<span asp-validation-for="Department" class="text-danger"></span>
</div>
</div>
Here is the result:
Before select
During select
After select
As you can see its not populating inside the text field but its there, I tested it. Maybe there is other way to do it with HTML tags?
Do you want something like this, you can use the <select> tag to implement the dropdown:
<div class="form-group">
<label asp-for="City" class="control-label"></label>
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Department" class="control-label"></label>
<select asp-for="Department" class="form-control">
<option selected>Choose Department</option>
<option value="HR">HR</option>
<option value="Sales">Sales</option>
<option value="Other">Other</option>
</select>
</div>
Result:
I have a problem with my div element wchich contains label, input and button for opening datepicker popup. Button wchich open this one is a little below the input. I'd like to have all elements in one line. I use bootstrap for that. Below is show my HTML code:
<div class="row">
<div class="col-md-3">
<p class="input-group">
<label for="usr">Date From:</label>
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt1" is-open="datepickers.dt" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'dt')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-3">
<p class="input-group">
<label for="usr">Date To:</label>
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt2" is-open="datepickers.dtSecond" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'dtSecond')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
Could someone help me with that? I would be greatful for helping
Best regards ;)
By making use of Bootstrap's .form-group wrapper you can achieve the results you desire:
<div class="form-group">
<label for="usr" class="control-label">Date From:</label>
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt1" is-open="datepickers.dt" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<div class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'dt')"><i class="glyphicon glyphicon-calendar"></i></button>
</div>
</div>
</div>
You can read more about .form-group and a variety of other form-related helper-classes on Bootstrap's documentation page: http://getbootstrap.com/css/#forms
I am using Bootstrap 3, what I want cover whole form on full page like attached image, in the image I am using kendo UI popup window. pop up window width is 1000px
Here is my HTML code,
<section class="container-fluid padding-rl">
<div class="row">
<div class="col-sm-3">
<div class="profile-box">
<img class="profile-picture" src="" alt="" />
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-1">First Name:</label>
<div class="col-sm-3">
<input type="text" class="form-control" data-bind="value: selectedRecord.FirstName" />
</div>
<label class="control-label col-sm-1 col-sm-offset-1">Last Name:</label>
<div class="col-sm-3">
<input type="text" class="form-control" data-bind="value: selectedRecord.LastName" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1">Email:</label>
<div class="col-sm-3" style="">
<input type="text" class="form-control" data-bind="value: selectedRecord.Email" />
</div>
<label class="control-label col-sm-1 col-sm-offset-1 ">Mobile:</label>
<div class="col-sm-3" style="">
<input type="text" class="form-control" data-bind="value: selectedRecord.Mobile" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1">Phone:</label>
<div class="col-sm-3" style="">
<input type="text" class="form-control" data-bind="value: selectedRecord.OfficePhone" />
</div>
<label class="control-label col-sm-1 col-sm-offset-1 ">Account:</label>
<div class="col-sm-3" style="">
<input type="text" id="txtContactAccount" class="form-control" data-bind="value: selectedRecord.ContactAccount" />
</div>
</div>
</div>
</div>
</div>
</div>
Attached image
Thank you in advance
Unfortunately I don't see your code in your question. From the sample picture I'm guessing what you are looking to do is create a modal?
Take a look at bootstrap's documentation here:
Bootstrap JavaScript
Scroll down a bit to the part about modals, they have nice samples there too.
Today I copied literally a test piece of code from the twitter-bootstrap site into my code. I tried to get a horizontal form like in the example. but for some reason, I don't get a horzontal layout. My site http://073design.nl/kasopmaak/?
Code i used for horizontal form:
<form class="form-horizontal">
<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">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
Your code works fine only when link with bootstrap version 2.3 DEMO1
Check this works in bootstrap 3
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-2">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label col-xs-2">Password</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
I would like to design a two column horizontal form using Bootstrap V2.3.2. The following is the html:
<div id='content' class='row-fluid'>
<div class='span12 main'>
<h2>Product Data</h2>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label for="inputAppName" class="control-label col-xs-2">Application Name </label>
<div class="col-xs-10">
<input type="text" class="form-control" id="app_name" name="app_name" placeholder="Application Name">
</div>
</div>
<div style="height:10px;"></div>
<div class="form-group">
<label for="inputAppDesc" class="control-label col-xs-2">Description </label>
<div class="col-xs-10">
<textarea class="form-control" id="app_desc" name="app_desc" rows="4" placeholder="Application Description"></textarea>
</div>
</div>
</fieldset>
</form>
</div>
</div>
I find that the width of the input-text and textarea on the second column are smaller. I would like to extend them to take up the rest space. I tried to use the "input-block-level" class but the input-text and textarea will then not be on the same row as the label.
Can anyone help?
Thanks in advance!
The first thing to do is to don't use the Bootstrap 3 class...
Try Bootstrap 2 instead... Replace col-xx-[1-12] by span[1-12]
Your code with input in span11 :
http://www.bootply.com/119374
<div id="content" class="row-fluid">
<div class="span12 main">
<h2>Product Data</h2>
<form class="form-horizontal">
<fieldset>
<div class="form-group row-fluid">
<label for="inputAppName" class="control-label span2">Application Name </label>
<div class="span10">
<input type="text" class="form-control span11" id="app_name" name="app_name" placeholder="Application Name">
</div>
</div>
<div style="height:10px;">
</div>
<div class="form-group row-fluid">
<label for="inputAppDesc" class="control-label span2">Description </label>
<div class="span10">
<textarea class="form-control span11" id="app_desc" name="app_desc" rows="4" placeholder="Application Description"></textarea>
</div>
</div>
</fieldset>
</form>
</div>
</div>
try this
<form>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>
</div>
</div>
</form>