CODEWITHSUNDEEP
cssbootstrap-4
Matius Nugroho Aryanto
Matius Nugroho Aryanto

Reputation: 901

Input Sizing Inside Input Group Bootstrap 4

I want to create an input group where the text input should be small, i add .col-3 but it breaks the layout

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
  <div class="row form-group">
    <div class="col col-md-6">
      <div class="input-group">
        <div class="input-group-btn">
          <div class="btn-group"><button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-primary">Store Groups</button>
            <div tabindex="-1" aria-hidden="true" role="menu" class="dropdown-menu"><button type="button" tabindex="0" class="dropdown-item">Sports</button><button type="button" tabindex="1" class="dropdown-item">Kids Sport</button></div>
          </div>
        </div>
        <div class="col-3"><input type="number" step="5" id="input1-group3" name="input1-group3" placeholder="Username" class="form-control"></div>
        <div class="input-group-addon">/page</div><button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button></div>
    </div>
  </div>
</form>

here is if we add no sizing

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
  <div class="row form-group">
    <div class="col col-md-6">
      <div class="input-group">
        <div class="input-group-btn">
          <div class="btn-group"><button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-primary">Store Groups</button>
            <div tabindex="-1" aria-hidden="true" role="menu" class="dropdown-menu"><button type="button" tabindex="0" class="dropdown-item">Sports</button><button type="button" tabindex="1" class="dropdown-item">Kids Sport</button></div>
          </div>
        </div><input type="number" step="5" id="input1-group3" name="input1-group3" placeholder="Username" class="form-control">
        <div class="input-group-addon">/page</div><button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button></div>
    </div>
  </div>
</form>
what should i do?

Upvotes: 0

Views: 56

Answers (2)

Asifuzzaman
Asifuzzaman

Reputation: 1783

I Hope You Are Looking For This

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="col col-md-6">
    <div class="btn-group">
  <button type="button" class="btn btn-primary form-control mb-2 ">Store Groups</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split form-control mb-2 mr-sm-2" data-toggle="dropdown">
   
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Store Groups</a>
    <a class="dropdown-item" href="#">Sports</a>
  </div>
</div>
   

    <input type="number" step="5" id="input1-group3" name="input1-group3" placeholder="Username" class="form-control mb-2 mr-sm-2">
 <div class="input-group-addon form-control mb-2 ">/page</div> <button type="submit" class="btn btn-primary mb-2">Submit</button>

  </div>
  </form>

Upvotes: 0

hamza1248
hamza1248

Reputation: 90

I think you are looking for something like this one.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <form class="form-horizontal">
      <div class="row form-group">
        <div class="col col-md-6">
          <div class="input-group">
            <div class="input-group-btn">
              <div class="btn-group"><button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-primary">Store Groups</button>
                <div tabindex="-1" aria-hidden="true" role="menu" class="dropdown-menu"><button type="button" tabindex="0" class="dropdown-item">Sports</button><button type="button" tabindex="1" class="dropdown-item">Kids Sport</button></div>
              </div>
            </div>
            <div class="input-group mb-3 col-7">
              <input type="number" step="5" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon2">
              <div class="input-group-append">
    
                <input class="form-control" id="disabledInput" type="text" placeholder="/page" disabled style="width: 100px">
                <button class="btn btn-primary" type="button"><i class="fa fa-search"></i></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>

Upvotes: 1

Related Questions