Sistem jaringan

Gunakan kisi flexbox mobile-first kami yang kuat untuk membangun tata letak dari semua bentuk dan ukuran berkat sistem dua belas kolom, lima tingkat responsif default, variabel Sass dan mixin, dan lusinan kelas yang telah ditentukan sebelumnya.

Bagaimana itu bekerja

Sistem grid Bootstrap menggunakan serangkaian wadah, baris, dan kolom untuk tata letak dan menyelaraskan konten. Itu dibangun dengan flexbox dan sepenuhnya responsif. Di bawah ini adalah contoh dan pandangan mendalam tentang bagaimana kisi-kisi itu bersatu.

Baru atau tidak terbiasa dengan flexbox? Baca panduan flexbox Trik CSS ini untuk latar belakang, terminologi, pedoman, dan cuplikan kode.

Salah satu dari tiga kolom

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Contoh di atas membuat tiga kolom dengan lebar yang sama pada perangkat kecil, sedang, besar, dan ekstra besar menggunakan kelas kisi yang telah ditentukan sebelumnya. Kolom tersebut dipusatkan di halaman dengan induknya .container.

Mengurainya, begini cara kerjanya:

Wadah menyediakan sarana untuk memusatkan dan memuat konten situs Anda secara horizontal. Gunakan .containeruntuk lebar piksel responsif atau .container-fluiduntuk width: 100%semua area pandang dan ukuran perangkat.
Baris adalah pembungkus untuk kolom. Setiap kolom memiliki horizontal padding(disebut talang) untuk mengontrol ruang di antara mereka. Ini paddingkemudian dilawan pada baris dengan margin negatif. Dengan cara ini, semua konten di kolom Anda disejajarkan secara visual di sisi kiri.
Dalam tata letak kisi, konten harus ditempatkan di dalam kolom dan hanya kolom yang boleh menjadi turunan langsung dari baris.
Berkat flexbox, kolom kisi tanpa spesifikasi widthakan secara otomatis ditata sebagai kolom dengan lebar yang sama. Misalnya, empat instance .col-smmasing-masing akan secara otomatis memiliki lebar 25% dari breakpoint kecil ke atas. Lihat bagian kolom tata letak otomatis untuk contoh lainnya.
Kelas kolom menunjukkan jumlah kolom yang ingin Anda gunakan dari kemungkinan 12 per baris. Jadi, jika Anda ingin tiga kolom dengan lebar yang sama, Anda dapat menggunakan .col-4.
Kolom widths diatur dalam persentase, sehingga selalu cair dan berukuran relatif terhadap elemen induknya.
Kolom memiliki horizontal paddinguntuk membuat talang di antara kolom individual, namun, Anda dapat menghapus margindari baris dan paddingdari kolom dengan .no-guttersdi .row.
Untuk membuat grid responsif, ada lima breakpoint grid, satu untuk setiap breakpoint responsif : semua breakpoint (ekstra kecil), kecil, sedang, besar, dan ekstra besar.
Titik henti sementara kisi didasarkan pada kueri media dengan lebar minimum, yang berarti titik henti tersebut berlaku untuk satu titik henti sementara tersebut dan semua yang ada di atasnya (misalnya, .col-sm-4berlaku untuk perangkat kecil, sedang, besar, dan ekstra besar, tetapi bukan titik xshenti sementara pertama).
Anda dapat menggunakan kelas kisi yang telah ditentukan sebelumnya (seperti .col-4) atau mixin Sass untuk markup semantik yang lebih banyak.

Waspadai keterbatasan dan bug di sekitar flexbox , seperti ketidakmampuan untuk menggunakan beberapa elemen HTML sebagai wadah fleksibel .

Opsi kisi

Sementara Bootstrap menggunakan ems atau rems untuk mendefinisikan sebagian besar ukuran, pxs digunakan untuk breakpoint grid dan lebar kontainer. Ini karena lebar viewport dalam piksel dan tidak berubah dengan ukuran font .

Lihat bagaimana aspek sistem grid Bootstrap bekerja di beberapa perangkat dengan tabel praktis.

	Ekstra kecil <576px	Kecil 576px	Sedang 768px	Besar 992px	Ekstra besar 1200px
