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.

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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>