Tutorial CSS Bootstrap sederhana

Apakah kalian pernah dengar framework pada CSS? ya framework, apa itu framework? framework sendiri adalah kerangka kerja untuk mengembangkan applikasi agar lebih mudah menata rangka design. Framework sangat membantu developer untuk mempersingkat penulisan kode yang akan diketik. Contoh framework pada css adalah Bootstrap.

Apa itu Bootstrap. Bootstrap adalah salah satu framework pada css, banyak front end developer menggunakan framework bootstrap karena kemudahan yang diberikan bootstrap. Kalian bisa menggunakan bootstrap pada kode html yang kalian buat. Biasanya Bootstrap ditulis didalam class pada html, oh ya sebelum kalian memberikan atribut class pada HTML kalian wajib menyalin kode CDN ( Content Delivery Network ) atau link package pada Bootstrap. 

Klik link website official Bootstrap disini lalu klik docs di website official Bootstrapnya, lalu cari ke introduction dan salin struktur CDN link HTML nya.

Berikut Contoh Penggunaan Bootstrap pada HTML :

!DOCTYPE html
html
head
    titleJudul Websitetitle  
    link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
/head

body class="bg-dark"
    h1 class="text-center mt-5"Hello, world!/h1
/body
script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"/script
/html

Hello, world!

Apakah kalian sudah mengikuti langkah diatas? klo sudah diartikel ini akan saya jelaskan kenapa kita bisa memberi style warna dan posisi pada tag yang kita beri masing-masing classnya. Saya jelaskan dari class Body. 

1 ). pada body = class="bg-dark". Class "bg-dark" adalah class pada bootstrap yang memberikan style "background dark".

2 ). pada h1 = class="text-center". Class text-center sendiri memberikan style mirip seperti css artibut "text-align:center"

3 ). pada h1 class ke-2 = class="mt-5". Sama seperti class text-center, mt memberikan style css seperti artibut "margin-top", masih ada ms (margin-left), me (margin-right), mb (margin-bottom), dan m-auto (margin) untuk seluruh sisi, mt-5 angka 5 disini merupakan jarak margin yang diberikan ada 1-5 untuk jarak ukuran pada margin.

Mudah bukan, masih banyak style warna pada bootstrap yang bisa diterapkan di kode HTML, untuk text kalian dapat menulis properti seperti :

• text-primary
• text-dark
• text-light
• text-white
• text-info
• text-warning
• text-danger

untuk style warna background :

• bg-primary
• bg-dark
• bg-light
• bg-white
• bg-info
• bg-warning
• bg-danger

dan masih banyak style bootstrap lainnya kalian bisa baca dokumentasi official bootstrap untuk bereksperimen di website local kalian sendiri. Selamat mengkoding 😉.