「Bootstrap 4入門」インプットグループのサンプル

2014年1月31日2021年1月2日

書式
<input>, <select>, <textarea> でインプットグループを使用
使用例

<div class="container mt-3">
  <h1>インプットグループのボタングループ</h1>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <button class="btn btn-outline-secondary" type="button">ボタン</button>  
    </div>
    <input type="text" class="form-control" placeholder="サンプルテキスト">
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="検索">
    <div class="input-group-append">
      <button class="btn btn-success" type="submit">検索</button>  
     </div>
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="テスト..">
    <div class="input-group-append">
      <button class="btn btn-primary" type="button">OK</button>  
      <button class="btn btn-danger" type="button">Cancel</button>  
     </div>
  </div>
</div>