Cara membuat 5 kolom pada bootstrap 4

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

 

21 Agustus 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat