Tips Tentang Order Kolom dan No Gutters Pada Bootstrap

Halo teman – teman, jumpa kembali di website tips dan trik Dumet School. Kali ini kita akan belajar beberapa fitur dari bootstrap 4, yang mana kita akan bahas dengan judul Tips Tentang Order Kolom dan No Gutters Pada Bootstrap. Kita tau framework html css yang saat ini sedang hits saat ini salah satu nya adalah bootstrap 4, nah kali ini kita akan mengenal 2 fitur class bootstrap 4 yang bisa kita gunakan tanpa harus custom css.

Yang pertama kita mengenal adalah class no-gutters dimana pada class ini kita dapat menghilangkan padding dan margin bawan dari bootstrap, di bawah ini adalah css dari no-gutters

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

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

Dan kita akan coba buat 1 buah file project kita

Tips Tentang Order Kolom dan No Gutters Pada Bootstrap

Maka jika kita running pada browser hasilnya di bawah ini

Tips Tentang Order Kolom dan No Gutters Pada Bootstrap

Teman – teman bisa lihat pada hasil gambar di atas ini, secara default class col- memiliki padding dan margin. Jika kita tidak ingin menggunakan padding dan margin maka kita tinggal berikan class no-gutters nya pada class row nya.

Tips Tentang Order Kolom dan No Gutters Pada Bootstrap

Maka hasil nya seperti di bawah ini

Tips Tentang Order Kolom dan No Gutters Pada Bootstrap

Teman – teman lihat gambar di atas ini, kolom kita sudah tidak ada margin dan padding maka akan terlihat dempet antar kolom nya. Selanjutnya kita akan mengenal fitur class order pada bootstrap 4, class order ini kita dapat menentukan urutan kolom berdasarkan device. Kita tambahkan angka pada setiap kolom nya untuk mengecek urutannya.

Tips Tentang Order Kolom dan No Gutters Pada Bootstrap
Tips Tentang Order Kolom dan No Gutters Pada Bootstrap

Kemudian pada device mobile saya akan mengurutkan menjadi (Kolom 2, Kolom 1, Kolom 4, Kolom 3), dan kita tambahkan juga class d-none untuk hidden content supaya kita bisa lihat hanya text kolom saja

Tips Tentang Order Kolom dan No Gutters Pada Bootstrap

Maka jika buka pada device mobile hasilnya seperti gambar di bawah ini

Tips Tentang Order Kolom dan No Gutters Pada Bootstrap

Kemudian kita akan tambahkan device tablet menjadi (kolom 2, kolom 4, kolom 1, kolom 3) dan tambah kan d-sm-block pada content

Tips Tentang Order Kolom dan No Gutters Pada Bootstrap
Tips Tentang Order Kolom dan No Gutters Pada Bootstrap

Bagaimana,,?? Sangat mudah bukan, silahkan teman – teman lanjutkan dan tambahkan untuk device md,lg dan xl. Untuk script lengkap nya bisa lihat di bawah ini

<div class="container">
		<div class="row">
			<div class="col-md-12 my-5">
				<h2>Tips Tentang Order Kolom dan No Gutters Pada Bootstrap</h2>
			</div>
		</div>
		<div class="row no-gutters">
			<div class="col-md-3 order-2 order-sm-3">
				<h2>Kolom 1</h2>
				<p class="d-none d-sm-block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
			</div>
			<div class="col-md-3 order-1 order-sm-1">
				<h2>Kolom 2</h2>
				<img class="d-none d-sm-block img-fluid" src="https://placeimg.com/640/480/tech" />
			</div>
			<div class="col-md-3 order-4 order-sm-4">
				<h2>Kolom 3</h2>
				<p class="d-none d-sm-block">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here'</p>
			</div>
			<div class="col-md-3 order-3 order-sm-2">
				<h2>Kolom 4</h2>
				<img class="d-none d-sm-block img-fluid" src="https://placeimg.com/640/480/tech" />
			</div>
		</div>
	</div>

Demikianlah tips dan trik tentang Tips Tentang Order Kolom dan No Gutters Pada Bootstrap teman – teman bisa di terapkan untuk project template nya, tentu kita akan jumpa kembali pada artikel berikutnya. Terimakasih dan sampai jumpa.

Hernowo Author

Leave a Reply

Your email address will not be published. Required fields are marked *