Trik Menghilangkan Gutter Spasi di Bootstrap — Membuat website dengan bootstrap memang cukup mudah dilakukan, hanya tinggal download bootstrap dan sertakan css dan javascript nya di website yang dibuat, seketika semua elemen bootstrap bisa digunakan di website tersebut.

Salah satu fitur yang paling menarik dari Bootstrap adalah Grid, grid ini memudahkan orang untuk membuat layout, ingin membuat kolom jadi lebih mudah dan tidak perlu ada masalah dengan overflow.

grid gutter column

Gutter (Image: sketchtips.info)

Namun terkadang orang akan bingung dengan spasi yang ada diantara satu kotak grid dengan kotak yang lainnya, karena terkadang ada saja kebutuhan untuk membuat kotak yang menempel dan tanpa jarak.

Gutter mungkin akan lebih mudah di atar lebarnya jika Anda menggunakan Bootstrap SASS, namun jika Anda menggunakan Bootstrap standar, dan tanpa di kostumasi, maka harus menggunakan sedikit trik.

Berikut adalah contoh Bootstrap standar dengan gutter, sebagai contoh terdapat beberapa gambar kucing grid nya.

See the Pen Bootstrap with gutter by Tutorial Web Design (@tutweb) on CodePen.

Jika Anda ingin membuat grid bootstrap tidak memiliki spasi / gutter maka Anda bisa menambahkan script berikut di CSS, disitu dibuat sebuah class .no-gutters untuk menghilangkan spasi.

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}
css untuk class .no-gutters

Berikut contoh bootstrap tanpa gutter, terlihat tidak ada spasi lagi diantara gambar kucing

See the Pen Bootstrap .no-gutters Example by Tutorial Web Design (@tutweb) on CodePen.

Itulah cara menghilangkan spasi gutter yang ada di framework bootstrap.

Tambahan, jika Anda ingin menerapkan hal tersebut tanpa container maka Anda bisa melihat contoh berikut ini.

See the Pen Bootstrap no-gutter without container by Tutorial Web Design (@tutweb) on CodePen.

Semoga bermanfaat.