0

I want to vertically center the font-awesome icon inside the input box. I tried flexbox justify-content and align-content and it still not working. Is there any way in bootstrap that I can do this?

I don't want to set the margin and padding value or set using the height of the input box.

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.inset-y-0 {
  top: 0;
  bottom: 0;
}

.left-0 {
  left: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex d-flex-grow form-group position-relative">
  <div class="align-items-center justify-content-between lead pl-2 position-absolute">
    <i class="fas fa-search"></i>
  </div>
  <input type="text" class="form-control pl-5" placeholder="Type to search" />
</div>
Rasik
  • 1,961
  • 3
  • 35
  • 72

1 Answers1

1

Add align-items-center class on the root div. On flex layout, to align all items on the middle, it will be needed to set align-items: center css attribute and align-items-center css class do that action on bootstrap.

inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

inset-y-0 {
  top: 0;
  bottom: 0;
}

left-0 {
  left: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex d-flex-grow form-group position-relative align-items-center">
  <div class="align-items-center justify-content-between inset-y-0 lead left-0 pl-2 position-absolute">
    <i class="fas fa-search"></i>
  </div>
  <input type="text" class="form-control pl-5" placeholder="Type to search" />
</div>
Derek Wang
  • 10,098
  • 4
  • 18
  • 39