Make text input and button in same row with Bootstrap

Question

I am using basic file upload bootstrap-fileupload.js to give me a filename and button and want to repeat the format with a text input and button.

<div class="form-group">
    <label class="control-label">Source File Name</label>
    <div class="fileupload fileupload-new" data-provides="fileupload">
        <div class="input-group">
            <div class="form-control uneditable-input"><i class="icon-file fileupload-exists"></i> 

            </div>
            <div class="input-group-btn">
                <a class="btn btn-default btn-file">
                    <span class="fileupload-new">Select file</span>
                    <span class="fileupload-exists">Change</span>
                    <input type="file" class="file-input"/></a>
                <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a>
            </div>
        </div>
    </div>
 </div>
 <form id="frmOptions" method="post" class="form-inline span12">

 <div class="row-fluid">   
<div class="form-group">
    <label class="control-label">File Name on Upload</label>
    <div class="input-group ">
        <input id="uploadname" type="text" class="form-control">
        <a class="btn btn-default go inline">Upload to DocMan</a>
    </div>
</div>

</div>
</form>

Page hosted here https://googledrive.com/host/0B90FGJizRd-gbm1JRUswYUY5dE0/bootstrap/ I have tried variations of this with no effect. Basically I want two similar looking full width rows, each with a text field and a button. Any advice is welcome.

brandrich · Accepted Answer · 2014-05-15 21:42:38Z

19

You use the input group

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

answered May 15, 2014 at 21:42

brandrich

1971 silver badge2 bronze badges

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

2 Comments

sports Over a year ago

hmm doesn't work for me.. the button goes to a new line

user1438038 Over a year ago

Note: This works with Bootstrap 3. If it does not work for you, check if you are using an older Bootstrap version.

user1438038 · Accepted Answer · 2018-08-09 10:54:43Z

14

Try this:

Remove class "form-inline" from the form
Add class "input-group-btn" to the button

Resulting html:

<form id="frmOptions" method="post" class="span12">
    <div class="row-fluid">   
        <div class="form-group">
            <label class="control-label">File Name on Upload</label>
            <div class="input-group">
                <input id="uploadname" type="text" class="form-control">
                <a class="input-group-btn btn btn-default go inline">Upload to DocMan</a>
            </div>
        </div>
    </div>
</form>

edited Aug 9, 2018 at 10:54

user1438038

6,1287 gold badges64 silver badges105 bronze badges

answered Sep 10, 2013 at 0:34

Vic

9,0817 gold badges48 silver badges56 bronze badges

1 Comment

Daniel Gabriel Over a year ago

This makes the button float all the way to the right. How can I force it to stay next to the text input?

Erik K. · Accepted Answer · 2015-07-17 20:56:54Z

5

You can wrap it inside a div with the "navbar-form" class. That will put everything inside inline.

answered Jul 17, 2015 at 20:56

Erik K.

1,06214 silver badges13 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:31:27Z

0

One option is to override the display:block; style of the class form-control. I have posted sample code in following reply:

bootstrap: align input with button

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Aug 11, 2016 at 1:22

Bikash Bishwokarma

3734 silver badges9 bronze badges

Collectives™ on Stack Overflow

Make text input and button in same row with Bootstrap

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related