Bootsrtap

Bootstrap4で使える汎用クラス一覧

汎用クラスというのは、１つのclass名に１つのプロパティが定義されたようなclassのことです。例えば、よく使われる汎用クラスはこんな感じのものです。

.text-center{
  text-align: center;
}

あらかじめスタイルシートでこのように定義しておくと、class名を目的の場所に入れるだけで、テキストを中央寄せすることができます。このように分かりやすいclass名を作り、必要なときにclass名を追加するだけで簡単にデザインが組めるようにするもののことを汎用classと呼んだりします。

ここでは、Bootstrap4で実装されている汎用クラスを一覧でご紹介します。すべてではありませんが、みなさんがコーディングでよく使いそうなものをまとめてみましたので、ぜひ活用してください。

コンテンツ

border系class

class名 プロパティと値 見本
border border: 1px solid #dee2e6 !important;
border-top border-top: 1px solid #dee2e6 !important;
border-right border-right: 1px solid #dee2e6 !important;
border-bottom border-bottom: 1px solid #dee2e6 !important;
border-left border-left: 1px solid #dee2e6 !important;
border-0 border: 0 !important;
border-top-0 border-top: 0 !important;
border-right-0 border-right: 0 !important;
border-bottom-0 border-bottom: 0 !important;
border-left-0 border-left: 0 !important;

角丸系class

class名 プロパティと値 見本
rounded border-radius: 0.25rem !important;
rounded-top border-top-left-radius: 0.25rem !important;
border-top-right-radius: 0.25rem !important;
rounded-right border-top-right-radius: 0.25rem !important;
border-bottom-right-radius: 0.25rem !important;
rounded-bottom border-bottom-right-radius: 0.25rem !important;
border-bottom-left-radius: 0.25rem !important;
rounded-left border-top-left-radius: 0.25rem !important;
border-bottom-left-radius: 0.25rem !important;
rounded-circle border-radius: 50% !important;
rounded-0 border-radius: 0 !important;

displayプロパティ系class

以下で出てくる{prefix}にはすべてBootstrap4で使用されるsm, md, lg, xlが入ります。

class名 プロパティと値 prefix
d-none display: none !important; d-{prefix}-none
d-inline display: inline !important; d-{prefix}-inline
d-inline-block display: inline-block !important; d-{prefix}-block
d-block display: block !important; d-{prefix}-block
d-table display: table !important; d-{prefix}-table
d-table-row display: table-row !important; d-{prefix}-table-row
d-table-cell display: table-cell !important; d-{prefix}-table-cell
d-flex display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;		 d-{prefix}-flex
d-inline-flex display: -webkit-inline-box !important;
display: -ms-inline-flexbox !important;
display: inline-flex !important;		 d-{prefix}-inline-flex

positionプロパティ系class

class名 プロパティと値
position-static position: static !important;
position-relative position: relative !important;
position-absolute position: absolute !important;
position-fixed position: fixed !important;
position-sticky position: -webkit-sticky !important;
position: sticky !important;

サイズ系class

class名 プロパティと値
w-25 width: 25% !important;
w-50 width: 50% !important;
w-75 width: 75% !important;
w-100 width: 100% !important;
h-25 height: 25% !important;
h-50 height: 50% !important;
h-75 height: 75% !important;
h-100 height: 100% !important;
mw-100 max-width: 100% !important;
mh-100 max-height: 100% !important;

margin系class

margin

class名 プロパティと値 prefix
m-0 margin: 0 !important; m-{prefix}-0
m-1 margin: 0.25rem !important; m-{prefix}-1
m-2 margin: 0.5rem !important; m-{prefix}-2
m-3 margin: 1rem !important; m-{prefix}-3
m-4 margin: 1.5rem !important; m-{prefix}-4
m-5 margin: 3rem !important; m-{prefix}-5
m-auto margin: auto !important; m-{prefix}-auto

margin-top

class名 プロパティと値 prefix
mt-0 margin-top: 0 !important; mt-{prefix}-0
mt-1 margin-top: 0.25rem !important; mt-{prefix}-1
mt-2 margin-top: 0.5rem !important; mt-{prefix}-2
mt-3 margin-top: 1rem !important; mt-{prefix}-3
mt-4 margin-top: 1.5rem !important; mt-{prefix}-4
mt-5 margin-top: 3rem !important; mt-{prefix}-5
mt-auto margin-top: auto !important; mt-{prefix}-auto

