bootstrap4.css
.input-group-prepend .btn + .btn,
.input-group-prepend .btn + .input-group-text,
.input-group-prepend .input-group-text + .input-group-text,
.input-group-prepend .input-group-text + .btn,
.input-group-append .btn + .btn,
.input-group-append .btn + .input-group-text,
.input-group-append .input-group-text + .input-group-text,
.input-group-append .input-group-text + .btn {
margin-left: -1px;
}
bootstrap4.css
.input-group-text {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: 0.375rem 0.75rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-radius: 0.25rem;
}
bootstrap4.css
.input-group-text input[type="radio"],
.input-group-text input[type="checkbox"] {
margin-top: 0;
}
bootstrap4.css
.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem;
}
bootstrap4.css
.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem;
}
bootstrap4.css
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
bootstrap4.css
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
■ドロップダウン:dropdown-menu:js:自動サイズ調整のカラムを作成する col-auto
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inputName">氏名</label>
<input type="text" class="form-control mb-2" id="inputName" placeholder="氏名を入力">
</div>
<div class="col-auto">
<label class="sr-only" for="inputUsername">ユーザーネーム</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inputUsername" placeholder="ユーザーネームを入力">
</div>
</div>
<div class="col-auto">
<div class="form-check mb-2">
<input type="checkbox" class="form-check-input" id="check">
<label class="form-check-label" for="check"> チェックする </label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">送信</button>
</div>
</div>
</form>
■フォーム:form-group:コンポーネント:テキストエリアの前にアドオンを配置
テキストエリア用
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">テキストエリア用</span>
</div>
<textarea class="form-control" aria-label="テキストエリア用"></textarea>
</div>
■フォーム:form-group:コンポーネント:入力コントロールの前後にアドオンを配置
$
.00
<div class="input-group">
<div class="input-group-prepend"> <span class="input-group-text">$</span> </div>
<input type="text" class="form-control" aria-label="金額">
<div class="input-group-append"> <span class="input-group-text">.00</span> </div>
</div>
■フォーム:form-group:コンポーネント:インラインのフォームを作成する
<form class="form-inline">
<label class="sr-only" for="name">氏名</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
<label class="sr-only" for="username">ユーザーネーム</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="username" placeholder="ユーザーネームを入力">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="checkbox20">
<label class="form-check-label" for="checkbox20">
チェックする
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">送信</button>
</form>
■フォーム:form-group:コンポーネント:入力グループ カスタムフォームの組み込み
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">オプション</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>選択してください</option>
<option value="1">オプション1</option>
<option value="2">オプション2</option>
<option value="3">オプション3</option>
</select>
</div>
■フォーム:form-group:コンポーネント:入力グループ アドオンをチェックボックスやラジオボタンにする
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="次のテキスト入力用のチェックボックス">
</div>
</div>
<input type="text" class="form-control" aria-label="チェックボックス付テキスト入力欄">
</div>
<!-- ラジオボタン付きテキスト入力欄 -->
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" aria-label="次のテキスト入力用のラジオボタン">
</div>
</div>
<input type="text" class="form-control" aria-label="ラジオボタン付テキスト入力欄">
</div>
■フォーム:form-group:コンポーネント:入力グループ 複数の入力コントロール
姓名
<div class="input-group">
<div class="input-group-prepend"> <span class="input-group-text" id="...">姓名</span> </div>
<input type="text" class="form-control" placeholder="姓">
<input type="text" class="form-control" placeholder="名">
</div>
■フォーム:form-group:コンポーネント:入力グループ 複数のアドオンを組み合わせる
$ 0.00
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" aria-label="次のテキスト入力用のラジオボタン"> </div> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span> </div>
<input type="text" class="form-control" aria-label="金額"> </div>
<div class="input-group">
<input type="text" class="form-control" aria-label="金額">
<div class="input-group-append"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span>
<div class="input-group-text">
<input type="checkbox" aria-label="前のテキスト入力用のチェックボックス">
</div>
</div>
</div>
■フォーム:form-group:コンポーネント:入力グループのサイズ調整 大、(中/標準)、小 input-group
Small
Default
Large
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<!-- 標準サイズの入力グループ -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<!-- 大サイズの入力グループ -->
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
</div>
<input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>
■ナビゲーションバー:navbar:コンポーネント:ナビバーの中に入力グループ
<nav class="navbar navbar-dark bg-dark">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
</form>
</nav>