Lebar kontainer maks	Tidak ada (otomatis)	540px	720px	960px	1140px
Awalan kelas	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# kolom	12
lebar selokan	30px (15px di setiap sisi kolom)
Bersarang	Ya
Pemesanan kolom	Ya

Kolom tata letak otomatis

Manfaatkan kelas kolom khusus breakpoint untuk ukuran kolom yang mudah tanpa kelas bernomor eksplisit seperti .col-sm-6.

sama-lebar

Misalnya, berikut adalah dua tata letak kisi yang berlaku untuk setiap perangkat dan area pandang, dari xshingga xl. Tambahkan sejumlah kelas tanpa unit untuk setiap breakpoint yang Anda butuhkan dan setiap kolom akan memiliki lebar yang sama.

1 dari 2

2 dari 2

1 dari 3

2 dari 3

3 dari 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Kolom dengan lebar yang sama dapat dipecah menjadi beberapa baris, tetapi ada bug Safari flexbox yang mencegahnya bekerja tanpa eksplisit flex-basisatau border. Ada solusi untuk versi browser yang lebih lama, tetapi seharusnya tidak diperlukan jika Anda mutakhir.

Kolom

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Mengatur lebar satu kolom

Tata letak otomatis untuk kolom kisi flexbox juga berarti Anda dapat mengatur lebar satu kolom dan mengubah ukuran kolom saudara di sekitarnya secara otomatis. Anda dapat menggunakan kelas kisi yang telah ditentukan sebelumnya (seperti yang ditunjukkan di bawah), mixin kisi, atau lebar sebaris. Perhatikan bahwa kolom lain akan diubah ukurannya tidak peduli lebar kolom tengah.

1 dari 3

2 dari 3 (lebih lebar)

3 dari 3

1 dari 3

2 dari 3 (lebih lebar)

3 dari 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Konten lebar variabel

Gunakan col-{breakpoint}-autokelas untuk mengukur kolom berdasarkan lebar alami kontennya.

1 dari 3

Konten lebar variabel

3 dari 3

1 dari 3

Konten lebar variabel

3 dari 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Multi-baris dengan lebar yang sama

Buat kolom dengan lebar yang sama yang menjangkau beberapa baris dengan menyisipkan .w-100tempat yang Anda inginkan untuk memisahkan kolom ke baris baru. Jadikan jeda responsif dengan mencampurnya .w-100dengan beberapa utilitas tampilan responsif .

col

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Kelas responsif

Kisi Bootstrap mencakup lima tingkatan kelas yang telah ditentukan sebelumnya untuk membangun tata letak responsif yang kompleks. Sesuaikan ukuran kolom Anda pada perangkat ekstra kecil, kecil, sedang, besar, atau ekstra besar sesuai keinginan Anda.

Semua breakpoint

Untuk kisi-kisi yang sama dari perangkat terkecil hingga terbesar, gunakan kelas .coland .col-*. Tentukan kelas bernomor saat Anda membutuhkan kolom berukuran khusus; jika tidak, jangan ragu untuk tetap berpegang pada .col.

col

col-8

col-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Ditumpuk menjadi horizontal

Dengan menggunakan satu set .col-sm-*kelas, Anda dapat membuat sistem grid dasar yang mulai bertumpuk dan menjadi horizontal pada breakpoint kecil ( sm).

col-sm-8

col-sm-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Campur dan cocokkan

Tidak ingin kolom Anda hanya menumpuk di beberapa tingkatan kisi? Gunakan kombinasi kelas yang berbeda untuk setiap tingkatan sesuai kebutuhan. Lihat contoh di bawah untuk ide yang lebih baik tentang cara kerjanya.

.col-12 .col-md-8

.col-6 .col-md-4

.kol-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-12 col-md-8">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Talang

Talang dapat disesuaikan secara responsif dengan bantalan khusus breakpoint dan kelas utilitas margin negatif. Untuk mengubah talang pada baris tertentu, pasangkan utilitas margin negatif pada .rowdan utilitas padding yang cocok pada .cols. Orang tua .containeratau .container-fluidmungkin perlu disesuaikan juga untuk menghindari luapan yang tidak diinginkan, menggunakan lagi utilitas padding yang cocok.

