2021年07月05日

Bootstrapのガター(スペース)を変更する方法

Bootstrapのガター(スペース)を変更する方法

こんにちは!今回はBootstrapを使用する際に、「cotainer」や「row」や「col」のスペースの変更方法について書いていこうと思います。

前提ですが、変数を変更することで、対応するので、scssファイルのコンパイルが必要になります。

SCSS

$grid-gutter-width: 30px;

@import "~bootstrap/scss/bootstrap";

こんな感じでscssファイルを読み込む前に、「$grid-gutter-width」の変数を設定してあげれば変更可能です。

ちなみに30pxを指定するとpaddingは15pxになります。

ちなみにcssを読み込む際でも後で、変更は一応可能です。

CSS

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<style>
  .container {
    padding-right:15px;
    paddding-left:15px;
    (padding: 0 15px);
  }
</style>

意外と忘れることがあるので、備忘録として残しておきますので、参考にしてみてください。