belajar bootstrap4, tutorial Bootstrap 4

Bootstrap 4 Grid System

System grid di Bootstrap 4 sebenarnya tidak berbeda dengan Bootstrap 3 yaitu menggunakan class .col dengan format col-media-lebar. lebar adalah angka, dimana jumlah lebar dalam satu baris adalah 12. Untuk menjelaskan lebar bisa saya deskripsikan di bawah ini:

lebar 1 lebar 1 lebar 1 lebar 1 lebar 1 lebar 1 lebar 1 lebar 1 lebar 1 lebar 1 lebar 1 lebar 1
 lebar 4  lebar 4  lebar 4
lebar 4 lebar 8
lebar 6 lebar 6
lebar 12

Jumlah angka lebar adalah 12.

Sedangkan media yang bisa digunakan di bootstrap 4 ada 5 jenis yaitu:

  • .col- (tanpa menuliskan nama media : untuk lebar layar dibawah 576px)
  • .col-sm- (sm atau small devices – untuk lebar layar 576px atau lebih)
  • .col-md- (md atau medium devices – untuk lebar layar 768px atau lebih)
  • .col-lg- (lg atau large devices – untuk lebar layar 992px atau lebih)
  • .col-xl- (xl atau xlarge devices – untuk lebar layar 1200px atau lebih)

mudah bukan?

Struktur Penulisan grid di Bootstrap 4

Cara penulisan grid di Bootstrap 4 adalah sebagai berikut:

<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Contoh Penulisan Grid di Bootstrap 4

1. Membuat 3 Grid kolom responsive dengan lebar yang sama:

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

2. Membuat 3 grid kolom dengan lebar yang disesuaikan:

<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-4"></div>
  <div class="col-md-6"></div>
</div>
mengenal bootstrap, belajar bootstrap, tutorial bootstrap, apa itu bootstrap

Grid System – Dasar Pembuatan Web Responsive di Bootstrap 3

System grid merupakan dasar dari pembuatan web responsive. Tanpa memahami apa itu Grid System, maka semua tutorial mengenai web responsive tidak ada manfaatnya. System grid Bootstrap membagi layar menjadi 12 bagian kolom. Saat membuat desain web responsive, kita bisa mengunakan fitur lebar otomatis maupun pengaturan customize. Continue reading

mengenal bootstrap, belajar bootstrap, tutorial bootstrap, apa itu bootstrap

Memulai Bootstrap – Cara membuat web dengan Bootstrap

Setelah kita memahami apa itu bootstrap dan apa fungsi bootstrap, sekarang bahasan kita melangkah lebih maju lagi dengan bahasan “bagaimana kita memulai membuat web dengan bootstrap”.

Sebelum langkah Anda lebih jauh lagi, sebelumnya Anda harus menentukan apakah Anda akan menggunakan Bootstrap 4 atau Bootstrap 3.
Continue reading

mengenal bootstrap, belajar bootstrap, tutorial bootstrap, apa itu bootstrap

Apa itu Bootstrap dan Fungsinya

Apa Itu Bootstrap?

Bootstrap adalah front-end framework yang Cantik, bagus , mudah digunakan serta cocok untuk semua jenis device (Handphone, tablet PC, Laptop, PC). Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.

Dengan Menggunakan Bootstrap, Pengerjaan sebuah project dalam sebuah team menjadi lebih mudah. Mengapa demikian? Karena dengan Bootstrap, penamaan class sudah dibakukan. Seorang desainer hanya tinggal menggunakan nama class tersebut di setiap TAG HTML yang ia gunakan.

Continue reading