How to align bootstrap text-box and button in one line?

Question

I want to align textbox and button in one line. I am using bootstrap css. Below is the code i am using.

HTML :

<div class="new-meows">
        <input type="text" class="form-control" >
        <button type="button" class="btn">Submit</button>    
</div>

CSS:

.new-meows{
   padding: 10px;
   border: 1px solid grey;
   margin : 10px;
   width: 97%;
 }

Layout it makes :

enter image description here

I want the button just after the text box.

score 3 · Accepted Answer · answered Sep 04 '17 at 19:16

3

You need to give proper width to textbox and button. Lets say I want button to take width of 80px and rest to textbox. Then it could be like this.

.new-meows{
   padding: 10px;
   border: 1px solid grey;
   margin : 10px;
   width: 97%;
   display: flex;
   justify-content:space-between;

 }
 .new-meows button{
    width: 80px;
 }
.new-meows input{
    width: calc(100% - 80px)
 }

using flex space-between you can achieve this. You can use float also.

answered Sep 04 '17 at 19:16

No one

1,130
1
11
21

your, welcome.. this is non bootstrap way. You can view bootstrap way of doing this at this thread. https://stackoverflow.com/questions/10615872/bootstrap-align-input-with-button – No one Sep 04 '17 at 19:30

score 0 · Answer 2 · answered Sep 04 '17 at 19:12

0

Using <div class="d inline ">
will work for you

answered Sep 04 '17 at 19:12

user223321

155
1
15

where to put this
?
– JimAnkit Sep 04 '17 at 19:17

score 0 · Answer 3 · answered Sep 04 '17 at 19:21

Both Button and Input are block elements, so they will, by default, take the whole available horizontal space. You can change both elements to inline-block, so you can define the width you want any one them to occupy. Try the following css

.new-meows input {display:inline-block;width:80%;}
.new-meows button {display:inline-block;width:15%;}

You can change the width to any value you want, but be sure that the sum is smaller than 100%. In fact, it should be less than about 95%, because between both elements there is an empty space that matters.

You can also use px, if you prefer. – João Paulo Morais Sep 04 '17 at 19:23 — João Paulo Morais, Sep 04 '17 at 19:23

score 0 · Answer 4 · answered Feb 28 '18 at 11:54

My solution is going to be similar to @No one given, but there is a slight difference in mine. No need of justify-content:space-between;, and use flex:1 instead of width: calc(100% - 80px). flex1 property will automatically assign the remaining width instead of calculating the width.

.new-meows{
   padding: 10px;
   border: 1px solid grey;
   margin : 10px;
   width: 97%;
   display:flex;
 }
 .new-meows input {
   flex:1
 }
 .new-meows button {
   width:80px;
 }

<div class="new-meows">
        <input type="text" class="form-control" >
        <button type="button" class="btn">Submit</button>    
</div>

How to align bootstrap text-box and button in one line?

4 Answers4