スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

文字と背景色の書式:Bootstrapコードまとめ



文字と背景色の書式:Bootstrapコードまとめ

Bootstrapのコードを少しずつまとめていきます。
今回は行揃え・文字色・背景色の書式です。

~ 目次 ~

  1. 行揃えの書式
  2. 文字色と背景色の書式

行揃えの書式

Bootstrapではクラスを適用するだけで行揃えを指定することが可能です。
クラスは5種類あります。

行揃えのクラス

クラス 行揃え
text-left 左揃え
text-center 中央揃え
text-right 右揃え
text-justify 両端揃え
text-nowrap 改行しないで配置

ブラウザでの表示例は サンプルページ をご参照ください。

文字色と背景色の書式

Bootstrapでは以下の5色が定義されています。

  • primary (重要) #428bca
  • success (成功) #5cb85c
  • info (お知らせ) #5bc0de
  • warning (警告) #f0ad4e
  • danger (危険) #d9534f

この5色を文字色や背景色に指定する場合、以下のクラスを適用します。
5色をメインに使って統一感のあるデザインを作っていくことが可能です。

文字色や背景色のクラス

文字色 背景色 指定される色
text-primary bg-primary 青系
text-success bg-success 緑系
text-info bg-info 薄青系
text-warning bg-warning 黄系
text-danger bg-danger 薄赤系
text-muted 灰系

ブラウザでの表示例は サンプルページ をご参照ください。