Twitter Bootstrap Question posted in

How to put button next to input Twitter Bootstrap 4?

How to place a button next to an input in Bootstrap. If I put some css or play with the bootstrap classes randomly I know I get this to work but I want to know a good way to do this. I don’t want to merge the button to the text field like input-group-btn do. I want the normal bootstrap style for buttons.

<div>
    <input class="form-control" /> <button class="btn btn-primary">enter</button>
</div>

I get this:

|input                    | //occupies the full width
(button) //button comes to bottom

What I want:

|input                   | (button) //same "line".
Tags:

2

Answers


  1. 0

    Use input-groups:

    body {
  padding: 1rem;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-success" type="button">Go!</button>
  </span>
</div>
    Login or Signup to reply.
  2. 0

    Option 1 – form-inline class…

    <div class="form-inline">
    <input class="form-control">
    <button class="btn btn-primary">enter</button>
</div>

    Also, you can use mr-1 (margin-right) to add a small margin between the input and the button: https://www.codeply.com/go/5XCUJIEvua

    Option 2 – table-cell class…

    Another option (if you want the input and button to be full width) is to use d-table-cell class..

    <div class="d-table-cell w-100">
    <input class="form-control">
</div>
 <div class="d-table-cell align-middle">
    <button class="btn btn-primary">enter</button>
</div>

    Option 3 – d-flex class…

    Finally, the easiest way may be to simply use d-flex which sets display:flex

    <div class="d-flex">
        <input class="form-control mr-1">
        <button class="btn btn-primary">enter</button>
</div>

    Demo of all 3 options:
    https://www.codeply.com/go/5XCUJIEvua

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search