Search code examples
htmlcsstwitter-bootstrapbootstrap-4css-grid

Bootstrap 4 input-group-append not working with CSS GRID

this snipped works fine if it is not wrapped with display:grid

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

if it is wrapped with display:grid

.wrapper{
    display: grid;
}



<div class="wrapper">
     <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">Button</button>
      </div>
    </div>
   </div>

enter image description here

This input is obviously part of large css grid layout

Solution

  • Your code already displays the form in one line.

    Go through your css links and disable each one while checking if the issue is fixed. Another rule must be interfering with it.