Cara membuat 5 kolom pada bootstrap 4

21/08/2018    Maykhel David    872     Website

Cara membuat 5 kolom pada bootstrap 4 – Hallo semuanya, pada artikel kali ini kita akan coba membuat 5 kolom elemen dengan menggunakan bootstrap 4. Seperti yang kita ketahui, bootstrap sendiri memiliki 12 jumlah kolom yang bisa kita kelola, yang dimana kolom tersebut tidak bisa dibagi menjadi 5. Namun ada hal penting yang perlu kalian ketahui, saya pernah juga membuat sebuah artikel serupa untuk bootstrap 4 dengan judul cara membuat 5 kolom sama rata pada bootstrap

Pada artikel tersebut saya melakukan manipulasi kolom menggunakan css media rule untuk memberikan class baru agar bisa dipakai untuk membuat 5 kolom sama rata pada bootstrap.

Pada bootstrap 4 juga kali ini kita akan membuat 5 kolom sama rata, namun caranya saat ini lebih mudah dibandingkan harus membuat class baru seperti yang kita lakukan pada bootstrap 3.

Caranya cukup mudah pertama pastikan kalian sudah menghubungkan file html kalian dengan bootstrap
Lalu sekarang kita buat struktur html seperti berikut

<!DOCTYPE html>
<html>
<head>
  <title>5 Kolom Bootstrap</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col">
          ini kolom 1
      </div>
      <div class="col">
          ini kolom 2
      </div>
      <div class="col">
          ini kolom 3
      </div>
      <div class="col">
          ini kolom 4
      </div>
      <div class="col">
          ini kolom 5
      </div>
    </div>
  </div>
</body>
</html>

Selanjutnya kita buat class untuk membedakan masing – masing kolom yang kita buat

<div class="container">
    <div class="row">
      <div class="col col1">
          ini kolom 1
      </div>
      <div class="col col2">
          ini kolom 2
      </div>
      <div class="col col3">
          ini kolom 3
      </div>
      <div class="col col4">
          ini kolom 4
      </div>
      <div class="col col5">
          ini kolom 5
      </div>
    </div>
  </div>


Lalu kita buat CSS untuk memberi perbedaan kepada masing-masing kolom.

<style type="text/css">
  .col1 {
    background-color: red;
    padding:20px;
  }
  .col2 {
    background-color: green;
    padding:20px;
  }
  .col3 {
    background-color: blue;
    padding:20px;
  }
  .col4 {
    background-color: orange;
    padding:20px;
  }
  .col5 {
    background-color: brown;
    padding:20px;
  }
</style>

Nahh. Sekarang kita sudah berhasil membuat 5 kolom pada bootstrap 4 dengan mudah. Baiklah teman-teman demimkian artikel kali ini yang membahas tentang cara membuat 5 kolom pada bootstrap 4. Terima kasih

 

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More