Bootstrap色クラスまとめ

基本カラー一覧

primary
明るめのブルー
secondaryグレー
successグリーン
info薄めのブルー
warningオレンジ
dangerレッド
lightうすいグレー
darkダークグレー

テキスト変更:【text-{color}】

背景変更:【bg-{color}】

ボーダー変更:【border-{color}】

テーブル変更:【table-{color}】

テキストカラー変更【text-{color}】

レッサー・キングダム

<p class="text-primary">

レッサー・キングダム

<p class="text-secondary">

レッサー・キングダム

<p class="text-success">

レッサー・キングダム

<p class="text-info">

レッサー・キングダム

<p class="text-warning">

レッサー・キングダム

<p class="text-danger">

レッサー・キングダム

<p class="text-light">

レッサー・キングダム

<p class="text-dark">

背景色変更【bg-{color}】

レッサー・キングダム

<p class="bg-primary">

レッサー・キングダム

<p class="bg-secondary">

レッサー・キングダム

<p class="bg-success">

レッサー・キングダム

<p class="bg-info">

レッサー・キングダム

<p class="bg-warning">

レッサー・キングダム

<p class="bg-danger">

レッサー・キングダム

<p class="bg-light">

レッサー・キングダム

<p class="bg-light">

ボーダーカラー変更【border-{color}】

レッサー・キングダム

<p class="border border-primary">

レッサー・キングダム

<p class="border border-secondary">

レッサー・キングダム

<p class="border border-success">

レッサー・キングダム

<p class="border border-info">

レッサー・キングダム

<p class="border border-warning">

レッサー・キングダム

<p class="border border-danger">

レッサー・キングダム

<p class="border border-danger">

レッサー・キングダム

<p class="border border-danger">

テーブル背景色変更【table-{color}】

1 レッサー・キングダム
<table class="table table-primary">
1 レッサー・キングダム
<table class="table table-secondary">
1 レッサー・キングダム
<table class="table table-success">
1 レッサー・キングダム
<table class="table table-info">
1 レッサー・キングダム
<table class="table table-warning">
1 レッサー・キングダム
<table class="table table-daner">
1 レッサー・キングダム
<table class="table table-light">
1 レッサー・キングダム
<table class="table table-dark">
タイトルとURLをコピーしました