Tutorial Bootstrap 4 #3 : Containers Pada Bootstrap 4


Containers Pada Bootstrap 4

Containers Pada Bootstrap 4 – Teman-teman berada di tutorial bootstrap 4 bagian ketiga, dalam seri tutorial bootstrap 4 terlengkap dari dasar hingga mahir berbahasa indonesia.

Pada tutorial bootstrap 4 ketiga ini akan di bahas tentang container pada bootstrap. apa itu container ? bagaimana cara menggunakannya ? dan apa kegunaan container pada bootstrap ?

Akan kita bahas tuntas pada tutorial Tutorial Bootstrap 4 #3 : Containers Pada Bootstrap 4 ini.

Bagi teman-teman yang belum mengikuti tutorial sebelumnya, silahkan baca Tutorial Bootstrap 4 #2 : Cara Menggunakan Bootstrap 4 terlebih dulu.

Containers Pada Bootstrap 4

Containers adalah element layout yang paling dasar pada bootstrap. kita wajib menggunakan containers jika ingin menggunakan sistem grid bootstrap.

Apa itu sistem grid bootstrap ? grid sistem bootstrap akan kita pelajari pada tutorial selanjutnya. yang penting pada tutorial ini, teman-teman harus paham dulu tentang pengertian dan cara menggunakan containers saja dulu.

Supaya lebih paham ketika masuk ke materi sistem grid bootstrap di tutorial selanjutnya.

Ada 2 jenis containers pada bootstrap, yaitu container dan container-fluid.

Container

Container bisa kita anggap sebagai wadah yang menampung semua element grid sistem atau element lain nya dari bootstrap.

Jika teman-teman pernah melihat website yang ukuran lebar layoutnya tidak penuh, berarti website tersebut menggunakan container untuk lebar layoutnya, sebaliknya jika menggunakan container-fluid, tampilan layout websitenya akan berukuran penuh.

container

container



Sekarang kita akan membuat contoh untuk penggunaan container. buka file belajar_bootstrap.html yang sudah dibuat pada tutorial sebelumnya. dan ketik coding berikut.

belajar_bootstrap/belajar_bootstrap.html

Perhatikan pada contoh penggunaan container di atas, untuk menggunakan container kita tinggal menambahkan class container pada element paling luar. untuk membungkus element-element lainnya.

Adapun element yang dibungkus oleh container ini kita buat contoh dengan element div yang menggunakan class bg-primary, text-white, dan text-center.

Kemudian di dalamnya ada heading h4, dan element hyperlink.

NOTE :

class bg-primary adalah class yang disediakan oleh bootstrap 4 untuk membuat background warna bitu.
text-white adalah class yang disediakan oleh bootstrap 4 untuk membuat tulisan text menjadi warna putih.
dan class text-center adalah class untuk memindahkan letak text ke tengah.

Sekarang kita lihat hasilnya.

Jalankan file belajar_bootstrap.html

contoh container

contoh container

Seperti yang terlihat pada gambar di atas, element container berukuran tidak penuh lebarnya. dan letaknya di tengah.

Selanjutnya kita lihat contoh container-fluid.

Container-fluid

Jika container berukuran tidak penuh, dan letaknya di tengah, maka container-fluid adalah kebalikannya, container-fluid memiliki lebar penuh.

Perhatikan gambar dan coding berikut.

container-fluid

container-fluid



Selanjutnya kita buat contoh untuk penggunaan container-fluid.

Perhatikan coding berikut.

belajar_bootstrap/belajar_bootstrap.html

dan kita lihat hasilnya

contoh container-fluid

contoh container-fluid

Seperti yang terlihat pada gambar di atas, class container-fluid memiliki ukuran yang lebar penuh.

Untuk penggunaan masing-masing dari container dan container-fluid tinggal teman-teman sesuaikan saja sesuai kebutuhan desain tampilan website yang ingin teman-teman buat.

Oke sekian Tutorial Bootstrap 4 #3 : Containers Pada Bootstrap 4. pada tutorial selanjutnya kita akan masuk ke materi sistem grid pada bootstrap untuk membuat element website yang responsive.

Download Source Code

 

Incoming search terms:

  • apa kegunaan <meta charset=utf-8>?
  • codingan membuat huruf putih brostrap



Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

TUTORIAL MENARIK LAINNYA

tooltips bootstrap 4
spinners bootstrap 4
scrollspy
Diskusi
Tidak Ada Komentar