form-control-sm
bootstrap5.css
bootstrap5.css
.form-control-plaintext.form-control-sm,
.form-control-plaintext.form-control-lg {
padding-right: 0;
padding-left: 0;
}
bootstrap5.css
.form-control-sm {
min-height: calc(1.5em + 0.5rem + 2px);
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: 0.2rem;
}
bootstrap5.css
.form-control-sm::file-selector-button {
padding: 0.25rem 0.5rem;
margin: -0.25rem -0.5rem;
-webkit-margin-end: 0.5rem;
margin-inline-end: 0.5rem;
}
bootstrap5.css
.form-control-sm::-webkit-file-upload-button {
padding: 0.25rem 0.5rem;
margin: -0.25rem -0.5rem;
-webkit-margin-end: 0.5rem;
margin-inline-end: 0.5rem;
}
bootstrap5.css
textarea.form-control-sm {
min-height: calc(1.5em + 0.5rem + 2px);
}
html bootstrap5 Sample
入力コントロールのサイズを調整する:-lgと-sm
<form>
<!-- 大サイズのテキスト入力欄 -->
<div class="mb-3">
<label for="input1">大サイズのテキスト入力欄 form-control-lg</label>
<input type="text" class="form-control form-control-lg" id="input1" placeholder="form-control-lg">
</div>
<!-- 標準サイズのテキスト入力欄 -->
<div class="mb-3">
<label for="input2">標準サイズのテキスト入力欄</label>
<input type="text" class="form-control" id="input2" placeholder="Default size">
</div>
<!-- 小サイズのテキスト入力欄 -->
<div class="mb-3">
<label for="input3">小サイズのテキスト入力欄 form-control-sm</label>
<input type="text" class="form-control form-control-sm" id="input3" placeholder="form-control-sm">
</div>
<hr>
<!-- 大サイズのプルダウンメニュー -->
<div class="mb-3">
<label for="select1">大サイズのプルダウンメニュー form-select-lg</label>
<select class="form-select form-select-lg" id="select1">
<option>form-control-lg</option>
</select>
</div>
<!-- 標準サイズのプルダウンメニュー -->
<div class="mb-3">
<label for="select2">標準サイズのプルダウンメニュー</label>
<select class="form-select" id="select2">
<option>Default size</option>
</select>
</div>
<!-- 小サイズのプルダウンメニュー -->
<div class="mb-3">
<label for="select3">小サイズのプルダウンメニュー form-select-sm</label>
<select class="form-select form-select-sm" id="select3">
<option>form-control-sm</option>
</select>
</div>
</form>
フォームのファイル選択:file
<div class="mb-3">
<label for="formFile" class="form-label">Default サンプル</label>
<input class="form-control" type="file" id="formFile" />
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">複数ファイル選択可 multiple</label>
<input class="form-control" type="file" id="formFileMultiple" multiple />
</div>
<div class="mb-3">
<label for="formFileSm" class="form-label">Small サンプル</label>
<input class="form-control form-control-sm" id="formFileSm" type="file" />
</div>
<div>
<label for="formFileLg" class="form-label">Large サンプル</label>
<input class="form-control form-control-lg" id="formFileLg" type="file" />
</div>
<div class="mb-3">
<label for="formFileDisabled" class="form-label">ファイル選択不可</label>
<input class="form-control" type="file" id="formFileDisabled" disabled />
</div>
ラベルサイズを調整する:col-form-label-smとform-control-sm
<div class="mb-3 row">
<!-- 小サイズのラベル -->
<label for="labelSm" class="col-sm-3 col-form-label col-form-label-sm">小サイズ:col-form-label-sm</label>
<div class="col-sm-9">
<input type="email" class="form-control form-control-sm" id="labelSm" placeholder="form-control-sm">
</div>
</div>
<div class="mb-3 row">
<!-- 標準サイズのラベル -->
<label for="labelDefault" class="col-sm-3 col-form-label">標準サイズ</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="labelDefault" placeholder="Default size">
</div>
</div>
<div class="mb-3 row">
<!-- 大サイズのラベル -->
<label for="labelLg" class="col-sm-3 col-form-label col-form-label-lg">大サイズ:col-form-label-lg</label>
<div class="col-sm-9">
<input type="email" class="form-control form-control-lg" id="labelLg" placeholder="form-control-lg">
</div>
</div>