Bootstrap full-width text-input within inline-form

Question

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...

I just want to second your finding about the problem with the default MVC5 template. I just spend an hour researching this issue and (falsely) cursing at Bootstrap before I found a working sample in jsfiddle that prompted me to start again with a clean HTML page, and it worked fine. Only then did I figure there was an issue with the VS2013 template and came across this post. Goodness knows why the decision for the max-width, but it goes to show you have to be careful when using other people's code. It's also testament to going back to basics when stuck with an issue like this. — Jason Snelders
– Jason Snelders, Commented Jun 27, 2014 at 0:39
Thanks, also using asp.net template, but I already set max-width of input to none, but it still doesn't take the whole width, only if I set it to 100% manually. But then the button right to it goes down, and I want it to stay in the same line. — ronenfe
– ronenfe, Commented Dec 31, 2014 at 23:30
@Killnine The edit in your question solved my headaches. It was in fact the problem, thank you for editing your post ! — Flame_Phoenix
– Flame_Phoenix, Commented Aug 25, 2015 at 8:50
Dayuuumn! Been struggling with this and turns out it's an MVC issue! How stupid I am for not inspecting the css properties of the textbox! Thanks for pointing this out! — Hajjat
– Hajjat, Commented Nov 24, 2017 at 4:41
Thanks for this. Like many before me it seems., I spent a good hour or two trying to figure this out. (Don't forget to <Ctrl>F5 to totally refresh after editing site.css - that cost me a few minutes too :-)) — Peter
– Peter, Commented Apr 11, 2022 at 15:21

morten.c · Accepted Answer · 2018-06-12 14:42:21Z

114

The bootstrap docs says about this:

Requires custom widths Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

The default width of 100% as all form elements gets when they got the class form-control didn't apply if you use the form-inline class on your form.

You could take a look at the bootstrap.css (or .less, whatever you prefer) where you will find this part:

.form-inline {

  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }
    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    [...]
  }
}

Maybe you should take a look at input-groups, since I guess they have exactly the markup you want to use (working fiddle here):

<div class="row">
   <div class="col-lg-12">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
      <span class="input-group-btn">
        <button class="btn btn-default btn-lg" type="submit">Search</button>
      </span>
    </div>
  </div>
</div>

edited Jun 12, 2018 at 14:42

answered Apr 1, 2014 at 0:49

morten.c

3,5255 gold badges43 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Killnine Over a year ago

See my edit above. I think the Site.css in the ASP.NET template may have gotten me on this one. However, this is a terrific answer and very helpful for future reference.

cfx Over a year ago

input groups are the way to go on this. Personally, I adjust the input group style to resemble an inline form when I don't want the button immediately beside the input. Working demo with Bootstrap LESS included: jsfiddle.net/silb3r/gwxc5c75

henry Over a year ago

nice! I know the question is bootstrap-specific, but if anyone else wants to drop it into a bootstrapless (not bootstrap LESS;) site I've extracted the relevant styles here: stackoverflow.com/a/27413796/1241736

Chloe Over a year ago

The Bootstrap link in the Fiddle is broken. It's probably pointing to a new version of Bootstrap and the Fiddle is no longer working.

morten.c Over a year ago

@Chloe You're right, the fiddle was using a bootstrap css file that no longer exists. I just updated the fiddle, it's working again.

|

haxxxton · Accepted Answer · 2014-04-01 00:56:05Z

38

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>

http://jsfiddle.net/n6c7v/1/

answered Apr 1, 2014 at 0:56

haxxxton

6,4423 gold badges29 silver badges61 bronze badges

1 Comment

stevec Over a year ago

Your answer helped me realise I was simply missing class="form-control" in the input fields.

Community · Accepted Answer · 2017-05-23 12:02:59Z

11

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.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Oct 15, 2015 at 7:30

kurdtpage

3,2631 gold badge26 silver badges24 bronze badges

1 Comment

user441058 Over a year ago

Per morten this doesn't apply to inline forms. Thus, you need the input-group to force it to be 100%

Minh Ho · Accepted Answer · 2021-10-16 10:59:32Z

5

You can use flex-fill class for input

<div class="row">
<div class="col-md-12">
    <form class="form-inline" role="form">           
            <input type="text" class="form-control input-lg flex-fill" id="search-church" placeholder="Your location (City, State, ZIP)">
            <button type="submit" class="btn btn-lg">Search</button>            
    </form>
</div>

answered Oct 16, 2021 at 10:59

Minh Ho

631 silver badge4 bronze badges

Comments

Fahim Al Mahmud Ashik · Accepted Answer · 2019-09-07 03:55:54Z

4

Try something like below to achieve your desired result

input {
    max-width: 100%;
}

edited Sep 7, 2019 at 3:55

Fahim Al Mahmud Ashik

1,12110 silver badges26 bronze badges

answered Sep 7, 2019 at 0:35

Naveed Khan

411 bronze badge

Comments

John M · Accepted Answer · 2020-02-05 11:12:43Z

1

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 {
    margin: .25rem 0 !important;
}

.prop-field {
    margin-left: 1rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
	<div class="col-12">
		<div class="d-flex">
			<label class="flex-fill prop-label">Label:</label>
			<input type="text" class="flex-fill form-control prop-field">
		</div>
	</div>
</div>

answered Feb 5, 2020 at 11:12

John M

2,6406 gold badges28 silver badges35 bronze badges

Comments

TCF · Accepted Answer · 2021-01-30 21:34:31Z

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-groups, 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.

Collectives™ on Stack Overflow

Bootstrap full-width text-input within inline-form

7 Answers 7

6 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

6 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related