とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. インプットグループ

インプットグループ

.input-group はインプットグループを構成します。.input-group-prepend は前方部品、.input-group-append は後方部品を示します。前方・後方部品にテキストを用いる場合は .input-group-text を指定します。

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="text1a">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username"
      aria-label="Username" aria-describedby="text1a">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Username"
      aria-label="Username" aria-describedby="text1b">
  <div class="input-group-append">
    <span class="input-group-text" id="text1b">@example.com</span>
  </div>
</div>

インプットグループは <input>, <select>, <textarea> に適用できます。

前方部品、後方部品には、テキストの他、ボタン、ボタングループなどを指定できます。

<div class="input-group mb-2">
  <div class="input-group-prepend">
    <span class="input-group-text">Text</span>
  </div>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-2">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox">
    </div>
  </div>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-2">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio">
    </div>
  </div>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-2">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-secondary">Button</button>
  </div>
</div>
<div class="input-group mb-2">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary dropdown-toggle"
        data-toggle="dropdown">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Menu #1</a>
      <a class="dropdown-item" href="#">Menu #2</a>
      <a class="dropdown-item" href="#">Menu #3</a>
    </div>
  </div>
  <input type="text" class="form-control">
</div>

サイズ

サイズ変更には .input-group-sm, .input-group-lg を指定します。