Berikut adalah contoh penyesuaian grid Bootstrap pada lgbreakpoint besar ( ) ke atas. Kami telah meningkatkan .colpadding dengan .px-lg-5, menetralkannya dengan .mx-lg-n5pada induknya .rowdan kemudian menyesuaikan .containerpembungkusnya dengan .px-lg-5.

Padding kolom khusus

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Penyelarasan

Gunakan utilitas perataan flexbox untuk menyelaraskan kolom secara vertikal dan horizontal. Internet Explorer 10-11 tidak mendukung perataan vertikal item fleksibel ketika wadah fleksibel memiliki min-heightseperti yang ditunjukkan di bawah ini. Lihat Flexbugs #3 untuk detail selengkapnya.

Perataan vertikal

Salah satu dari tiga kolom

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Salah satu dari tiga kolom

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Perataan horizontal

Salah satu dari dua kolom

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Tidak ada selokan

Talang antar kolom di kelas kisi yang telah ditentukan sebelumnya dapat dihapus dengan .no-gutters. Ini menghilangkan margins negatif dari .rowdan horizontal paddingdari semua kolom turunan langsung.

Berikut kode sumber untuk membuat gaya ini. Perhatikan bahwa penggantian kolom dicakup hanya untuk kolom turunan pertama dan ditargetkan melalui pemilih atribut . Meskipun ini menghasilkan pemilih yang lebih spesifik, pengisi kolom masih dapat disesuaikan lebih lanjut dengan utilitas spasi .

Butuh desain ujung-ke-ujung? Jatuhkan orang tua .containeratau .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Dalam praktiknya, inilah tampilannya. Perhatikan bahwa Anda dapat terus menggunakan ini dengan semua kelas kisi yang telah ditentukan sebelumnya (termasuk lebar kolom, tingkat responsif, pengurutan ulang, dan lainnya).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Pembungkus kolom

Jika lebih dari 12 kolom ditempatkan dalam satu baris, setiap kelompok kolom tambahan akan, sebagai satu unit, membungkus ke baris baru.

.col-9

.col-4
Sejak 9 + 4 = 13 > 12, div lebar 4-kolom ini dibungkus ke baris baru sebagai satu unit yang berdekatan.

.col-6
Kolom berikutnya berlanjut di sepanjang baris baru.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Istirahat kolom

Memutus kolom ke baris baru di flexbox memerlukan sedikit peretasan: tambahkan elemen di width: 100%mana pun Anda ingin membungkus kolom ke baris baru. Biasanya ini dilakukan dengan beberapa .rows, tetapi tidak setiap metode implementasi dapat menjelaskan hal ini.

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

You may also apply this break at specific breakpoints with our responsive display utilities.

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Reordering

Order classes

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

First, but unordered

Second, but last

Third, but first

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

First, but last

Second, but unordered

Third, but first

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Offsetting columns

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset classes

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Margin utilities

With the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Nesting

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass mixins

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

$grid-columns:      12;
$grid-gutter-width: 30px;

$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
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Main content

Secondary content

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

Jumlah kolom grid dapat dimodifikasi melalui variabel Sass. $grid-columnsdigunakan untuk menghasilkan lebar (dalam persen) dari setiap kolom individu sambil $grid-gutter-widthmengatur lebar untuk talang kolom.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Tingkat jaringan

Bergerak di luar kolom itu sendiri, Anda juga dapat menyesuaikan jumlah tingkat kisi. Jika Anda hanya menginginkan empat tingkat kisi, Anda akan memperbarui $grid-breakpointsdan $container-max-widthsmenjadi seperti ini:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Saat membuat perubahan apa pun pada variabel atau peta Sass, Anda harus menyimpan perubahan dan mengkompilasi ulang. Melakukannya akan menampilkan serangkaian kelas kisi yang telah ditentukan sebelumnya untuk lebar kolom, offset, dan pemesanan. Utilitas visibilitas responsif juga akan diperbarui untuk menggunakan breakpoint kustom. Pastikan untuk menyetel nilai kisi di px(bukan rem, em, atau %).