I am struggling to create a textbox that fits the entire width of my container area.
<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form">
<input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
<button type="submit" class="btn btn-lg">Search</button>
</form>
</div>
</div>
When I do the above, the two form elements are in-line, as I expect, but don't take up more than a few columns, at best. Hovering over the col-md-12
div in firebug shows it taking up the expected full width. It's just the text input that doesn't seem to fill. I even tried adding an in-line width value but it didn't change anything. I know this should be simple, just feeling really dumb now.
Here is a fiddle: http://jsfiddle.net/52VtD/4119/embedded/result/
EDIT:
The selected answer is thorough in every way and a wonderful help. It's what I ended up using. However I think my initial issue was actually a problem with the default MVC5 template within Visual Studio 2013. It contained this in Site.css:
input,
select,
textarea {
max-width: 280px;
}
Obviously that was blocking the text-input from expanding appropriately... Fair warning to future ASP.NET template users...
This question is related to
html
css
twitter-bootstrap-3
With Bootstrap >4.1 it's just a case of using the flexbox utility classes. Just have a flexbox container inside your column, and then give all the elements within it the "flex-fill" class. As with inline forms you'll need to set the margins/padding on the elements yourself.
.prop-label {_x000D_
margin: .25rem 0 !important;_x000D_
}_x000D_
_x000D_
.prop-field {_x000D_
margin-left: 1rem;_x000D_
}
_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<div class="row">_x000D_
<div class="col-12">_x000D_
<div class="d-flex">_x000D_
<label class="flex-fill prop-label">Label:</label>_x000D_
<input type="text" class="flex-fill form-control prop-field">_x000D_
</div>_x000D_
</div>_x000D_
</div>
_x000D_
Try something like below to achieve your desired result
input {
max-width: 100%;
}
As stated in a similar question, try removing instances of the input-group
class and see if that helps.
refering to bootstrap:
Individual form controls automatically receive some global styling. All textual , , and elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
I know that this question is pretty old, but I stumbled upon it recently, found a solution that I liked better, and figured I'd share it.
Now that Bootstrap 5 is available, there's a new approach that works similarly to using input-group
s, but looks more like an ordinary form, without any CSS tweaks:
<div class="row g-3 align-items-center">
<div class="col-auto">
<label>Label:</label>
</div>
<div class="col">
<input class="form-control">
</div>
<div class="col-auto">
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
The col-auto
class makes those columns fit themselves to their contents (the label and the button in this case), and anything with a col
class should be evenly distributed to take up the remaining space.
have a look at something like this:
<form role="form">
<div class="row">
<div class="col-xs-12">
<div class="input-group input-group-lg">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="submit" class="btn">Search</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-xs-12 -->
</div><!-- /.row -->
</form>
Source: Stackoverflow.com