Bootstrap配置クラスまとめ一覧

要素を配置するのにしようするBootstrapクラス

inline】【block】【float】【flex】などの配置クラス、要素の大きさを指定する【width】【height】、テキストの位置を指定する【text-align】で要素の配置を操作する

【d-inline】【d-block】【d-inline-block】

【d-{設定要素}】頭文字に「d-」をつけてから記述する。

inline要素
inline要素
<div class="d-inline">
<div class="d-inline">
block要素
block要素
<div class="d-block">
<div class="d-block">

inline-block要素
inline-block要素

<div class="d-inline-block">
<div class="d-inline-block">

見た目は【inline】と似ていますが、【block】の要素も持ち合わせています。

【flex】 クラスの設定 【d-flex】【d-inline-flex】

あとで、 【float】クラスの紹介もしますが、基本的にできることは変わりないので【flex】 クラスを使用すれば問題ありません。

【d-{設定要素}】頭文字に「d-」をつけてから記述する。

親要素に【d-flex】クラスを設定する。

左1
左2

<div class="d-flex>
 <div>左1</div>
 <div>左2</div>
</div>

左1
左2

<div class="d-inline-flex>
 <div>左1</div>
 <div>左2</div>
</div>

並べる方向を変更することも可能です。あとで説明する【float】にはこれらのクラスはありません。

flex-row
横方向整列(初期設定)
flex-row-reverse逆順横方向整列
flex-column縦方向整列
flex-column-reverse逆順縦方向整列
row-reverse1
row-reverse2

<div class="d-flex flex-row-reverse>
 <div>row-reverse1</div>
 <div>row-reverse2</div>
</div>

d-flex】は消さずに【flex-row-reverse】を記述する。

d-flex】内にある要素が上からひとつずつ逆順+横方向に配置されていく。

column1
column2

<div class="d-flex flex-column>
 <div>column1</div>
 <div>column2</div>
</div>

column-reverse1
column-reverse2

<div class="d-flex flex-column-reverse>
 <div>column-reverse1</div>
 <div>column-reverse2</div>
</div>

【float】クラス設定【float】【clearfix】

flex】と違い、配置させたい要素に直接 【float】クラスを設定します。

float-left左側から整列
float-right右側から整列
float-none回り込まない
clearfixフロートのリセット
float-none
右1
左1
右2

<div class="float-none">float-none</div>
<div class="float-right">右1</div>
<div class="float-left">左1</div>
<div class="float-right">右2</div>
<div class="clearfix"></div>

【clearfix】を設定しないと親要素の高さがわからなくなるので表示が崩れます。

サイズの設定【width】【height】

幅と高さの指定

wwidth(幅)
hheight(高さ)

幅の指定

2525%
5050%
7575%
100100%

w/h-{幅の指定}】で設定する。

w-25
w-50
w-75
w-100

<div class="w-25">w-25</div>
<div class="w-50">w-50</div>
<div class="w-75">w-75</div>
<div class="w-100">w-100</div>

要素内のテキストの位置を揃える【text-align】

text-left左揃え
text-center中央揃え
text-right右揃え
text-justify均等揃え
text-left
text-center
text-right
text-justify is both side for justify. If Japanese sentence might not get clearly.

<div class="w-25">w-25</div>
<div class="w-50">w-50</div>
<div class="w-75">w-75</div>
<div class="w-100">w-100</div>

text-justify】は日本語だとちょっとわかりにくいかもしれません。

1行目と2行目の単語の間が違うのがわかりますか?両端に合わせて間隔を設定しているためです。

まとめ
  • 【d-inline】【d-block】【d-inline-block】
  • 【d-flex】【d-inline-flex】
  • 【float-left】【float-center】【float-right】【clearfix】
  • 【text-left】【text-center】【text-right】【text-justify】

タイトルとURLをコピーしました