CODEWITHSUNDEEP
htmlcssbootstrap-4
Michael
Michael

Reputation: 1839

How to display a form input and button on the same row without margins (all else same size)

I want to display an input and button using bootstrap in such a way that 100% of the width is used automatically, with margins on left right top button but no padding or margin between them. Basically I want the input and button to look as if they are one.

Any ideas on how to do this?

Upvotes: 0

Views: 42

Answers (1)

Mohsen TOA
Mohsen TOA

Reputation: 809

you can use input group:

<div class="row p-0">
<div class="col-12 m-0 p-0 input-group mb-3">
  <input type="text" class="form-control" aria-label="whatever">
  <div class="input-group-append">
    <button type="submit" class="btn btn-outline-primary">Submit</button>
  </div>
</div>
</div>

Upvotes: 1

Related Questions