h6
bootstrap5.css
bootstrap5.css
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
bootstrap5.css
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
bootstrap5.css
h6,
.h6 {
font-size: 1rem;
}
html bootstrap5 Sample
文字の大きさを変える:h1~h6
h1クラスの標準と同じになる
h2クラスの標準と同じになる
h3クラスの標準と同じになる
h4クラスの標準と同じになる
h5クラスの標準と同じになる
h6クラスの標準と同じになる
<p class="h1">h1クラスの標準と同じになる</p>
<p class="h2">h2クラスの標準と同じになる</p>
<p class="h3">h3クラスの標準と同じになる</p>
<p class="h4">h4クラスの標準と同じになる</p>
<p class="h5">h5クラスの標準と同じになる</p>
<p class="h6">h6クラスの標準と同じになる</p>
トグルボタンでdivコンテンツに様々な要素を追加する:dropdown-toggleとdropdown-menu
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">ドロップダウン</button>
<!-- divで作成するコンテンツありのメニュー -->
<div class="dropdown-menu">
<h6 class="dropdown-header">ドロップダウンメニューのタイトル</h6>
<form class="px-4 py-3">
<div class="form-group">
<label for="email">メールアドレス</label>
<input type="email" class="form-control" id="email" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="password">パスワード</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check">
<label class="form-check-label" for="check"> ログイン情報を記憶 </label>
</div>
<button type="submit" class="btn btn-secondary">ログイン</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#1">初めての方</a>
<a class="dropdown-item" href="#2">パスワードをお忘れの方</a>
</div>
</div>