layout-container

l-container

デバイスに応じて適切に本文幅を調整するコンテナブロック。
/_scss/_config_advance.scss の「$container-max-widths-md」の定義を参照する。

(contents)
<div class="l-container" style="background-color: #5ad;">
    <div style="padding: 5px; text-align: center; background-color: rgba(255,255,255,.5);">(contents)</div>
</div>

l-container-fluid

コンテナブロックの最大幅の制限を行わない。

(contents)
<div class="l-container l-container-fluid" style="background-color: #5ad;">
    <div style="padding: 5px; text-align: center; background-color: rgba(255,255,255,.5);">(contents)</div>
</div>

l-container-sm

コンテナブロックの最大幅が通常よりも狭くなる。
/_scss/_config_advance.scss の「$container-max-widths-sm」の定義を参照する。

(contents)
<div class="l-container l-container-sm" style="background-color: #5ad;">
    <div style="padding: 5px; text-align: center; background-color: rgba(255,255,255,.5);">(contents)</div>
</div>

l-container-lg

コンテナブロックの最大幅が通常よりも広くなる。
/_scss/_config_advance.scss の「$container-max-widths-lg」の定義を参照する。

(contents)
<div class="l-container l-container-lg" style="background-color: #5ad;">
    <div style="padding: 5px; text-align: center; background-color: rgba(255,255,255,.5);">(contents)</div>
</div>