bootstrap4.css
@media (min-width: 576px) {
.form-inline label {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 0;
}
.form-inline .form-group {
display: -ms-flexbox;
display: flex;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0;
}
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.form-inline .form-control-plaintext {
display: inline-block;
}
.form-inline .input-group,
.form-inline .custom-select {
width: auto;
}
.form-inline .form-check {
display: -ms-flexbox;
bootstrap4.css
.btn-toolbar .input-group {
width: auto;
}
bootstrap4.css
.input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
}
bootstrap4.css
.input-group > .form-control,
.input-group > .form-control-plaintext,
.input-group > .custom-select,
.input-group > .custom-file {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 1%;
margin-bottom: 0;
}
bootstrap4.css
.input-group > .form-control + .form-control,
.input-group > .form-control + .custom-select,
.input-group > .form-control + .custom-file,
.input-group > .form-control-plaintext + .form-control,
.input-group > .form-control-plaintext + .custom-select,
.input-group > .form-control-plaintext + .custom-file,
.input-group > .custom-select + .form-control,
.input-group > .custom-select + .custom-select,
.input-group > .custom-select + .custom-file,
.input-group > .custom-file + .form-control,
.input-group > .custom-file + .custom-select,
.input-group > .custom-file + .custom-file {
margin-left: -1px;
}
bootstrap4.css
.input-group > .form-control:focus,
.input-group > .custom-select:focus,
.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
z-index: 3;
}
bootstrap4.css
.input-group > .custom-file .custom-file-input:focus {
z-index: 4;
}
bootstrap4.css
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
bootstrap4.css
.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
bootstrap4.css
.input-group > .custom-file {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
bootstrap4.css
.input-group > .custom-file:not(:last-child) .custom-file-label,
.input-group > .custom-file:not(:last-child) .custom-file-label::after {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
bootstrap4.css
.input-group > .custom-file:not(:first-child) .custom-file-label {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
bootstrap4.css
.input-group-prepend,
.input-group-append {
display: -ms-flexbox;
display: flex;
}
bootstrap4.css
.input-group-prepend .btn,
.input-group-append .btn {
position: relative;
z-index: 2;
}
bootstrap4.css
.input-group-prepend .btn:focus,
.input-group-append .btn:focus {
z-index: 3;
}
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-prepend {
margin-right: -1px;
}
bootstrap4.css
.input-group-append {
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:not(textarea),
.input-group-lg > .custom-select {
height: calc(1.5em + 1rem + 2px);
}
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:not(textarea),
.input-group-sm > .custom-select {
height: calc(1.5em + 0.5rem + 2px);
}
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-lg > .custom-select,
.input-group-sm > .custom-select {
padding-right: 1.75rem;
}
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 mb-3">
<input type="text" class="form-control" placeholder="検索キーワード" aria-label="検索キーワード" aria-describedby="basic-addon1">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">検索</button>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-secondary" type="button">好き</button>
</div>
<input type="text" class="form-control" placeholder="商品名" aria-label="商品名" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">嫌い</button>
</div>
</div>
■フォーム:form-group:コンポーネント:入力グループ ドロップダウン付きアドオン
<div class="input-group">
<input type="text" class="form-control" aria-label="ドロップダウン付テキスト入力欄">
<div class="input-group-append">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">アクション</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">リンク1</a>
<a class="dropdown-item" href="#">リンク2</a>
<a class="dropdown-item" href="#">リンク3</a>
</div>
</div>
</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:コンポーネント:入力グループ スプリットボタン付きアドオン
<div class="input-group">
<input type="text" class="form-control" aria-label="スプリットボタン付テキスト入力欄">
<div class="input-group-append">
<button type="button" class="btn btn-secondary">アクション</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">ドロップダウン切替</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">リンク1</a>
<a class="dropdown-item" href="#">リンク2</a>
<a class="dropdown-item" href="#">リンク3</a>
</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>