margin-bottom

class名 プロパティと値 prefix
mb-0 margin-bottom: 0 !important; mb-{prefix}-0
mb-1 margin-bottom: 0.25rem !important; mb-{prefix}-1
mb-2 margin-bottom: 0.5rem !important; mb-{prefix}-2
mb-3 margin-bottom: 1rem !important; mb-{prefix}-3
mb-4 margin-bottom: 1.5rem !important; mb-{prefix}-4
mb-5 margin-bottom: 3rem !important; mb-{prefix}-5
mb-auto margin-bottom: auto !important; mb-{prefix}-auto

margin-right

class名 プロパティと値 prefix
mr-0 margin-right: 0 !important; mr-{prefix}-0
mr-1 margin-right: 0.25rem !important; mr-{prefix}-1
mr-2 margin-right: 0.5rem !important; mr-{prefix}-2
mr-3 margin-right: 1rem !important; mr-{prefix}-3
mr-4 margin-right: 1.5rem !important; mr-{prefix}-4
mr-5 margin-right: 3rem !important; mr-{prefix}-5
mr-auto margin-right: auto !important; mr-{prefix}-auto

margin-left

class名 プロパティと値 prefix
ml-0 margin-left: 0 !important; ml-{prefix}-0
ml-1 margin-left: 0.25rem !important; ml-{prefix}-1
ml-2 margin-left: 0.5rem !important; ml-{prefix}-2
ml-3 margin-left: 1rem !important; ml-{prefix}-3
ml-4 margin-left: 1.5rem !important; ml-{prefix}-4
ml-5 margin-left: 3rem !important; ml-{prefix}-5
ml-auto margin-left: auto !important; ml-{prefix}-auto

左右のmargin

class名 プロパティと値 prefix
mx-0 margin-right: 0 !important;
margin-left: 0 !important;		 mx-{prefix}-0
mx-1 margin-right: 0.25rem !important;
margin-left: 0.25rem !important;		 mx-{prefix}-1
mx-2 margin-right: 0.5rem !important;
margin-left: 0.5rem !important;		 mx-{prefix}-2
mx-3 margin-right: 1rem !important;
margin-left: 1rem !important;		 mx-{prefix}-3
mx-4 margin-right: 1.5rem !important;
margin-left: 1.5rem !important;		 mx-{prefix}-4
mx-5 margin-right: 3rem !important;
margin-left: 3rem !important;		 mx-{prefix}-5
mx-auto margin-right: auto !important;
margin-left auto !important;		 mx-{prefix}-auto

上下のmargin

class名 プロパティと値 prefix
my-0 margin-top: 0 !important;
margin-bottom: 0 !important;		 my-{prefix}-0
my-1 margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important;		 my-{prefix}-1
my-2 margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;		 my-{prefix}-2
my-3 margin-top: 1rem !important;
margin-bottom: 1rem !important;		 my-{prefix}-3
my-4 margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;		 my-{prefix}-4
my-5 margin-top: 3rem !important;
margin-bottom: 3rem !important;		 my-{prefix}-5
my-auto margin-top: auto !important;
margin-bottom: auto !important;		 my-{prefix}-auto

padding系class

padding

class名 プロパティと値 prefix
p-0 padding: 0 !important; p-{prefix}-0
p-1 padding: 0.25rem !important; p-{prefix}-1
p-2 padding: 0.5rem !important; p-{prefix}-2
p-3 padding: 1rem !important; p-{prefix}-3
p-4 padding: 1.5rem !important; p-{prefix}-4
p-5 padding: 3rem !important; p-{prefix}-5
p-auto padding: auto !important; p-{prefix}-auto

padding-top

class名 プロパティと値 prefix
pt-0 padding-top: 0 !important; pt-{prefix}-0
pt-1 padding-top: 0.25rem !important; pt-{prefix}-1
pt-2 padding-top: 0.5rem !important; pt-{prefix}-2
pt-3 padding-top: 1rem !important; pt-{prefix}-3
pt-4 padding-top: 1.5rem !important; pt-{prefix}-4
pt-5 padding-top: 3rem !important; pt-{prefix}-5
pt-auto padding-top: auto !important; pt-{prefix}-auto

padding-bottom

