CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Casey Crookston
Casey Crookston

Reputation: 13945

How to make a Bootstrap input-group look like a form-group

I'm trying to make the last row look exactly like the others, but with the icon appended to the text box. I can't seem to get the width right!

(I apologize... I don't know how to make the code snippet render properly in this page. You have to view full screen.)

<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-md-center">
  <div class="col-sm-3">
    <div class="form-group row">
      <label>Name:</label>
      <input type="text" class="form-control" />
    </div>
    <div class="form-group row">
      <label>Date From:</label>
      <input type="text" class="form-control" />
    </div>
    <div class="input-group row">
      <label>Date To:</label>
      <input type="text" class="form-control" />
      <div class="input-group-append">
        <div class="input-group-text" id="btnGroupAddon2">
          <i class="fa fa-search" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 751

Answers (2)

James Bailey
James Bailey

Reputation: 508

If you want to keep it to the left, it takes a bit of out of class work like so:

<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-md-center">
  <div class="col-sm-3">
    <div class="form-group row">
      <label>Name:</label>
      <input type="text" class="form-control" />
    </div>
    <div class="form-group row">
      <label>Date From:</label>
      <input type="text" class="form-control" />
    </div>
    <div class="input-group row">
      <label class="pt-2">Date To:</label>
      <input type="text" class="form-control ml-2"
      style="border-top-left-radius: .25rem;border-bottom-left-radius: .25rem;"/>
      <div class="input-group-append">
        <div class="input-group-text" id="btnGroupAddon2">
          <i class="fa fa-search" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Naren Murali
Naren Murali

Reputation: 56182

Retain the form group of the div above "Date to:" label, then you can insert a div wrapping the input and image div's and add the input-group class which will produce the required result, please check my below example!

<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col-sm-3">
      <div class="form-group row">
        <label>Name:</label>
        <input type="text" class="form-control" />
      </div>
      <div class="form-group row">
        <label>Date From:</label>
        <input type="text" class="form-control" />
      </div>
      <div class="form-group row">
        <label>Date To:</label>
        <div class="input-group">
          <input type="text" class="form-control" />
          <div class="input-group-append">
            <div class="input-group-text" id="btnGroupAddon2">
              <i class="fa fa-search" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions