What I have done here is use the standard Bootstrap grid system of .col-md-5 and .col-md-7 under .row to place all the element on 1 row but I can't seem to make it work.
Another thing is the element keeps getting pulled down to another line below the input.
<div class='col-md-12'>
<div class='row'>
<div class='col-md-5'>
<select class='form-control'>
<option value='us'>USA</option>
</select>
</div>
<div class='col-md-7'>
<span class="" style="display: inline">
<span class="input-group">
<span class="input-group-addon">
ZIP/Postal code
</span>
<input class="form-control" type="text">
</span>
<a href='#' class=''>
cancel
</a>
</span>
</div>
</div>
</div>
How can I put all these onto 1 line?
Here's a jsfiddle for it: http://jsfiddle.net/2656xt63/
There's nothing wrong with your bootstrap column classes, but the elements will only appear side by side on md screen widths (>= 992px). The fiddle panel is narrower than that so the elements are stacked.
If you use col-xs-* the elements will appear side by side at all times.
Alternatively, for a small form such as this, you could use an inline form:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="country">Country</label>
<select class='form-control' id="country">
<option value='us'>USA</option>
</select>
</div>
<div class="form-group">
<span class="input-group">
<span class="input-group-addon">
ZIP/Postal code
</span>
<input class="form-control" type="text">
</span>
</div>
<div class="form-group">
<a href="#" class="btn btn-default">
cancel
</a>
</div>
</form>
Here's a bootply demonstrating the inline form.
Related
My problem is, that my input-group's width is not 100%.
This is how it looks at the moment: https://jsfiddle.net/6gmzz07b/
I just want, that the input-group's width is 100%, so that it fills the container.
According to bootstrap example you need to add input-group-btn element.
For Example.
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<select class="form-control">
<option selected="">seconds</option>
<option>minutes</option>
<option>hours</option>
<option>days</option>
<option>weeks</option>
</select>
</div>
</div>
Fiddle here
Here is the fiddle which will take the 100% width fiddle
<div class="container">
<div class="row">
<div class="">
<div class="col-xs-12">
<div class="input-group">
<input id="ban_time" type="number" class="form-control" value="10">
<span class="input-group-addon">
<select class="form-control" style="width: auto">
<option selected="">seconds</option>
<option>minutes</option>
<option>hours</option>
<option>days</option>
<option>weeks</option>
</select>
</span>
</div>
</div>
</div>
</div>
You will have remove the input style="width:auto" and will have to add extra span and give the class input-group-addon and will have to nest the select tag inside the span tag
I was looking solution for newer version of Bootstrap like 4.6 but above answers not worked for me.
For Bootstrap v4.6 you need to add "flex: 1;" to your input. This makes your input expands to entire area except append or prepend.
<div class="input-group mb-3">
<input type="text" class="form-control" style="flex: 1;" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">#example.com</span>
</div>
</div>
I am using bootstrap in my application. I am having a form which contains multiple drop down boxes which are placed inline. The width of the container containing the form is col-lg-12 and is taking the entire screen. Because of the data inside the drop down the last two drop downs are displayed in the second line. I tried giving the max-width property of the select box to 50%. The drop down width reduces but the margin still remains the same. I am not goot at bootstrap. Please let me know where I am going wrong. I am posting the code below:
<form novalidate role="form" name="filterForm" class="form-inline">
<div ng-repeat="criteria in criterias">
<div class="m-b">
<div class="form-group s-b">
<span>Country</span>
<select class="form-control" ng-options="item for item in country" name="country" ng-model="classification.country">
</select>
</div>
<div class="form-group s-b">
<span>State</span>
<select ng-options="item for item in state" class="form-control" name="state" ng-model="criteria.state" style="max-width:50%">
</select>
</div>
<div class="form-group s-b">
<span>City</span>
<select class="form-control" ng-options="item for item in Cities" name="account" ng-model="criteria.city" style="max-width:50%;">
</select>
</div>
<div class="form-group s-b">
<span>Predicate</span>
<select class="form-control" name="account" ng-model="criteria.predicate">
<option value="matches">Matches</option>
<option value="not-matches">Not Matches</option>
</select>
</div>
<div class="form-group s-b">
<span>Value</span>
<select class="form-control" name="account" ng-model="criteria.value" style="min-width:100px;">
</select>
</div>
<div class="form-group">
<span>
<button class="btn btn-sm btn-primary pad-btn" type="submit" ng-click="addCriteria()"><i class="fa fa-plus"></i>
</button>
<button class="btn btn-sm btn-danger pad-btn" type="submit" ng-click="deleteCriteria(criteria)"><i
class="fa fa-minus"></i></button>
</span>
</div>
</div>
</div>
<button class="btn btn-sm btn-primary pad-btn align-center" type="submit" ng-click="searchParams(filterForm)">Submit
<i class="fa fa-check"></i></button>
<button class="btn btn-sm btn-warning pad-btn align-center" type="submit" ng-click="resetFilter()">Reset
<i class="fa fa-reply"></i></button>
</form>
Try adding a class
Since your data is too big you should try adding a class that modifies the position of the dropdowns, since they are absolute they should be easy to move around to where you want.
Explanation of bootsraps column system
If you set your class col-xs-12 it will be bull width all the way from mobile to big desktop
If you set your class to col-xs-12 col-lg-6 then xs, sm and md will all be full width but lg will be half width.
try using shoe lace to model your column setup.
Note
You should check out ui.bootstrap since you're using angular.js. It removed the use of jQuery so you don't run into any compatibility issues or strange bugs.
Hi I am not a good UI HTML developer but have to do some fixes on a form. I am surprised that text align is not working on this form. I can see this HTML but don't know how to align text right on label StockEnd.
<div class="col-sm-1">
<label class="control-label col-sm-1" for="StockEnd">End</label>
</div>
<div class="col-sm-2 ">
<div class="input-group">
<input type="text" name="StockEnd" class="form-control" id="StockEnd" ng-readonly="readonly" ng-model="Catalogdata.stockTo" ng-disabled="isDisabled" capitalize typeahead="item.number for item in getAutoCompleteStockNumber($viewValue)">
<span class="input-group-btn">
<button class="btn-default btn" type="button" ng-click="stockNumberSearchClick('end')"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
This can be achieved with marginal adjustment to your HTML classes.
First, you must remove .col-sm-1 on your <label>, as this class causes a float:left to be applied to the element, which means any use of text-align will no longer affect it. With that class removed, you can then add .text-right to the parent of the <label>.
In the end, your HTML will look like:
<div class="col-sm-1 text-right">
<label class="control-label" for="StockEnd">End</label>
</div>
<div class="col-sm-2 ">
<div class="input-group">
<input type="text" name="StockEnd" class="form-control" id="StockEnd" ng-readonly="readonly" ng-model="Catalogdata.stockTo" ng-disabled="isDisabled" capitalize="" typeahead="item.number for item in getAutoCompleteStockNumber($viewValue)">
<span class="input-group-btn">
<button class="btn-default btn" type="button" ng-click="stockNumberSearchClick('end')"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
Here's a Bootply to demonstrate.
Hope this helps! Let me know if you have any questions.
either add text-right class to the parent form-group
OR
modify the label to be display: block with text-right class to do this.
After discussing with my colleague, we made this change and it worked as required. Just removed the class from outer Div and it worked. So Instead of
<div class="col-sm-1">
<label class="control-label col-sm-1" for="StockEnd">End</label>
</div>
it is now
<div >
<label class="control-label col-sm-1" for="StockEnd">End</label>
</div>
Rest is same no change.
I have the following HTML:
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" name="price" value="" placeholder="Price (optional)" style="width: 140px;">
</div>
<span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span>
JSFIDDLE
It renders like this:
How can I get both inputs and the button on the same line? I've been messing with the CSS but can't seem to get it to work. I was able to get it working with a table, but I know a CSS solution would be "better."
You can use Inline Forms like in the Bootstrap Documentation found here:
https://getbootstrap.com/docs/3.4/css/#forms-inline
The 'form-inline' class is probably what you're looking for.
Solution 1 - Using the Grid
Use the Bootstrap’s predefined grid classes for arranging the form elements.
The grid gives you a better control over the width of the elements and scales better than the Inline Form solution.
<form>
<div class="form-row">
<div class="form-group col-md-7">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price0" placeholder="Price (optional)">
</div>
</div>
<div class="form-group col-md-2">
<button type="submit" class="btn btn-primary" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</div>
</div>
</form>
Solution 2: Inline Form:
Use an Inline Form, as described by Bootstrap Inline Form Documentation.
You need to manually address the width and alignment.
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="input-group m-2">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price" placeholder="Price (optional)">
</div>
<button type="submit" class="btn btn-primary m-2" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</form>
Running Example
This JSFiddle shows both solutions running.
The sample code and fiddle are updated for Bootstrap 4.
Use grid layout with xs phone size to force grid on responsive, the grid is divided into 12 cells so you'll need 3 x 4.
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
You could also have one of them bigger than the others:
<div class="row">
<div class="col-xs-7">
</div>
<div class="col-xs-3">
</div>
<div class="col-xs-2">
</div>
</div>
As long as they add up to 12.
Demo
Bootstrap Grid
In Bootstrap 4 you use multiple
<div class="col"></div>
I already have one row
<div class="row input_section">
<div class="span3">
<h3>Origin</h3>
<p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
</div>
<div class="span9 delivery_section">
<label><div>Address</div>
<input type="text" name="type" value=""/>
</label>
<label>
<button class="btn btn-primary" type="button">Verify</button>
</label>
<label><div style="width:100%;height:150px;border:1px solid black;"></div></label>
</div>
</div>
And I want to do the div size full in the span9 .
So,How can i write it?
straight from the bootstrap docs my friend
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
Check this jsFiddle
Bootstrap already have class form-inline to set into inline.
Use this in your existing div append this class="form-inline"
Replace this line
<div class="span9 delivery_section">
into
<div class="span9 delivery_section form-inline">
Already i use this, hope this help you!
Try this.
<div class="row input_section">
<div class="span3">
<h3>Origin</h3>
<p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
</div>
<div class="span9 delivery_section">
<label>Address</label>
<div class="input-group">
<input class="form-control" type="text" placeholder="Address">
<div class="input-group-btn">
<button class="btn btn-primary" type="button"> Verify </button>
</div>
</div>
<div style="width:100%;height:150px;border:1px solid black;"></div>
</div>
</div>
If it doesn't seem to work, it probably because I'm using bootstrap 3.
label is inline element. And moreover in bootstrap to accept the width by default they have specified the display property as 'block'. Just override the code by placing the following code. Then you will done with your code.
label {
display:inline-block;
}