class名 プロパティと値 prefix
pb-0 padding-bottom: 0 !important; pb-{prefix}-0
pb-1 padding-bottom: 0.25rem !important; pb-{prefix}-1
pb-2 padding-bottom: 0.5rem !important; pb-{prefix}-2
pb-3 padding-bottom: 1rem !important; pb-{prefix}-3
pb-4 padding-bottom: 1.5rem !important; pb-{prefix}-4
pb-5 padding-bottom: 3rem !important; pb-{prefix}-5
pb-auto padding-bottom: auto !important; pb-{prefix}-auto

padding-right

class名 プロパティと値 prefix
pr-0 padding-right: 0 !important; pr-{prefix}-0
pr-1 padding-right: 0.25rem !important; pr-{prefix}-1
pr-2 padding-right: 0.5rem !important; pr-{prefix}-2
pr-3 padding-right: 1rem !important; pr-{prefix}-3
pr-4 padding-right: 1.5rem !important; pr-{prefix}-4
pr-5 padding-right: 3rem !important; pr-{prefix}-5
pr-auto padding-right: auto !important; pr-{prefix}-auto

padding-left

class名 プロパティと値 prefix
pl-0 padding-left: 0 !important; pl-{prefix}-0
pl-1 padding-left: 0.25rem !important; pl-{prefix}-1
pl-2 padding-left: 0.5rem !important; pl-{prefix}-2
pl-3 padding-left: 1rem !important; pl-{prefix}-3
pl-4 padding-left: 1.5rem !important; pl-{prefix}-4
pl-5 padding-left: 3rem !important; pl-{prefix}-5
pl-auto padding-left: auto !important; pl-{prefix}-auto

左右のpadding

class名 プロパティと値 prefix
px-0 padding-right: 0 !important;
padding-left: 0 !important;		 px-{prefix}-0
px-1 padding-right: 0.25rem !important;
padding-left: 0.25rem !important;		 px-{prefix}-1
px-2 padding-right: 0.5rem !important;
padding-left: 0.5rem !important;		 px-{prefix}-2
px-3 padding-right: 1rem !important;
padding-left: 1rem !important;		 px-{prefix}-3
px-4 padding-right: 1.5rem !important;
padding-left: 1.5rem !important;		 px-{prefix}-4
px-5 padding-right: 3rem !important;
padding-left: 3rem !important;		 px-{prefix}-5
px-auto padding-right: auto !important;
padding-left auto !important;		 px-{prefix}-auto

上下のpadding

class名 プロパティと値 prefix
py-0 padding-top: 0 !important;
padding-bottom: 0 !important;		 py-{prefix}-0
py-1 padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important;		 py-{prefix}-1
py-2 padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;		 py-{prefix}-2
py-3 padding-top: 1rem !important;
padding-bottom: 1rem !important;		 py-{prefix}-3
py-4 padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;		 py-{prefix}-4
py-5 padding-top: 3rem !important;
padding-bottom: 3rem !important;		 py-{prefix}-5
py-auto padding-top: auto !important;
padding-bottom: auto !important;		 py-{prefix}-auto

text系class

class名 プロパティと値 prefix
text-left text-align: left !important; text-{prefix}-left
text-right text-align: right !important; text-{prefix}-right
text-center text-align: center !important; text-{prefix}-center

最近の記事

  1. 2023.03.8

    クリックでYouTube動画をポップアップ再生させ…

    WordPress内でリンクをクリックしたらYouTube動画がポップアップさ…

  2. 2020.11.22

    Photoshop｜写真の境界線をボカす方法

    Photoshop｜写真の境界線をボカす方法以前、こちらの記事…

  3. 2020.11.22

    Illustrator｜筆で描いた文字をパスに変え…

    Illustrator｜筆で描いた文字をパスに変える方法ここでは筆で書…

  4. 2020.11.8

    Illustrator｜ポカポカ温かい文字の作り方…

    ここでは、Illustratorを使ってこんな感じの温かい文字を作る方…

  5. 2020.09.14

    Illustrator｜同じ色を一括で変換したい

    Illustratorで同じ色をいろんなオブジェクトで使用している場合、色の変更…

  1. CSS

    レスポンシブウェブデザインの基本｜メディアクリエリの設定

  2. CSS

    要素の配置が簡単に決まるFlexboxの使い方

  3. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…

  4. WordPress

    WordPressの立ち上げからサイト構築までの初期手順

  5. CSS

    CSS｜中央寄せが効かないときは・・・
PAGE TOP