コーディング

Bootstrap4 Grid systemを使う時便利な設定

Bootstrapを読み込む

インストール

yarn add bootstrap

sassで読み込む前に設定を書いとく

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);
$grid-gutter-width: 5px;
@import "node_modules/bootstrap/scss/bootstrap-grid"

これで一通り設定は完了

ここからはあったら便利なクラスです。

5列7列を可能にするカラム

溝を個々に調整できるクラス

コーディング代行

高品質なソースコードをお約束

詳しくはこちら
背景イメージ
背景はFreepikによるデザイン

information

お問い合わせ