Bootstrap 5 Uncover - Panduan Belajar Framework Bootstrap (Ver 1.1)

1
Bootstrap Uncover
Panduan Belajar Bootstrap 5
Andre Pratama
Buku ini ditulis dan diterbitkan secara mandiri oleh Duniailkom (www.duniailkom.com)
02 Desember 2022
~ Update Log ~
✔ Bootstrap 4 Uncover – Oktober 2018
✔ Bootstrap 5 Uncover – Juni 2021
✔ Bootstrap 5 Uncover – Juni 2021
✔ Mini Update Bootstrap 5.2 – Desember 2022
Cover Photo by Vanessa Loring on Pexels
© 2022 Duniailkom
Daftar Isi
Ucapan Terima kasih․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 13

Tentang Penulis․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 14
Lisensi․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 15
Kata Pengantar․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 18
Asumsi / Pengetahuan Dasar․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 19
Contoh Kode Program․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 20
1. Berkenalan dengan Bootstrap․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 21
1.1. Pengertian Bootstrap․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 21
1.2. Sejarah Bootstrap․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 22
1.3. Apa Saja Yang Baru di Bootstrap 5?․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 24
1.4. Bootstrap Alternatif․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 24
2. Text Editor Visual Studio Code․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 27

2.1. Instalasi Visual Studio Code․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 27
2.2. Emmet․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 30
2.3. Live Server Extension․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 31
2.4. Pilihan Web Browser․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 34
3. Instalasi Bootstrap․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 35
3.1. Mengenal File Bootstrap․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 35
3.2. Download File Bootstrap․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 37
Folder CSS Bootstrap․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 38
Folder JS Bootstrap․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 40
3.3. Template Dasar HTML Bootstrap․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 42
Error di Console Web Developer Tools․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 45
3.4. Template Dasar HTML Bootstrap CDN․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 45
Prinsip Kerja dan Keunggulan CDN․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 46
Kelemahan CDN․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 48
3.5. Bootstrap Modul․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 49
4. Bootstrap Grid System․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 51
4.1. Pengertian Grid System․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 51
4.2. Bootstrap Grid System․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 54
Mobile first design vs. Desktop first design․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 54
Persiapan Template Bootstrap․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 55
Konsep CSS Class Bootstrap․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 56
4.3. Container and Container-fluid․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 57
"Responsive Mode" bawaan Web Browser․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 58
4.4. Row and Column․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 59
4.5. Column Number․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 64
4.6. Column Auto․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 68
4.7. Column Break․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 70
4.8. Column Ordering․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 71
4.9. Column Offset․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 74
4.10. Column Gutter․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 75
4.11. Nested Row․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 76
4.12. Row Columns․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 77
4.13. Grid Breakpoint․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 80
Breakpoint dan Column Ordering․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 87
Breakpoint Row Columns․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 89
Breakpoint dan Offset․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 90
Breakpoint Container․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 92
4.14. Perancangan Layout Dengan Grid․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 94
5. Bootstrap Utilities & Helpers․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 99

5.1. Colors․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 99
5.2. Background Color․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 102
Background Color Gradient․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 104
5.3. Borders․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 105
Border Color․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 107
Border Width․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 109
Border Radius․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 109
5.4. Shadows․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 111
5.5. Spacing․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 112
Padding․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 113
Margin․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 116
Margin Auto․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 119
5.6. Display․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 120
Display Breakpoint․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 122
Display Print․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 126
5.7. Visibility․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 126
5.8. Float․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 127
5.9. Clearfix․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 129
5.10. Text․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 131
Text Alignment․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 131
Text Wrapping and Overflow․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 133
Text Transform․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 134
Font Size․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 135
Font Weight and Italics․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 136
Line Height․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 137
Monospace․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 138
Text Decoration․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 139
5.11. Vertical alignment․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 140
5.12. Sizing․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 141
5.13. Position․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 143
5.14. Interactions․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 148
5.15. Stacks․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 149
5.16. Stretched Link․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 151
6. Bootstrap Content․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 154

6.1. Reboot․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 154
Font Stack․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 155
Box Sizing․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 156
Rem Sizing․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 160
Margin-top dan Margin-bottom․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 163
Element Style․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 166
6.2. Typography․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 171
Heading․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 171
Display․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 173
Lead․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 173
Inline Text Elements․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 174
Blockquotes․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 175
Lists․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 176
Code․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 177
6.3. Image & Figure․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 179
Responsive Images․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 179
Image Thumbnails․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 180
Figures․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 182
6.4. Table․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 184
Table Head Options․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 186
Striped rows․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 187
Bordered table․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 187
Borderless table․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 188
Hoverable rows․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 189
Small table․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 190
Contextual classes․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 191
Table Caption․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 192
Responsive Table․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 193
7. Button Related Component․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 196

7.1. Button․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 196
Color․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 197
Outline․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 200
Size․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 201
Block button․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 202
Active state․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 202
Disabled State․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 203
7.2. Button Group․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 206
Size․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 207
Vertical Button Group․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 208
Nested Button Group․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 208
7.3. Dropdown․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 209
Color․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 211
Split Button․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 212
Size․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 213
Directions․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 214
Active and Disabled․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 215
Dark Dropdowns․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 215
Menu Alignment․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 216
Menu Header and Menu Divider․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 217
Menu Offset․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 218
7.4. Pagination․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 219
Size․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 220
Active and Disabled․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 221
Alignment․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 222
7.5. Badges․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 222
7.6. List Group․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 224
Active dan Disabled․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 225
Color․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 226
Button dan Link․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 227
Hover Effect․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 228
Flush․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 230
List Group dan Badges․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 230
8. Navigation Related Component․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 232

8.1. Breadcrumb․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 232
8.2. Navs․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 233
Nav Pills dan Nav Tabs․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 234
Nav Fill dan Nav Justified․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 235
Nav Alignment․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 237
Nav Dropdown․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 239
Dynamic Tabbed Interfaces․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 240
8.3. Navbar․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 244
Navbar Color․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 246
Navbar Brand․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 247
Navbar Text․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 250
Navbar Dropdown․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 250
Navbar Search Form․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 251
Navbar Responsive․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 253
Navbar Placement․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 256
Navbar Complete․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 259
8.4. Scrollspy․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 260
9. Display Related Component․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 267

9.1. Card․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 267
Card Content․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 269
Card Width․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 271
Card Image․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 273
Card Color․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 276
Card Group․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 277
Grid Cards․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 278
Masonry Card․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 281
9.2. Carousel․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 284
Carousel Controls․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 285
Carousel Indicators․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 287
Carousel Caption․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 289
Carousel Crossfade․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 290
9.3. Jumbotron․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 290
9.4. Collapse․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 292
9.5. Accordion․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 294
9.6. Alert․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 296
Alert Dismissing․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 297
9.7. Modal․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 298
Modal Centered․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 300
Static Backdrop․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 301
Modal Size․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 302
9.8. Popovers․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 304
Popovers Direction․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 305
Popovers Dismiss․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 306
Popovers Trigger․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 307
Popovers Hover․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 308
9.9. Tooltips․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 308
Tooltip Direction․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 310
Tooltip HTML․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 310
9.10. Progress․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 311
Progress Label․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 312
Progress Height․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 312
Progress Color․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 313
Progress Striped․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 313
Multiple bars․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 314
9.11. Spinners․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 315
Growing Spinner․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 316
Spinner Size․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 317
Spinner Buttons․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 317
9.12. Placeholders․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 317
Placeholders Color․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 319
Placeholders Sizing․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 319
Placeholders Animation․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 320
9.13. Toast․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 321
Toast Placement․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 323
Toast AutoHide․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 324
Toast Stacking․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 324
9.14. Offcanvas․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 326
Offcanvas Placement․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 328
Offcanvas Backdrop․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 329
10. Form Styling․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 332

10.1. Form Tanpa Bootstrap․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 332
10.2. Form-control․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 333
10.3. Form Size․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 336
10.4. Readonly, Disabled dan Plaintext․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 337
10.5. Form File, Form Range dan Form Color․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 338
10.6. Form Checkbox dan Form Radio․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 340
Switches․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 343
10.7. Form Select․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 343
10.8. Form Grid․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 345
Horizontal Form․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 348
Horizontal Form Label Size․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 349
Form Inline․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 350
Form Help Text․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 353
10.9. Floating Labels․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 353
10.10. Form Validation․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 356
10.11. Input Group․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 360
Input Group Label․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 361
Input Group Size․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 362
Multiple Input Group․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 363
Input Group Radio dan Checkbox․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 364
Input Group Button․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 365
Input Group Dropdown․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 366
11. Flex Utilities․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 369

11.1. Flex Container․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 369
Flex Container Breakpoint․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 371
11.2. Flex Direction․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 372
Flex Direction Row․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 372
Flex Direction Column․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 373
Flex Direction Breakpoint․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 374
11.3. Flex Justify Content․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 375
Flex Justify Content Breakpoint․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 379
11.4. Flex Align Items․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 380
Flex Align Items Breakpoint․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 384
11.5. Flex Align Self․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 385
Flex Align Self Breakpoint․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 386
11.6. Flex Fill․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 387
Flex Fill Breakpoint․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 388
11.7. Flex Grow․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 389
Flex Grow Breakpoint․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 390
11.8. Flex Shrink․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 391
Flex Shrink Breakpoint․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 392
11.9. Flex Order․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 393
Flex Order Breakpoint․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 394
11.10. Flex Margin․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 395
11.11. Flex Wrap․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 397
Flex Wrap Breakpoint․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 399
11.12. Flex Align Content․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 400
Flex Align Content Breakpoint․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 402
12. Bootstrap Icon․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 404

12.1. Pengertian Bootstrap Icon․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 404
12.2. Bootstrap Icon SVG․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 404
12.3. Bootstrap Icon Img․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 406
12.4. Bootstrap Icon Font CSS․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 407
13. ILKOOM Tech Template․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 410

13.1. Struktur File dan Folder․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 411
13.2. Template Awal․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 413
13.3. Menu Navigasi․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 414
13.4. Showcase․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 417
13.5. Showoff․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 421
13.6. Product․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 425
13.7. Explore․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 427
13.8. Team Profile․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 429
13.9. Newsletter․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 433
13.10. Blog Snippet․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 435
13.11. Footer․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 437
13.12. Scrollspy․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 439
13.13. Animate On Scroll Library (AOS)․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 440
AOS versi offline․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 444
13.14. Menonaktifkan Breakpoint XXL․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 445
14. ILKOOM Community Blog Template․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 447

Halaman Home․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 447
Halaman Blog․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 449
Halaman Article․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 450
Halaman Gallery․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 451
Halaman Login․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 452
Modern Template = Bootstrap + CSS + Design․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 452
14.1. Struktur File dan Folder․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 452
14.2. Template Awal․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 454
14.3. Menu Navigasi․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 455
14.4. Main Slider․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 458
14.5. Showoff․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 463
14.6. Explore․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 465
14.7. Membership․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 467
14.8. Member Showcase․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 471
14.9. Paid Membership Features․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 473
14.10. Total Showcase․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 476
14.11. Member List․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 478
14.12. Footer․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 483
14.13. Blog Page․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 486
Blog Page – Header Image․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 487
Blog Page – Breadcrumb․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 489
Blog Page – Blog List․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 491
Blog Page – Pagination․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 495
Blog Page – Sidebar Slider․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 496
Blog Page – Sidebar Post Category․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 498
Blog Page – Sidebar Latest Comments․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 501
14.14. Article Page․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 503
Article Page – Header Image․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 504
Article Page – Breadcrumb․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 505
Article Page – Main Article․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 506
Article Page – Author․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 509
Article Page – Comments․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 510
Article Page – Sidebar․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 514
14.15. Gallery Page․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 516
Gallery Page – Header Image․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 517
Gallery Page – Breadcrumb․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 518
Gallery Page – Gallery․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 519
Gallery Page – Light Box․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 522
14.16. Login Page․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 526
Login Page – Header Image․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 527
Login Page – Breadcrumb․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 528
Login Page – Form Login․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 529
Penutup․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 532
Latihan Buat Template․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 532
Tingkatkan Skill CSS dan Desain․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 533
Advanced Bootstrap․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 534
Framework CSS Lain․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 534
Server Side Programming․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 535
Daftar Pustaka․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 537

Ucapan Terima kasih
Dalam kesempatan ini saya ingin mengucapkan terima kasih kepada Allah SWT karena dengan
karuniaNya saya masih diberi kesempatan dan kesehatan untuk bisa menulis (serta meng-
update) buku ketujuh Duniailkom: Bootstrap Uncover.
Selanjutnya kepada keluarga yang terus memberi motivasi dan dukungan tiada henti untuk
terus mengembangkan Duniailkom.
Terakhir kepada rekan-rekan pembaca dan pengunjung setia Duniailkom. Terutama bagi yang
telah memberikan donasi untuk membeli buku saya sebelumnya. Karena feedback dan
dukungan rekan-rekan lah saya bisa lanjut menulis buku ini. Terima kasih :)
Padang Panjang, 2022

Penulis
Andre Pratama
www.duniailkom.com
Tentang Penulis
Andre Pratama
Andre memiliki background S1 Ilmu Komputer dari Universitas Sumatera Utara. Karena
kecintaan akan dunia programming, mulai merintis web Duniailkom sejak tahun 2012.
Harapannya, tutorial di web serta buku terbitan Duniailkom bisa menjadi salah satu media
belajar programming terbaik di Indonesia.
Andre berdomisili di kota Padang Panjang, Sumatera Barat. Jika ada pertanyaan, saran, kritik
yang membangun bisa menghubungi duniailkom@gmail.com atau WA ke 083180285808.
Lisensi
Terima kasih untuk tidak memperbanyak / mengedarkan / mencopy eBook ini
Menulis sebuah buku hingga ratusan halaman butuh waktu yang tidak sebentar. Belum lagi
saya harus berjuang mempelajari referensi yang kebanyakan dalam bahasa inggris. Ini saya
lakukan agar pembaca bisa mendapatkan materi yang detail, update, dan berkualitas.
Saya menyadari kekurangan sebuah ebook adalah mudah dicopy-paste dan disebarluaskan.
Tapi dengan eBook, harga buku bisa ditekan. Selain tidak perlu mencetak, eBook Duniailkom
ini bisa di dapat dengan mudah dan murah, termasuk bagi teman-teman di daerah yang
ongkos kirimnya lumayan mahal (jika berbentuk buku fisik).
Atas dasar itulah saya mohon kerjasamanya dari rekan-rekan semua untuk tidak
memperbanyak, menggandakan, atau mengupload ulang buku ini di forum, situs maupun
media lain dalam bentuk apapun (termasuk tidak membuat video youtube dari materi
buku).
Saya juga berharap rekan-rekan tidak memposting materi apapun yang ada di dalam buku ini.
Jika ingin sebagai bahan artikel untuk postingan blog/situs, silahkan ambil materi yang ada di
website duniailkom (jangan yang dari buku).
Apabila rekan-rekan memperoleh buku ini bukan dari Duniailkom, saya mohon bantuan
donasinya untuk membeli versi asli. Donasi pembelian buku ini adalah sumber mata pencarian
saya untuk menafkahi keluarga. Lisensi atau hak guna buku ini hanya untuk 1 orang, yakni
yang telah membeli langsung ke duniailkom@gmail.com.
Dengan kualitas yang ditawarkan, harga buku ini cukup terjangkau. Buku ini saya buat dengan
waktu yang tidak sebentar, hingga berbulan-bulan, kadang sampai tengah malam. Bantuan
donasi dari rekan-rekan yang membeli buku secara resmi sangat saya hargai, selain mendapat
ilmu yang berkah, ini juga bisa menjadi penyemangat saya untuk terus berkarya dan
menghadirkan ebook-ebook programming berkualitas lainnya.
Untuk yang membeli dari Duniailkom, saya ucapkan banyak terimakasih :)

Anda diperbolehkan untuk:
✔ Mencetak eBook ini untuk keperluan pribadi dan dibaca sendiri.
✔ Mencopy eBook ini ke laptop/smartphone/tablet milik sendiri.
✔ Membuat ringkasan buku untuk digunakan sebagai bahan ajar (bukan keseluruhan isi
buku).
Anda tidak dibolehkan untuk:
✗ Mencetak eBook ini untuk dibaca oleh orang lain, walaupun gratis.
✗ Mencopy eBook ini untuk dijual ulang, maupun dibagikan kepada orang lain dengan
gratis.
✗ Membeli buku ini untuk dibaca bersama-sama (lisensi buku ini hanya untuk 1 orang).
✗ Mengambil sebagian atau seluruh isi buku untuk di publish ke blog, situs, artikel, dan
media lain dalam bentuk apapun.
✗ Menjadikan materi buku sebagai bahan video YouTube / media public lain.
✗ Membagikan eBook ini kepada murid/siswa/mahasiswa (jika digunakan untuk bahan

pengajaran).
Setiap pelanggaran dari lisensi ini akan dituntut sesuai undang-undang yang berlaku di
Republik Indonesia, terutama Pasal 12 UU No. 19 Tahun 2002 tentang Hak Cipta.
Penjelasan lebih lanjut bisa ke: Apakah Mengunduh E-book Termasuk Perbuatan Illegal?
Khusus untuk pembaca muslim bisa ke: Hukum Memakai Barang Bajakan. Mari kita jaga
agar ilmu yang di dapat berkah dan bermanfaat, bukan dari sumber yang haram.
Kata Pengantar
Dunia programming berkembang dengan sangat cepat, tidak terkecuali di bidang web dan
lebih khusus lagi web design. Dirilisnya HTML5 dan CSS3 beberapa tahun lalu membawa
sebuah revolusi di bidang web. Website modern bermunculan dengan tampilan "wah" dan
memiliki ciri khas yang sama: responsive.
Bagi pengguna internet secara umum, perubahan ini membawa pengaruh positif. Tampilan
web menjadi semakin menarik dan bisa tampil sempurna di semua perangkat. Namun bagi kita
sebagai web developer, ini menjadi tantangan tersendiri.
CSS yang dulunya hanya dipakai untuk design sederhana seperti mengubah warna font dan
menambah bingkai gambar, sekarang menjadi sangat powerful. Kita bisa memakai CSS untuk
membuat bayangan (shadow), efek filter gambar, animasi, gradient, transform hingga membuat
web responsive (media query).
Mempelajari semua ini butuh waktu yang tidak sebentar dan harus di tambah dengan skill
design yang mumpuni agar hasilnya bisa maksimal. Belum lagi mengatasi perbedaan dukungan
web browser untuk fitur CSS3 terbaru (harus diatasi dengan vendor prefix).
Sebagai jalan pintas, kita bisa menggunakan CSS Framework. Secara sederhana CSS
Framework adalah kumpulan kode CSS siap pakai untuk membuat komponen-komponen web.
Misal jika ingin membuat buat menu navigasi, tinggal tulis beberapa baris kode HTML dan
menu navigasi sudah jadi, lengkap dengan fitur responsive.
Tidak dapat dipungkiri bahwa Bootstrap menjadi salah satu CSS Framework paling populer
saat ini. Jika melihat lowongan kerja web designer / front-end developer, Bootstrap kadang
menjadi syarat yang wajib dipenuhi.
Dalam buku Bootstrap Uncover kita akan bahas cara penggunaan Bootstrap, mulai dari grid
system yang menjadi fondasi paling penting, utility class, puluhan komponen Bootstrap seperti
navbar, list group, button, form, card, hingga carousel (slider). Kemudian di akhir buku nanti
terdapat studi kasus pembuatan 2 buah template modern.
Setiap bahasan dilengkapi dengan contoh tampilan gambar. Jika mengalami kendala, bisa buka
file belajar_bootstrap.zip yang berisi seluruh file kode dalam buku ini.
Akhir kata, semoga buku Bootstrap Uncover bisa bermanfaat dan menjadi panduan terbaik
untuk menguasai Bootstrap. Sampai jumpa di bab terakhir :)
Asumsi / Pengetahuan Dasar
Buku Bootstrap Uncover tidak saya tujukan untuk pemula. Buku ini lebih ke level intermediate
dimana harus punya dasar HTML dan CSS terlebih dahulu. Jika belum, boleh luangkan waktu
sejenak untuk belajar HTML dan CSS.
Jika anda sudah membaca buku HTML Uncover dan CSS Uncover Duniailkom, tidak akan
mengalami kendala dalam memahami materi di buku ini.
Meskipun di beberapa bahasan saya memakai sedikit kode JavaScript, namun penggunaannya
tidak terlalu banyak sehingga dasar JavaScript tidak diharuskan.
Tips Menghapal Kode Bootstrap
Ketika mempelajari buku ini, anda mungkin akan bertanya "bagaimana cara saya
menghapal kode Bootstrap ini?"
Tidak perlu dihapal! Cukup pahami cara penggunaannya saja. Jadikan buku Bootstrap
Uncover sebagai referensi jika nanti mulai terjun ke pembuatan web yang sebenarnya.
Tidak ada programmer yang hapal seluruh kode Bootstrap. Tapi jika sudah paham cara
penggunaannya, akan sangat mudah memahami kembali dengan melihatnya sekilas.
Sebagai contoh analogi, saya yakin sebagian besar dari kita pernah belajar geometri.
Masih ingatkah dengan rumus menghitung keliling lingkaran?
Jika anda seperti saya (yang sudah puluhan tahun tamat SD), mustahil masih hapal rumus
ini. Tapi jika ada yang tanya, tinggal googling sebentar dan rumusnya adalah 2*pi*r. Saya
tidak perlu membaca lebih jauh apa itu pi dan r karena sudah paham konsep dasarnya.
Begitu juga dengan programming, kode-kode program jumlahnya sangat banyak.

Bootstrap baru satu bidang, belum lagi PHP, JavaScript, MySQL, serta materi lanjutan
seperti Laravel, Code Igniter, React, dan Vue.
Jadi, silahkan nikmati "belajar coding". Tidak usah khawatir harus menghapal setiap kode.
Saya pun masih sering membuka buku ini jika lupa sesuatu.
Contoh Kode Program
Seluruh contoh kode program yang ada di buku Bootstrap Uncover bisa di download dari
folder sharing Google Drive yang saya kirim pada saat pembelian: belajar_bootstrap.zip.
Sebagaimana yang sudah kita pelajari di HTML, halaman web lengkap diawali dengan kode
HTML seperti <!DOCTYPE html> serta tag-tag HTML lain seperti <head>, <title> dan <body>.
Agar menghemat tempat, pada buku ini kode pembuka HTML tersebut tidak selalu saya tulis.
Di dalam file belajar_bootstrap.zip kode-kode ini akan dilengkapi kembali.
Penomoran baris (line numbering) pada contoh kode program berguna untuk memudahkan
pembahasan. Jika ingin men-copy kode ini langsung dari eBook pdf, gunakan kombinasi
tombol ALT + tahan tombol mouse selama proses seleksi agar line numbering tidak ikut di-
copy. Namun ini hanya bisa dilakukan dari aplikasi pdf reader tertentu seperti Adobe Acrobat
Reader.
Cara yang lebih disarankan adalah dengan mengetik ulang seluruh kode program yang ada
supaya lebih cepat paham sekaligus bisa menghafal fungsi dari setiap kode. Jika setelah diketik
ternyata tidak jalan, besar kemungkinan ada penulisan yang salah.
Di dalam programming, 1 saja karakter yang kurang apakah itu berupa titik, tanda koma, atau
tanda " > ", kode program tidak akan jalan sempurna. Jika ini yang terjadi, coba samakan
dengan file yang ada di dalam folder belajar_bootstrap.zip.
Berkenalan dengan Bootstrap
1. Berkenalan dengan Bootstrap
Dalam bab pertama ini kita akan berkenalan dengan Bootstrap, membahas apa itu Bootstrap,
kenapa harus menggunakannya, serta apa saja keuntungan dan kekurangan dari Bootstrap.
1.1. Pengertian Bootstrap

Bootstrap adalah open source front-end framework untuk merancang tampilan web. Bootstrap
terdiri dari kumpulan kode HTML, CSS dan JavaScript "siap pakai" yang memudahkan kita
dalam membuat desain web.
Bootstrap juga sering disebut sebagai CSS framework karena berisi sebuah "kerangka kerja"
(framework) bagaimana cara menyusun kode HTML dan CSS sesuai dengan aturan dari
Bootstrap. Namun karena Bootstrap juga menggunakan JavaScript, maka lebih pas disebut
sebagai front-end framework.
Dengan Bootstrap, kita bisa membuat tampilan web menarik tanpa harus paham kode-kode
rumit dibaliknya. Dasar yang diperlukan cukup basic HTML, CSS dan sedikit JavaScript jika
ingin membuat efek-efek interaktif.
Bootstrap bersifat open source dan bisa digunakan secara gratis. Website resmi Bootstrap
beralamat di getbootstrap.com1.
Tampilan website resmi Bootstrap di getbootstrap.com

1 https://getbootstrap.com
21
Kenapa harus pakai framework seperti Bootstrap? Ada beberapa alasan:
✔ Browser compatibility. Kita tidak perlu khawatir dengan perbedaan tampilan antara
satu web browser dengan web browser lain. Jika anda pernah membuat design web
menggunakan CSS sebelumnya, tidak jarang terdapat perbedaan implementasi dari
web browser yang satu dengan web browser lain.
✔ Faster Development. Kita bisa merancang tampilan web dengan cepat karena
Bootstrap sudah menyediakan kode-kode yang sudah jadi untuk membuat berbagai
komponen web, seperti menu navigasi, tombol, form, teknik responsive, dll.
✔ Great Design. Bootstrap sudah menyediakan standar design yang bagus sehingga
sangat membantu terutama bagi programmer yang kurang ahli dalam hal design.
Terlebih lagi tampilan web yang dibuat dengan Bootstrap sudah responsive secara
bawaan.
✔ Mudah Dipelajari. Untuk bisa menggunakan sebagian besar fitur yang ada di
Bootstrap, cukup dengan menulis beberapa class ke dalam kode HTML tanpa perlu
memahami kode CSS yang ada dibaliknya.
Dibalik semua keunggulan ini, Bootstrap juga sering mendapat kritikan karena tampilannya
terkesan "itu-itu saja". Hal ini tidak terlepas dari efek kepopuleran Bootstrap sendiri.
Sudah sangat banyak website yang menggunakan Bootstrap sehingga tidak heran ada
kemiripan antara satu web dengan web yang lain. Selain itu banyak juga developer yang
"malas" mengubah standar tampilan bawaan Bootstrap (misalnya tetap menggunakan warna
biru yang menjadi ciri khas Bootstrap).
Bootstrap merupakan sebuah "front-end framework". Artinya Bootstrap secara khusus

menangani perancangan desain tampilan saja seperti merapikan design form, membuat
slideshow, atau membuat jendela popup. Pemrosesan form serta pengolahan data sudah
berada di luar jangkauan Bootstrap.
Jika anda ingin memproses form, itu sudah bagian back-end programming yang bisa diproses
menggunakan bahasa PHP atau memakai framework khusus back-end seperti Code Igniter /
Laravel.
1.2. Sejarah Bootstrap

Sekitar tahun 2010, Mark Otto and Jacob Thornton yang merupakan developer di Twitter
mengembangkan sebuah framework untuk internal perusahaan. Framework ini diberi nama
Twitter Blueprint.
Alasan di balik pengembangan ini adalah agar Twitter memiliki tampilan yang konsisten untuk
berbagai project. Sebelumnya, developer di Twitter memakai library yang berbeda-beda untuk
22
setiap project sehingga susah dikelola. Twitter Blueprint di harapkan bisa menjadi framework
universal untuk berbagai project yang dikerjakan Twitter.
Setelah beberapa bulan pengembangan (dan penggunaan internal), Twitter Blueprint berubah
nama menjadi Bootstrap dan dirilis sebagai open source project pada 19 Agustus 2011. Sejak itu,
Bootstrap bisa dipakai oleh berbagai developer di seluruh dunia (tidak hanya untuk karyawan
Twitter saja). Banyak programmer dan web designer juga ikut bergabung mengembangkan
Bootstrap.
Tampilan website Bootstrap ketika versi 1.4 (sumber gambar: scotch.io)
Pada 31 Januari 2012, Bootstrap 2 di rilis dengan penambahan 12 kolom responsive grid
system, menggunakan icon dari Glyphicons, serta penambahan berbagai komponen baru.
Selanjutnya, Bootstrap 3 dirilis pada 19 Agustus 2013 dengan beberapa perubahan seperti
mengadopsi flat design dan menggunakan konsep mobile-first.
Bootstrap 4 hadir pada 18 Januari 2018, 4 tahun setelah versi 3. Versi ini menggunakan konsep
flexbox dalam pembuatan layout (sebelumnya menggunakan sistem float), serta mengganti
CSS pre-processor internal dari Less ke Sass.
Terakhir, Bootstrap 5 di rilis pada 5 Mei 2021 setelah melewati beberapa versi alpha dan beta
sepanjang 2020. Versi inilah yang akan kita pakai dalam buku ini.
Karena sejarahnya, terdapat istilah Twitter Bootstrap untuk menyebut Bootstrap yang
dikembangkan oleh karyawan Twitter. Terlebih dalam bahasa inggris, "bootstrap" merupakan
kata umum dan bisa diartikan dengan makna bootstrapping atau disingkat sebagai booting
(dalam istilah proses booting komputer).
Namun dari halaman web resmi Bootstrap menyatakan bahwa nama "Twitter Bootstrap" sudah
tidak dipakai lagi. Terlebih dua pengembang utama Bootstrap, Mark Otto and Jacob Thornton
23
sudah tidak bekerja di Twitter. Mark Otto saat ini menjadi Principal Design & Brand Architect
di GitHub, sedangkan Jacob Thornton sebagai Senior Staff Software di Coinbase.
1.3. Apa Saja Yang Baru di Bootstrap 5?

Segmen ini secara khusus saya tujukan bagi yang pernah menggunakan Bootstrap 4. Jika anda
baru pertama kali belajar Bootstrap, boleh abaikan istilah-istilah yang ada karena akan kita
bahas detail sepanjang buku nantinya.
Secara umum tidak banyak penambahan fitur baru di Bootstrap 5 dibandingkan Bootstrap 4.
Sekitar 80% materi masih sama seperti di Bootstrap 4, termasuk cara penulisan grid system,
utility class, hingga mayoritas komponen yang sangat mirip seperti di Bootstrap 4.
Namun tetap saja kode yang ditulis di Bootstrap 4 tidak bisa langsung di copy ke Bootstrap 5,
harus dimodifikasi terlebih dahulu.
Berikut beberapa perubahan / fitur baru di Bootstrap 5:
➢ Tidak lagi butuh library jQuery.
➢ Penambahan breakpoint xxl (extra extra large).
➢ Perubahan atribut data-* menjadi data-bs-*. Atribut ini banyak dipakai pada
komponen interaktif Bootstrap.
➢ Penambahan Bootstrap icon yang bisa menjadi alternatif pengganti font awesome.
➢ Penambahan komponen Offcanvas dan Placeholder (Bootstrap 5.2)
➢ Penyesuaian class untuk form serta fitur floating label.
➢ Secara penuh mendukung RTL (Right to Left), sehingga mayoritas nama class yang
dulunya memiliki kata "left" dan "right" berganti menjadi "start" dan "end". Misal class
.pl-5 sekarang menjadi .ps-5, atau class .text-left sekarang menjadi .text-start.
Jika perlu daftar perubahan yang lebih lengkap, bisa mengunjungi Bootstrap 5 release
announcement2 serta Migrating to Bootstrap v53.
1.4. Bootstrap Alternatif

Bootstrap saat ini masih menjadi front-end framework yang paling populer, tapi Bootstrap
bukan satu-satunya framework untuk membuat design web dengan cepat. Terdapat berbagai
framework lain, diantaranya:
✔ Tailwind CSS: https://tailwindcss.com
✔ Semantic UI: https://semantic-ui.com

2 https://blog.getbootstrap.com/2021/05/05/bootstrap-5/
3 https://getbootstrap.com/docs/5.0/migration/
24
✔ Material Design: https://material.io
✔ Bulma: https://bulma.io
✔ Materialize: https://materializecss.com
✔ Pure CSS: https://purecss.io
✔ Dan masih banyak lagi.... (bisa search di Google dengan keyword "CSS Framework")
Apakah saya harus belajar semua ini? Well... tidak harus semua.
Kita harus bisa mengatur waktu dan tenaga untuk memilih apa saja yang sebaiknya dipelajari.
Setiap framework punya kelebihan dan kelemahan masing-masing. Yang terpenting adalah
bagaimana cara agar project yang dikerjakan bisa selesai, terlepas memakai framework apa.
Jika punya waktu dan ingin fokus di bidang web design, tidak ada salahnya mempelajari 2 atau
3 front-end framework lagi skill yang dimiliki lebih beragam. Sedikit banyak kita bisa belajar
bagaimana prinsip kerja framework dan menentukan apa yang cocok untuk project A, dan apa
yang pas untuk project B.
Jika harus memilih satu saja, menurut saya Bootstrap tetap menjadi pilihan terbaik. Karena
relatif mudah di gunakan dan sudah sangat terkenal.
Sebagai penyemangat, berikut tampilan template yang akan kita buat di akhir buku nanti:
Preview template ILKOOM Tech dan ILKOOM Community
25
Karena keterbatasan panjang kertas, gambar di atas baru bagian atas dari keseluruhan
template. Anda bisa buka folder bab_13_ILKOOM_tech_template_final dan bab_14_ILKOOM_
community_template_final di file belajar_bootstrap.zip untuk melihat versi lengkapnya.
---
Dalam bab ini kita telah membahas tentang apa itu Bootstrap, sejarah singkat, keunggulan dan
kekurangan Bootstrap, serta melihat sekilas tampulan project yang akan kita buat di akhir
buku nanti.
Sebelum mulai membahas coding Bootstrap, mari siapkan "perangkat perang" terlebih dahulu.
Berikutnya, kita akan install aplikasi Visual Studio Code atau sering disingkat sebagai VS
Code.
# Terimakasih sudah membeli eBook / buku asli dari Duniailkom #
------------------------------------------------------------------
Saya menyadari menulis eBook sangat beresiko karena mudah di bajak dan digandakan.
Namun ini saya lakukan agar teman-teman (terutama yang di daerah) bisa mendapat
materi belajar programming berkualitas dengan harga yang relatif terjangkau.
Proses penulisan buku ini juga tidak sebentar, butuh waktu berbulan-bulan. Mohon kerja
sama teman-teman semua untuk tidak menggandakan dan menyebarkan eBook ini. Hak
cipta eBook sudah terdaftar di Depkumham RI. Mari dukung karya penulis negeri sendiri.
~ Semoga ilmu yang didapat berkah, halal dan bermanfaat. Terimakasih ~
=====================================================================
26
2. Text Editor Visual Studio Code
Sebenarnya saya yakin rekan-rekan sudah punya teks editor pilihan sendiri, terlebih materi
Bootstrap tidak ditujukan bagi pemula (harus punya dasar HTML dan CSS sebelumnya).
Di beberapa buku Duniailkom saya merekomendasikan Notepad++ dan VS Code. Teks editor
Notepad++ sangat ringan dan berjalan lancar di komputer dengan spesifikasi rendah. Untuk
tampilan yang lebih menarik, bisa memakai VS Code.
Dalam bab ini saya ingin menyajikan panduan singkat instalasi VS Code, termasuk menginstall
live server extension dan membahas penulisan emmet snippet di VS Code. Bab ini boleh
dilewati bagi yang sudah familiar dengan VS Code atau ingin memakai teks editor lain.
2.1. Instalasi Visual Studio Code
Gambar: Tampilan website resmi Visual Studio Code di https://code.visualstudio.com
Visual Studio Code (sering disingkat sebagai VS Code saja) adalah teks editor open source
yang didukung Microsoft sebagai pengembang utama. Dalam banyak hal VS Code mirip
seperti teks editor Atom karena sama-sama dibuat dari platform Electron4.
4 https://www.electronjs.org
27
Text Editor Visual Studio Code
Pada saat buku ini saya revisi, rilis terakhir VS Code ada di versi 1.54. Versi yang anda dapati
kemungkinan besar akan lebih baru tapi harusnya cara instalasi masih tetap sama. File
installer VS Code bisa di dapat dari code.visualstudio.com5, atau bisa juga dari link Google
Drive yang disertakan saat pembelian buku ini.
Proses instalasi VS Code sendiri sangat mudah, cukup klik tombol Next beberapa kali (biarkan
seluruh settingan default). Berikut tampilan awal dari VS Code:
Gambar: Tampilan awal text editor VS Code
Agar lebih rapi, seluruh file kode program akan saya simpan di folder D:\belajar_bootstrap.
Silahkan buat sebentar folder ini di Windows Explorer atau juga bisa memakai folder lain.
Untuk mengintegrasikan folder tersebut dengan VS Code, klik icon Explorer di sidebar kiri (1),
lalu klik tombol "Open Folder" (2).
Gambar: Menambahkan folder ke VS Code
5 https://code.visualstudio.com
28
Sesaat kemudian akan terbuka jendela Windows Explorer. Cari folder D:\belajar_bootstrap
yang sudah disiapkan sebelumnya dan klik tombol Open. Jika tidak ada masalah, di dalam tab
Explorer VS Code akan tampil seperti berikut:
Gambar: Folder belajar_bootstrap sudah terintegrasi dengan VS Code
Di bawah tab "BELAJAR_BOOTSTRAP" nantinya akan tampil daftar file yang ada di dalam
folder D:\belajar_bootstrap. Jika kita menginput file baru secara manual dari Windows
Explorer, daftar file ini juga otomatis di update.
Proses integrasi folder belajar_bootstrap sudah selesai, saatnya tes buat file HTML
menggunakan VS Code.
Terdapat beberapa cara untuk membuat file baru, salah satunya bisa dari menu File-> New
File. Namun agar file yang kita buat langsung berada di dalam folder D:\belajar_bootstrap,
klik icon New File dari tab Explorer (arahkan cursor mouse ke tab BELAJAR_BOOTSTRAP):
Gambar: Membuat file baru dari icon New File di tab Explorer VS Code
Setelah men-klik icon New File (1), kita diminta menginput nama file (2). File ini akan saya beri
nama index.html. Setelah itu jendela workspace di sebelah kanan langsung membuka file
index.html dan kita sudah bisa menulis kode HTML seperti biasa.
VS Code mendukung fitur-fitur umum yang ada di hampir setiap teks editor programming,
29
diantaranya line numbering (penomoran baris), syntax highlighting (pewarnaan kode), serta
code completion.
2.2. Emmet
Secara bawaan, VS Code sudah mendukung penulisan kode snippet Emmet (emmet.io6).
Emmet sendiri adalah fitur yang memudahkan penulisan kode HTML dengan cepat.
Sebagai contoh penggunaan Emmet, silahkan ketik tanda seru (!) di file index.html yang baru
saja di buat, lalu langsung tekan tombol tab atau enter:
Gambar: Mencoba fitur shortcut Emmet di VS Code
Secara otomatis tanda seru ! akan berganti menjadi struktur HTML seperti gambar di atas.
Inilah salah satu fitur shortcut bawaan Emmet, kita tidak perlu membuat manual tag-tag dasar
HTML seperti <!doctype>, <head> atau <body>.
Masih banyak lagi shortcut Emmet yang memudahkan kita menulis kode HTML. Silahkan tes
ketik kode-kode berikut lalu tekan tombol tab setelahnya:
 div>p>strong
 div*5
 h1+div.container>p
 nav>ul>li*5
 span.btn.btn-primary
Perintah div>p>strong akan menghasilkan kode berikut:
6 https://emmet.io
30
<div>
<p><strong></strong></p>
</div>
Perintah div*5 akan menghasilkan kode berikut:
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
Perintah h1+div.container>p akan menghasilkan kode berikut:
<h1></h1>
<div class="container">
<p></p>
</div>
Perintah nav>ul>li*5 akan menghasilkan kode berikut:
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
Dan perintah span.btn.btn-primary akan menghasilkan kode:
<span class="btn btn-primary"></span>
Agar fitur Emmet aktif, kode-kode di atas harus ditulis manual, tidak bisa di copy paste dari
eBook ini. Jika tertarik mempelajari apa saja shortcut lain yang disediakan Emmet, bisa
mengunjungi link berikut: docs.emmet.io/cheat-sheet7.
Shortcut emmet lain yang sering saya pakai adalah untuk men-generate teks dummy "lorem
ipsum". Caranya, gunakan snippet "loremxx", dimana xx diganti dengan jumlah kata. Sebagai
contoh silahkan ketik "lorem10" (tanpa tanda kutip), lalu tekan enter atau tab. Hasilnya akan
tampil teks dummy sebanyak 10 kata.
2.3. Live Server Extension

Fitur VS Code bisa ditambah dengan cara menginstall plugin / extension. Namun untuk bisa
menginstall extension di VS Code, komputer KITA harus terhubung langsung ke Internet.
7 https://docs.emmet.io/cheat-sheet/
31
Kali ini saya ingin menginstall extension Live Server. Extension ini menyediakan fitur live
update, yakni pada saat file HTML di simpan (save), hasilnya langsung ter-update ke web
browser tanpa perlu men-klik tombol refresh atau tombol reload di web browser. Extension
Live Server sangat memudahkan kita melihat hasil dari kode yang sedang ditulis.
Untuk menginstall extension ke dalam VS Code, klik shortcut Extension dari sidebar kiri (1),
lalu ketik "Live Server" (2) di kotak pencarian:
Gambar: Cara install Extension Live Server
Dari hasil pencarian yang tampil, Klik extension Live Server (3), lalu klik tombol Install di
sebelah kanan (4). Proses Instalasi akan berjalan beberapa saat.
Setelah selesai, tutup jendela instalasi extension dan di sudut kanan bawah akan tampil icon
Go Live yang menandakan extension Live Server sudah stand by dan siap digunakan:
Gambar: Icon Go Live yang menandakan Live Server siap dipakai
Terdapat beberapa cara menjalankan Live Server. Cara pertama, buka tab Explorer lalu cari
file HTML yang akan ditampilkan, klik kanan file tersebut dan pilih menu Open with Live
Server.
32
Gambar: Cara menjalankan Live Server
Cara kedua, buka file HTML di workspace (tempat kita mengetik kode program), lalu tekan
kombinasi tombol ALT + L + O. Atau cara ketiga, klik icon Go Live yang terdapat di sudut
kanan bawah.
Sesaat kemudian web browser akan terbuka yang langsung menampilkan file saat ini. Web
browser yang dipakai adalah web browser default di komputer. Jika ingin menggunakan web
browser lain, tinggal copy paste alamat URL di web browser.
Live Server ini dijalankan pada server lokal dengan menggunakan port khusus seperti
http://127.0.0.1:5500/index.html . Angka 5500 adalah nomor port yang dipakai.
Untuk menguji fitur live update, atur jendela VS Code berdampingan dengan jendela web
browser dalam 1 layar, lalu ketik beberapa kode HTML ke dalam editor VS Code. Pada saat file
di save, hasilnya langsung di update ke jendela web browser, sangat praktis!
Gambar: Fitur live update dengan extension Live Server di VS Code
Untuk menghentikan Live Server, klik icon nomor port yang terdapat di sisi kanan bawah VS
Code (tempat icon Go Live sebelumnya berada):
33
Gambar: Cara Menghentikan Live Server
2.4. Pilihan Web Browser

Selain teks editor, kita butuh aplikasi web browser untuk melihat hasil kode Bootstrap. Saat ini
mayoritas web browser populer sudah mendukung standar W3C sehingga tidak banyak
perbedaan tampilan dari satu web browser dengan web browser lain.
Anda bisa memakai versi terbaru dari web browser Google Chrome, Mozilla Firefox, Opera,
Safari, atau Microsoft Edge. Web browser yang sebaiknya dihindari adalah Internet Explorer
karena Bootstrap 5 sepenuhnya tidak mendukung lagi web browser yang satu ini.
Sepanjang buku saya akan memakai Google Chrome dan Mozilla Firefox secara bergantian.
Tapi seharusnya seluruh kode yang akan kita pelajari bisa tampil sempurna di web browser
modern apapun.
---
Dalam bab ini kita telah menginstall aplikasi teks editor VS Code beserta Live Server. Anda
bisa "bermain-main" dengan berbagai fitur lain yang terdapat di VS Code atau lanjut ke bab
berikutnya yang akan membahas cara instalasi Bootstrap.
34
Instalasi Bootstrap
3. Instalasi Bootstrap
Istilah "instalasi Bootstrap" sebenarnya kurang tepat karena Bootstrap hanya terdiri dari
kumpulan file CSS dan JavaScript yang cukup di copy. Namun tetap saja butuh suatu cara
untuk menginput file Bootstrap, dan inilah yang akan kita bahas.
Pada saat buku ini di revisi, Bootstrap baru saja merilis update ke versi 5.2. Framework seperti
Bootstrap bisa sangat cepat di update, bisa jadi ketika anda membaca buku ini Bootstrap
sudah update lagi ke versi 5.3, 5.4 atau bahkan versi 6.0.
Secara historis, minor update ke versi 5.3, 5.4 atau ke 5.3 tidak banyak mengubah konsep dasar
Bootstrap 5. Update yang ada lebih ke penambahan fitur baru dan tidak mengubah fitur yang
sudah ada. Barulah jika terjadi mayor update ke versi 6.0, kemungkinan ada fitur yang dihapus.
Dengan demikian agar bisa mengikuti seluruh materi dalam buku ini, saya sarankan tetap di
versi 5.2 terlebih dahulu. Setelah itu baru baca panduan resmi Bootstrap tentang apa saja
perubahan untuk versi terbaru saat ini.
3.1. Mengenal File Bootstrap

Bootstrap 5 hanya terdiri dari 2 buah file: bootstrap.css dan bootstrap.js. File boostrap.css
berisi kode CSS dalam bentuk selector dan property (sebagaimana kode CSS biasa). Sedangkan
file bootstrap.js berisi kode JavaScript untuk membuat efek interaktif komponen Bootstrap.
Agar bisa menggunakan Bootstrap, kita harus import kedua file ini ke dalam kode HTML yang
sedang dibuat. Berikut struktur dasar file HTML yang mengakses kedua file milik Bootstrap:
1 <!DOCTYPE html>
2 <html lang="id">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <link rel="stylesheet" href="bootstrap.css">
8 </head>
9 <body>
10 <h1>Belajar Bootstrap</h1>
11 <script src="bootstrap.js"></script>
12 </body>
13 </html>
Proses import file boostrap.css ada di baris 7 menggunakan tag <link>, sedangkan file
35
Instalasi Bootstrap
bootstrap.js diakses pada akhir tag <body> di baris 11.
Penempatan file JavaScript di akhir ini supaya tidak terjadi Render-Blocking JavaScript, yakni
sebuah situasi dimana proses menampilkan website terhenti sejenak karena harus menunggu
download file JavaScript.
Dengan menulis pemanggilan file JavaScript di akhir tag <body>, web browser akan
memproses kode HTML di atasnya terlebih dahulu. Dengan demikian isi web bisa tampil
sebelum proses download file JavaScript dilakukan. Penjelasan lebih lanjut tentang Render-
Blocking JavaScript tersedia di buku JavaScript Uncover.
Saat file ini diakses, hasilnya tidak akan berbeda jika tanpa baris 5 dan 10 (tanpa Bootstrap),
karena tentu saja kita belum memiliki file bootstrap.css dan bootstrap.js tersebut. Namun
sebelum ke sana, saya ingin membahas istilah dependency terlebih dahulu.
Jika diartikan ke Bahasa Indonesia, dependency berarti "ketergantungan". Di programming,

dependency merujuk ke "ketergantungan suatu kode program kepada kode program lain".
Dependency menjadi hal yang lumrah dalam programming karena hasil dari nasihat "don't
reinvent the wheel". Daripada membuat sendiri kode untuk menyelesaikan sebuah masalah,
lebih baik kita menggunakan kode program yang sudah jadi dan sudah terbukti bisa
menyelesaikan masalah tersebut. Konsep ini juga dipakai oleh tim pengembang Bootstrap.
Kode JavaScript yang dipakai oleh Bootstrap 5, yakni file bootstrap.js memiliki dependency
(ketergantungan) kepada popper.js. Popper JS adalah library JavaScript yang secara khusus
menangani pembuatan efek tooltips dan popover.
Sebelumnya di versi 4, bootstrap juga memiliki dependency ke library JavaScript jQuery.

Tapi di Bootstrap 5 file jquery.js sudah tidak diperlukan lagi.
Merevisi template Bootstrap kita sebelumnya, kode tersebut akan menjadi sebagai berikut:
1 <!DOCTYPE html>
2 <html lang="id">
3 <head>
6 <title>Document</title>
7 <link rel="stylesheet" href="bootstrap.css">
8 </head>
9 <body>
11 <script src="popper.js"></script>
12 <script src="bootstrap.js"></script>
13 </body>
14 </html>
Perhatikan urutan kode JavaScript external di baris 11 dan 12. Urutannya harus persis seperti
36
Instalasi Bootstrap
itu agar file bootstrap.js bisa mengakses isi dari popper.js.
Meskipun Bootstrap menggunakan Pooper JS, kita tidak perlu paham cara penggunaan library
ini. Kode-kode Pooper JS hanya dipakai secara internal oleh Bootstrap.
3.2. Download File Bootstrap

Untuk mendownload file Bootstrap, silahkan buka web resmi Bootstrap di getbootstrap.com,
lalu klik link Download yang ada di tengah halaman.
Tampilan halaman awal getbootstrap.com
Di halaman Download, scroll sedikit ke bawah hingga judul "Compiled CSS and JS", lalu klik
lagi tombol Download.
Klik tombol Download di bawah judul Compiled CSS and JS
37
Instalasi Bootstrap
Proses download file bootstrap-5.2.2-dist.zip akan berlangsung beberapa saat (berukuran

sekitar 1,3 MB).
Supaya tidak terjadi perbedaan kode program, saya merekomendasikan untuk tetap
memakai Bootstrap 5.2.2 agar sama dengan materi dalam buku ini. Untuk itu sudah
tersedia juga file bootstrap-5.2.2-dist.zip di folder "Aplikasi dan Installer" Google Drive.
Silahkan extract file bootstrap-5.2.2-dist.zip ke sebuah folder. Kali ini saya akan extract ke
folder belajar_bootstrap di drive D:
Folder css dan js hasil extract file bootstrap-5.2.2-dist.zip
File Bootstrap terdiri dari 2 folder: css dan js. Sesuai namanya, folder css berisi file CSS dari
Bootstrap, dan folder js berisi file JavaScript Bootstrap. Mari kita lihat apa saja isi keduanya.
Folder CSS Bootstrap

Folder css Bootstrap berisi 32 file. Apa? Bukankah sebelumnya dijelaskan bahwa Bootstrap
hanya terdiri dari 1 file CSS saja (bootstrap.css)?
Yup betul, 31 file lain adalah file tambahan yang disediakan Bootstrap untuk keperluan khusus.
Isi folder css Bootstrap
38
Instalasi Bootstrap
Setengah dari file ini (16 file) berextension .map. Ini adalah file "source maps" yang dipakai
untuk proses debugging. Dalam penggunaan Bootstrap dasar, file ini tidak kita perlukan dan
boleh saja dihapus.
Setengah file sisanya barulah file CSS. File ini terdiri dari 2 versi, yakni versi asal (unminified)
dan versi minified. Khusus untuk versi minified, ditandai dengan tambahan akhiran min.css.
Apa yang dimaksud dengan unminified dan minified?
Minified file adalah sebutan untuk suatu file yang "dipadatkan" atau "diringkas" dengan cara
menghapus seluruh komentar yang ada di dalam file tersebut, kemudian juga menghapus
semua whitespace tambahan seperti spasi, tab, atau karakter Enter yang dipakai sebagai
pemisah baris (kecuali spasi yang dianggap perlu).
Tujuan dari versi minified adalah agar ukuran file menjadi lebih kecil dibandingkan versi
asalnya (versi unminified). Hal ini berdampak pada proses download file yang lebih cepat.
Kekurangan dari versi minified adalah, mustahil bisa dipahami manusia. Bayangkan, ribuan
baris kode program dipadatkan menjadi 1 baris yang sangat panjang. Namun komputer tidak
masalah memproses kode ini.
Sebagai perbandingan, file bootstrap.css berukuran sekitar 232kb. Saat dibuka, isinya lebih
dari 10.000 baris kode CSS. Sedangkan versi minified, (bootstrap.min.css) berukuran sekitar
190kb, lebih ringkas 42kb dari versi unminified. File ini terdiri dari 7 baris saja, itu pun 6 baris
dipakai untuk membuat komentar file.
Jika kita berencana untuk mempelajari atau mengubah file CSS bawaan Bootstrap, pakai versi
yang asli (unminified). Sedangkan untuk proses produksi, yakni ketika website sudah online,
sebaiknya pakai versi minified yang berukuran lebih kecil.
Setelah perbedaan antara unminified dengan minified, setengah file CSS memiliki akhiran .rtl
.css. RTL merupakan singkatan dari Right to Left. Inilah salah satu fitur baru di Bootstrap 5,
yakni mendukung penuh teks yang penulisannya dimulai dari kanan seperti bahasa arab.
Untuk jenis bahasa rtl, perlu sedikit perubahan di kode CSS sehingga dibuatlah versi file rtl.
Versi rtl ini baru diperlukan jika komponen web kita seperti menu navigasi berisi bahasa arab.
Namun jika menu itu tetap berisi bahasa indonesia dan hanya perlu menambah beberapa
potongan bahasa arab di dalam artikel, tidak perlu pakai versi rtl.
Dengan memahami perbedaan dari file minified dan rtl, kita tinggal membahas 4 jenis file CSS
Bootstrap:
 bootstrap.css
 bootstrap-grid.css
 bootstrap-utilities.css
 bootstrap-reboot.css
39
Instalasi Bootstrap
File bootstrap.css berisi kode CSS dari seluruh fitur dan komponen yang disediakan
Bootstrap. Dalam kebanyakan project, file inilah yang kita perlukan.
File bootstrap-grid.css berisi kode CSS untuk Bootstrap Grid saja. Grid merupakan
mekanisme inti Bootstrap dalam mengatur layout. File ini cocok dipakai jika kita hanya perlu
komponen Bootstrap grid saja dan tidak butuh komponen lain.
File bootstrap-utilities.css berisi kode CSS untuk fitur utilities Bootstrap saja. Bootstrap
utilities berisi komponen pendukung seperti penamaan warna class, flexbox, position serta
pengaturan padding dan margin.
File bootstrap-reboot.css berisi kode CSS untuk proses reboot. Reboot merupakan istilah
Bootstrap untuk CSS reset, yakni kumpulan kode untuk me-reset semua style bawaan web
browser agar seragam. Bagi yang sudah membaca buku CSS Uncover, tentu tidak asing
dengan istilah CSS reset.
Tabel berikut merangkum perbedaan dari keempat file css yang ada di Bootstrap 5:
Perbedaan jenis file CSS Bootstrap
Karena kita akan pelajari hampir semua komponen Bootstrap, maka file yang diperlukan
adalah bootstrap.css atau bootstrap.min.css. Anda boleh memakai versi minified maupun
versi unminified. Dalam buku ini saya akan menggunakan versi biasa (unminified), yakni file
bootstrap.css. File CSS lain boleh saja dihapus karena tidak diperlukan lagi.
Folder JS Bootstrap
Kita lanjut melihat isi folder js Bootstrap. Folder ini berisi file JavaScript yang diperlukan oleh
40
Instalasi Bootstrap
Bootstrap:
Isi folder js Bootstrap
Terdapat 12 file di dalam folder js. Setengah di antaranya memiliki extension .map yang juga
merupakan file "source maps" untuk keperluan debugging. Dengan mengabaikan file ini maka
tinggal 6 file JavaScript yang juga terdiri dari 2 kelompok, yakni versi file asal (unminified) dan
versi minified.
Sama seperti file CSS, file minified JavaScript adalah versi "padat" yang didapat dari
menghapus seluruh komentar, whitespace, serta mengubah nama variabel dan function
menjadi sangat singkat seperti a, t atau e. File ini ditujukan untuk website online karena
ukurannya lebih kecil daripada file asli.
Sebagai perbandingan, file bootstrap.js terdiri dari 5200 baris kode program (berukuran
142kb), sedangkan file bootstrap.min.js hanya berisi 6 baris kode program (berukuran 59kb).
Dengan mengabaikan versi minified maka terdapat 3 jenis file di folder js Bootstrap:
 bootstrap.js
 bootstrap.esm.js
 bootstrap.bundle.js
File bootstrap.js berisi kode JavaScript standar Bootstrap. File ini harus di akses agar
komponen interaktif Bootstrap bisa berjalan, misalnya mengaktifkan jendela Modal, atau
menampilkan hamburger menu di layar smartphone.
File bootstrap.esm.js mirip seperti bootstrap.js, tapi ditujukan jika file JavaScript Bootstrap
di import melalui EcmaScript Modules (ESM). Cara ini relatif baru dan belum didukung oleh
semua web browser.
File bootstrap.bundle.js berisi gabungan dari bootstrap.js dan popper.js. Seperti yang kita
bahas di awal bab, file JavaScript Bootstrap memiliki dependency dengan library Pooper JS.
Maka dengan memakai bootstrap.bundle.js, kita tidak perlu lagi mengimport file popper.js
secara terpisah.
41
Instalasi Bootstrap
Perbedaan jenis file JS Bootstrap
Agar lebih simple, di buku ini saya akan pakai file bootstrap.bundle.js saja. Jika diperlukan,
anda tetap bisa memakai file bootstrap.js, lalu mendownload file popper.js secara terpisah
dari popper.js.org8.
Saat ini Popper JS sudah update ke versi 3, sedangkan Bootstrap 5 butuh Popper JS versi
2 (bukan versi 3). Pooper JS versi 2 bisa di download ke sini: pooperjs/core@2.9.19.
3.3. Template Dasar HTML Bootstrap

Kita sudah memiliki file Bootstrap, sekarang mari tes buat file HTML untuk mengaksesnya. Di
dalam folder belajar_bootstrap saat ini sudah tersedia folder css yang berisi file
bootstrap.css serta folder js yang berisi file bootstrap.bundle.js .
Silahkan buat file index.html di dalam folder belajar_bootstrap, lalu isi dengan kode berikut:
index.html
1 <!DOCTYPE html>
2 <html lang="id">
3 <head>
6 <title>Belajar Bootstrap</title>
7 <link rel="stylesheet" href="css/bootstrap.css">
8 </head>
9 <body>
10 <div class="container">
12 </div>
13 <script src="js/bootstrap.bundle.js"></script>
14 </body>
15 </html>
Proses import file CSS dilakukan dari tag <link> di baris 7. Lalu di dalam tag <body> terdapat
tambahan tag <div class="container">. Class .container merupakan class bawaan Bootstrap
yang sengaja saya tambah untuk menguji apakah file CSS bootstrap sudah berhasil diakses
8 https://popper.js.org
9 https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js
42
Instalasi Bootstrap
atau belum. Terakhir di baris 13 terdapat tag <script> untuk proses import file JavaScript
Bootstrap.
Pastikan struktur file folder belajar_bootstrap sebagai berikut:
Gambar: Struktur folder belajar_bootstrap
Setelah itu akses file index.html dari web browser:
Gambar: Tampilan index.html dengan Bootstrap aktif
Salah satu bukti jika kode CSS Bootstrap sudah berhasil diakses adalah teks "Belajar Bootstrap"
berada sedikit ke tengah sebagai efek dari tag <div class="container">. Selain itu teks tampil
dengan font sans-serif (font tanpa "kaki") yang jika dijalankan di Windows 10 akan memakai
font Segoe UI.
Namun jika file CSS Bootstrap gagal diakses, tampilannya jadi seperti ini:
Gambar: Tampilan index.html tanpa Bootstrap
Terlihat teks "Belajar Bootstrap" tampil rata kiri dengan font serif (font yang ada tambahan
"kaki"), yang ketika dijalankan di Windows 10 menggunakan font Times New Roman.
Selanjutnya untuk menguji apakah file JavaScript Bootstrap juga sudah bisa diakses, silahkan
buat file index-js.html dengan kode sebagai berikut:
43
Instalasi Bootstrap
index-js.html
1 <!DOCTYPE html>
2 <html lang="id">
3 <head>
8 </head>
9 <body>
11 <h1 id="myPopover" data-bs-toggle="popover" data-bs-placement="bottom"
12 class="text-center" title="Welcome to Web Design" role="button"
13 data-bs-content="Ingin jadi web designer? Duniailkom siap memandu anda">
14 Belajar Bootstrap </h1>
15 </div>
17 <script>
18 new bootstrap.Popover(document.getElementById('myPopover'))
19 </script>
20 </body>
21 </html>
Untuk saat ini boleh abaikan maksud kode program di atas. Di dalamnya saya menulis
beberapa atribut baru ke dalam tag <h1> serta satu baris kode JavaScript di akhir tag <body>.
Ini semua dipakai untuk membuat efek Popovers.
Silahkan buka di web browser, kemudian klik judul "Belajar Bootstrap".
Gambar: Tampilan index-js.html dengan efek Popover Bootstrap
Jika saat di klik tampil kotak kecil di bawah judul "Belajar Bootstrap", berarti file bootstrap.
bundle.js bawaan Bootstrap sudah bisa diakses. Fitur Popover ini nantinya akan kita pelajari
secara detail dalam bab tersendiri.
Namun jika kotak popover tidak tampil, berarti file bootstrap.bundle.js gagal diakses.
Silahkan cek kembali apakah terdapat salah ketik atau file bootstrap.bundle.js ternyata
berada di folder lain.
44
Instalasi Bootstrap
Efek Popovers bukanlah asli bawaan Bootstrap, tapi berasal dari Popper JS. Daripada
membuat ulang kode untuk menghasilkan efek yang sama, tim pengembang Bootstrap
memutuskan memakai library Popper.js saja, yakni prinsip "don't reinvent the wheel".
Teknik ini sangat bermanfaat dan memang lebih efisien daripada membuat sendiri dari
nol. Misalkan jika project yang kita rancang perlu perhitungan tanggal di JavaScript,
tersedia library Moment.js (momentjs.com), atau untuk membuat tampilan chart /
grafik, bisa menggunakan library Chart.js (chartjs.org), dan masih banyak library JS lain.
Pengetahuan seputar library-library ini akan sangat memudahkan pembuatan program.

Daripada buat sendiri dari nol, lebih baik kita pakai kode program yang sudah jadi saja.
Error di Console Web Developer Tools

Masih berhubungan dengan JavaScript, jika anda iseng membuka tab Console dari Developer
Tools, kemungkinan akan melihat 2 pesan warning:
Gambar: Pesan warning di tab console Developer Tools
Pesan warning ini terjadi karena Developer Tools mencoba mencari file "source map" dari
bootstrap.css, dan bootstrap.bundle.js . Ini sebenarnya boleh diabaikan karena tidak
berpengaruh ke kode program kita.
Namun jika ingin menghilangkan pesan warning di atas, biarkan file "source map" di dalam
folder yang sesuai. Yakni file bootstrap.css.map di dalam folder css dan file
bootstrap.bundle.js.map di dalam folder js.
3.4. Template Dasar HTML Bootstrap CDN

Template struktur Bootstrap yang baru saja kita buat adalah versi offline atau versi lokal.
Maksudnya, semua file yang dibutuhkan berada di komputer kita sendiri.
45
Instalasi Bootstrap
Alternatif lain, tersedia file Bootstrap yang berada di CDN. CDN merupakan singkatan dari
Content Delivery Network yang secara sederhana bisa diartikan sebagai jaringan harddisk
online super cepat yang bisa diakses oleh siapa saja. Penyedia layanan CDN cukup banyak,
mulai dari yang gratis hingga berbayar.
Sebagai contoh, daripada repot-repot mendownload file bootstrap.min.css, kita bisa menulis
langsung tag <link> sebagai berikut:
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
Dan untuk file bootstrap.bundle.min.js bisa diakses dengan tag <script> di bawah ini:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/
bootstrap.bundle.min.js"></script>
Dengan demikian, berikut template kode HTML Bootstrap yang menggunakan CDN:
index-cdn.html
1 <!DOCTYPE html>
2 <html lang="id">
3 <head>
7 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/
8 dist/css/bootstrap.min.css">
9 </head>
10 <body>
13 </div>
14 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/
15 bootstrap.bundle.min.js"></script>
16 </body>
17 </html>
Perbedaan mendasar antara template CDN dengan template offline adalah lokasi tempat
penyimpanan file Bootstrap. Untuk template CDN di atas, kedua file Bootstrap berada di
server CDN milik jsdelivr.net.
Prinsip Kerja dan Keunggulan CDN

Selain lebih praktis karena tidak perlu menyimpan file Bootstrap di komputer lokal, CDN
menawarkan efisiensi penggunakan cache web browser.
Ketika sebuah website di buka dari web browser, seluruh file .html, .css, .javascript serta
file gambar dari web tersebut akan di download dan disimpan ke dalam cache web browser.
Pada saat kita mengunjungi halaman lain dari web yang sama, web browser akan melihat isi
46
Instalasi Bootstrap
cache tadi terlebih dahulu. Jika ternyata file yang ingin di download sudah ada di dalam cache,
web browser tinggal mengambilnya dan tidak perlu mendownload ulang.
CDN menggunakan prinsip yang sama namun lebih powerful. Sebagai contoh, misalkan web
duniailkom servernya berada di Amerika Serikat. Maka setiap kali pengunjung Indonesia
membuka web duniailkom, seluruh file akan dikirim dari server di Amerika Serikat.
Namun karena web duniailkom menggunakan jasa CDN yang memiliki server di Singapura,
maka ketika ada pengunjung yang mengakses web duniailkom dari Indonesia, server di
singapura ini akan di cek terlebih dahulu. Jika ditemukan, hasilnya langsung dikirim ke web
browser tanpa harus mengambil file asli ke server di Amerika Serikat.
Perusahaan CDN biasanya memiliki banyak cache server di berbagai negara agar file website
bisa diakses dengan lebih cepat.
Gambar berikut menampilkan ilustrasi yang terjadi:
Prinsip kerja cache web browser (sumber gambar: keycdn.com)
Pada first request, web browser pengunjung meminta file foobar.css dari sebuah alamat di
internet. Karena file ini belum tersedia di server CDN, maka file akan diambil dari server asli
untuk dikirim ke komputer pengunjung. Pada saat yang bersamaan, file foobar.css disimpan
ke dalam server CDN.
Ketika terjadi request kedua untuk file foobar.css dengan alamat yang sama (bisa berasal dari
pengunjung yang sama atau pengunjung lain), maka tinggal mengambil file dari server CDN
saja, tidak perlu ke server asli. Proses ini membuat website tampil dengan lebih cepat.
Jika kita memakai file Bootstrap yang ada di CDN, terdapat kemungkinan file tersebut sudah
ada di cache web browser maupun di cache server CDN.
Sebagai contoh, misalkan saya ingin mengunjungi web abc.com. Jika sebelumnya saya belum
pernah mengunjungi web ini, maka seluruh file dari web tersebut akan di download ke dalam
47
Instalasi Bootstrap
cache web browser untuk kemudian di tampilkan. Katakanlah abc.com memakai Bootstrap dan
filenya berada di CDN cloudflare.com.
Ketika saya beralih ke web xyz.com, proses yang sama juga terjadi. Jika web xyz.com juga
menggunakan file CDN Bootstrap dari cloudflare.com, maka file Bootstrap dari web xyz.com
tidak perlu di download ulang karena sudah ada di cache web browser (hasil dari mengunjungi
web abc.com). Efeknya, web xyz.com bisa tampil sedikit lebih cepat daripada seharusnya.
Kelemahan CDN
Dari penjelasan sebelumnya, terlihat keunggulan dari CDN, namun CDN ini juga memiliki
kelemahan.
Pertama, efek kecepatan tampil ini tidak terlalu banyak, terutama jika yang ada di CDN hanya
beberapa file saja (bukan keseluruhan isi website).
Versi minified file bootstrap.min.css dan bootstrap.bundle.min.js hanya berukuran 191kb

dan 78kb. Totalnya kurang lebih sama seperti besar satu file gambar jpg. Rata-rata ukuran 1
halaman website bisa mencapai 500kb atau lebih, apalagi jika web tersebut memiliki banyak
gambar. Efek penggunaan CDN baru terasa jika seluruh web disimpan ke dalam CDN.
Kelemahan kedua jika menggunakan CDN Bootstrap adalah, website kita jadi bergantung ke
server lain. Meskipun kecil kemungkinan, bagaimana jika suatu saat website cdn.jsdelivr.net
tidak bisa diakses? Web kita tampil berantakan karena file CSS tidak berhasil di proses.
Kelemahan ketiga, bisa saja pihak CDN mengupdate file bootstrap.css yang sudah ada.
Misalkan jika nanti rilis Bootstrap 6, maka file di CDN bisa saja ikut di update. Ini juga bisa jadi
mimpi buruk karena kode di website kita masih menggunakan Bootstrap 5.
Untuk menghindari kemungkinan tersebut, harus cek versi yang digunakan CDN, misalnya file
bootstrap.css berada di alamat https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/
css/bootstrap.min.css. Alamat ini sudah berisi kode versi Bootstrap, yakni bootstrap@5.2.2
jadi seharusnya isi file CDN tersebut tidak akan berubah.
Menimbang beberapa hal di atas, saya pribadi lebih cenderung menggunakan file Bootstrap
lokal, yakni semua file berada di server kita sendiri. Dengan demikian kita memiliki kontrol
penuh terhadap setiap file.
Jika ingin lebih optimal, tempatkan semua file website di CDN, tidak hanya sebagian saja.
Cloudflare (cloudflare.com) bisa jadi pilihan gratis jika tertarik menggunakan CDN untuk
seluruh website.
Namun meskipun begitu, link file bootstrap yang ada di CDN tetap sangat praktis dan cocok
untuk membuat template dengan cepat. Nanti pun juga sangat mudah beralih ke file Bootstrap
lokal dengan mengedit isi tag <link> dan tag <script> di dalam kode HTML.
48
Instalasi Bootstrap
3.5. Bootstrap Modul

Sebelum menutup bab ini, saya ingin membahas sekilas apa saja modul yang ada di dalam
Bootstrap, yakni fitur apa saja yang tersedia di dalam Bootstrap 5. Secara garis besar,
Bootstrap 5 saya bagi menjadi 6 kelompok modul:
✔ Layout (Grid System)
✔ Content
✔ Forms
✔ Components
✔ Helpers dan Utilities
✔ Bootstrap Icons
Modul Layout berisi kode Bootstrap untuk pengelolaan layout, yang terdiri dari breakpoints,
container, grid system, columns, gutters, dan responsive utility class.
Modul Content berisi koleksi kode CSS untuk mengubah tampilan konten, diantaranya
Bootstrap reboot (CSS reset versi Bootstrap), pengelolaan font, tabel dan gambar.
Modul Forms berisi kode CSS untuk mengatur tampilan form, diantaranya form control, select,
input group, floating labels, layout dan validation.
Modul Components merupakan modul utama Bootstrap yang berisi berbagai komponen web
hasil perpaduan kode HTML, CSS dan JavaScript. Terdapat puluhan komponen Bootstrap,
mulai dari membuat tombol alert, popover, breadcrumb, carousel, navbar, pagination, tooltips,
toasts, dll. Setiap komponen ini akan kita bahas dengan detail nantinya.
Modul Helpers dan Utilities berisi berbagai komponen kecil atau modul bantu, seperti
pengaturan margin dan padding, pengaturan warna, posisi teks, clearfix, flexbox, float, efek
bayangan (shadow), visibility, dll.
Modul Bootstrap Icons berisi cara penggunaan font icon bawaan Bootstrap.
Mulai dari bab berikutnya hingga akhir buku, kita akan membahas modul-modul Bootstrap ini
secara bertahap.
---
Dalam bab ini kita sudah membahas cara instalasi Bootstrap, yakni bagaimana membuat
template dasar HTML yang di dalamnya sudah memiliki file-file Bootstrap. Selain itu juga
sudah dibahas apa saja file penyusun Bootstrap, membuat template versi offline dan versi
CDN, serta mengenal 6 komponen dasar Bootstrap.
49
Instalasi Bootstrap
Dalam bab berikutnya, kita akan masuk ke Bootstrap grid system, yakni sistem perancangan
layout yang sangat powerful dari Bootstrap.
------------------------------------------------------------------
=====================================================================
50
Bootstrap Grid System
4. Bootstrap Grid System
Bootstrap grid system menjadi salah satu materi terpenting yang ada di dalam Bootstrap.
Grid sistem dipakai untuk merancang kerangka atau layout website.
Seperti yang akan kita pelajari nanti, sistem grid Bootstrap sangat fleksibel, powerful namun
sedikit kompleks. Kita tidak hanya merancang 1 tampilan web, tapi berbagai bentuk tampilan
sekaligus untuk mendapatkan efek web responsive.
4.1. Pengertian Grid System

Dalam bidang design grafis, grid bukanlah sesuatu yang baru. Grid adalah istilah untuk
menyebut garis bantu yang menjadi panduan seorang designer. Tujuan penggunaan grid agar
karya tersebut pas secara proporsional. Pada media cetak, grid ini berbentuk garis yang terdiri
dari baris dan kolom, kurang lebih sama seperti bentuk tabel.
Berikut contoh penggunaan grid dalam pembuatan layout halaman cetak:
Contoh penggunaan grid (sumber gambar: wikipedia.org)
51
Garis putih dalam gambar di atas adalah grid. Agar tampilan halaman menjadi proporsional,
sang designer menjadikan grid ini sebagai patokan posisi teks. Tidak ada ilmu baku berapa
jumlah garis grid, lebih bergantung dari kebutuhan designer itu sendiri.
Di dalam web design, sistem grid juga banyak dipakai. Halaman web akan lebih rapi dan
menarik jika teks mengikuti sebuah susunan yang terasa pas. Perhatikan gambar layout di
bawah ini:
Perbedaan susuan layout (sumber gambar: webpagefx.com)
Meskipun terdiri dari kotak persegi panjang yang sama, layout pertama (bagian atas) terlihat
lebih rapi dan menarik daripada layout kedua (bagian bawah) yang tampak berantakan.
Namun bukankah sesuatu yang acak tetap menarik (karya picasso?), hanya saja dalam hal
menampilkan informasi seperti koran atau website, lebih baik jika materi itu tersusun rapi dan
simetris.
Menerapkan konsep grid ke dalam web design memiliki tantangan sendiri. Berbeda dari media
cetak yang bersifat tetap, sebuah web dibuat dari kode-kode program. Kita harus
mengkonversi ukuran grid menjadi property width CSS.
Sebagai contoh, jika saya ingin membagi halaman dengan lebar 1000 pixel ke dalam 3 kolom
grid, maka setiap kolom memiliki lebar 333,33 pixel. Setiap kolom grid nantinya akan memiliki
margin supaya tidak menempel satu sama lain. Jika lebar margin 20 pixel di antara setiap
52
kolom, maka harus ada 40 pixel yang dikurangi. Belum lagi jika terdapat efek padding dan
border.
Kemudian jika di bawahnya saya ingin membagi 1000 pixel menjadi 4 kolom, maka proses
hitung-hitungan di atas perlu dilakukan lagi dari awal.
Penerapan grid ke CSS memang lumayan rumit, karena itulah muncul berbagai library CSS
dengan sistem grid bawaan yang dikenal sebagai grid system.
Salah satu grid system pertama yang saya kenal adalah 960 grid system (https://960.gs). 960
grid system rilis sekitar tahun 2008. Angka 960 artinya lebar konten web dibatasi sebesar 960
pixel. Angka 960 pixel sengaja dipilih karena mudah dibagi ke dalam sistem grid, misalnya jika
ingin 3 kolom maka masing-masing kolom lebarnya pas 320 pixel. Jika ingin dibagi jadi 6
kolom maka setiap kolom lebarnya 160 pixel, dst.
Agar lebih mudah di implementasikan, 960 grid system membuat sistem grid dengan 12 kolom
dan 16 kolom. Setiap grid bisa digabung untuk mendapatkan kolom yang lebih besar. Berikut
contoh tampilan web beserta konsep grid yang dipakai:
Hasil design web (kiri) dengan penerapan sistem 12 grid (kanan) (sumber gambar: 960.gs)
Dalam gambar di atas, kotak merah yang memanjang dari atas ke bawah adalah grid panduan
perancangan layout. Sistem grid ini sangat revolusioner dan diterapkan hampir di setiap CSS
framework, termasuk Bootstrap.
Website resmi 960 grid system, https://960.gs masih bisa diakses namun sudah tidak di
update lagi sejak 2010. Konsep grid yang dipakai bersifat tetap (fixed) dan belum mendukung
responsive web design.
53
4.2. Bootstrap Grid System

Bootstrap grid system adalah sistem grid dari Bootstrap. Bootstrap menggunakan 12 kolom
grid serta menerapkan mobile-first design concept.
Maksud dari mobile-first adalah sistem grid Bootstrap di desain dengan tampilan web versi
mobile sebagai patokan utama, baru kemudian berangkat ke versi desktop (layar besar).
Bootstrap Grid System vs CSS3 Grid
Beberapa waktu lalu CSS3 menghadirkan modul yang disebut sebagai CSS3 Grid. CSS3
Grid ini sepenuhnya berbeda dengan Bootstrap Grid System yang kita pelajari di sini.
Mobile first design vs. Desktop first design

Jika anda pernah belajar cara membuat web responsive (misalnya dari buku CSS Uncover
Duniailkom), maka kita harus membuat 2 atau 3 jenis tampilan. Yakni tampilan untuk versi
desktop (layar besar), untuk versi tablet (layar sedang), dan untuk versi mobile (layar kecil).
Ketika memulai proses design, tampilan mana yang sebaiknya dibuat terlebih dahulu? Apakah
tampilan desktop, atau mobile? Keduanya punya kelebihan dan kelemahan masing-masing.
Jika kita membuat tampilan desktop terlebih dahulu (desktop-first), maka pada saat membuat
versi mobilenya, beberapa element perlu dikurangi. Sebagai contoh, bagian sidebar bisa
dihapus atau pindah ke bawah setelah bagian konten. Dalam ilmu web design, proses
menghapus fitur yang dirasa tidak perlu ini disebut sebagai graceful degradation.
Di sisi lain, jika kita membuat tampilan mobile terlebih dahulu (mobile-first), dimulai dari
merancang bagian inti website yang terdiri dari menu dan konten utama. Baru kemudian
ditambah fitur demi fitur untuk tampilan desktop. Teknik ini disebut sebagai progressive
enhancement, dimana kita menambah fitur baru secara bertahap.
Gambar: Ilustrasi perbedaan konsep desktop first (graceful degradation) vs mobile first (progressive enhancement)
(sumber: designyourway.net)
54
Tren di kalangan web designer saat ini lebih memilih mobile-first daripada desktop-first.
Alasannya jumlah pengakses web dari perangkat mobile sudah melebihi jumlah pengguna
komputer desktop. Sehingga kita harus jadikan versi mobile sebagai tampilan utama website.
Mengutip data dari gs.statcounter.com, sejak akhir 2016 perangkat mobile sudah mengalahkan
jumlah pengguna desktop:
Perbandingan pengguna yang mengakses web dari perangkat desktop, mobile dan tablet periode Januari 2015 –
Oktober 2022 dari seluruh dunia (sumber: gs.statcounter.com)
Dalam mobile-first, kita dituntut untuk mematangkan konsep tampilan mobile terlebih dahulu.
Fitur yang penting dipastikan harus tampil di versi mobile, barulah nanti fitur pelengkap
ditambahkan ke versi desktop.
Jika menggunakan desktop-first, ada risiko tidak sengaja menghilangkan fitur yang ternyata
penting. Karena bisa jadi ketika merancang versi desktop, fitur utama website sudah tersebar
ke banyak bagian web. Inilah salah satu alasan Bootstrap mengadopsi konsep mobile-first.
Persiapan Template Bootstrap

Sebelum masuk ke kode Bootstrap grid, saya ingin siapkan sebuah template kode HTML:
01.template.html
1 <!DOCTYPE html>
2 <html lang="id">
3 <head>
8 <style>
55
9 /* kode CSS disini... */

10 </style>
11 </head>
12 <body>
13 
16 </div>
17 
19 <script>
20 // kode JavaScript disini...
21 </script>
22 </body>
23 </html>
Struktur dasar inilah yang akan kita pakai sepanjang buku (kecuali dinyatakan lain). Untuk
menghemat tempat, tidak semua kode HTML saya ditampilkan, hanya potongan di 3 bagian
saja.
Bagian pertama berada di baris 8 – 10. Di sini terdapat tag <style> sebagai tempat bagi kode
CSS internal. Jika terdapat kode CSS, artinya kode tersebut harus ditulis di sini.
Bagian kedua ada di tag <body> mulai dari baris 14 – 16. Di sinilah kode HTML untuk konten
berada. Mayoritas kode Bootstrap akan kita tulis di sini.
Bagian ketiga ada di baris 19 – 21, yakni tag <script> sebagai tempat untuk menginput kode
JavaScript. Kode JavaScript sendiri tidak akan banyak saya pakai, kecuali untuk beberapa
komponen Bootstrap yang butuh efek interaktif.
Dengan struktur ini maka jika saat pembahasan nanti terdapat kode CSS, posisinya berada di
tag <style> (bagian pertama), lalu jika yang ditulis adalah kode HTML, itu berada di dalam tag
<body> (bagian kedua), dan jika berupa kode JavaScript, tempatnya ada di dalam tag <script>
(bagian ketiga).
Jika ragu tentang urutan kode ini, bisa buka file belajar_bootstrap.zip yang tersedia di
Google Drive.
Konsep CSS Class Bootstrap

Untuk menggunakan komponen Bootstrap (termasuk grid system), kita tinggal menulis atribut
class CSS ke dalam tag HTML. Tambahan class ini bisa mengubah bentuk, warna, ukuran,
hingga memberikan efek tertentu. Sebagai contoh, saya memiliki tag <span> berikut:
<span>Log in</span>
Agar tag <span> ini tampil dalam bentuk tombol, tambah sebuah class btn:
<span class="btn">Log in</span>
56
Untuk memberi warna dari tombol, bisa di tambah dengan class btn-primary:
<span class="btn btn-primary">Log in</span>
Lalu agar tombol memiliki efek bayangan, tambah lagi dengan class shadow:
<span class="btn btn-primary shadow">Log in</span>
Demikian seterusnya untuk efek-efek lain. Teknik seperti inilah yang banyak di pakai oleh
Bootstrap.
4.3. Container and Container-fluid

Container adalah struktur paling dasar di dalam Bootstrap. Jika kita ingin memakai Bootstrap
grid system, seluruh kode HTML harus berada di dalam container. Cara pembuatan container
sangat sederhana, cukup tambah class container ke dalam sebuah tag HTML:
<div class="container">
...
...
</div>
Di dalam container inilah tempat seluruh komponen Bootstrap berada.
Tag yang sering dipakai untuk container adalah tag <div> karena bersifat generik dan tidak
memiliki efek tambahan apapun. Tag <div> juga termasuk block level element sehingga cocok
untuk membagi struktur halaman. Tentu saja kita bisa memakai semantic tag HTML5 seperti
<article>, <section> atau block level element lain.
Selain class container, Bootstrap juga memiliki class container-fluid yang penulisannya
sebagai berikut:
<div class="container-fluid">
...
...
</div>
Apa beda dari class container dengan container-fluid? Berikut hasil perbandingannya:
02.container.html
1 <style>
2 div {
3 background-color: rgba(86, 61, 124, 0.15);
4 border: 1px solid rgba(86, 61, 124, 0.2);
5 padding: 0.4em;
6 margin-top: 0.5em;
7 }
8 </style>
57
1 <div class="container">Container</div>
2 <div class="container-fluid">Container Fluid</div>
Di baris 1 sampai 8 (bagian atas), saya menulis beberapa kode CSS. Ini hanya sebagai alat bantu
supaya efek penggunaan container bisa terlihat. Setiap tag <div> akan memiliki background
dan border berwarna abu-abu, serta padding 0.4 em dan margin-top 0.5 em.
Kode HTML untuk tag <body> saya tulis di baris 1 dan 2 (bagian bawah). Berikut hasilnya:
Beda tampilan antara class="container" (atas) dengan class="container-fluid" (bawah)
Jika menggunakan class="container", maka kotak container bersifat tetap (fixed-width

container), yang artinya ada ruang kosong atau margin di sisi kanan dan kiri. Ketika lebar
jendela web browser diubah, pada titik tertentu kotak container ini juga akan mengecil dan
membesar dengan tetap mempertahankan margin di kanan dan kiri. Namun jika jendela web
browser sudah terlalu kecil, container akan memenuhi lebar jendela.
Sedangkan jika yang dipakai adalah class="container-fluid", maka kotak container akan
menggunakan seluruh lebar jendela web browser 100%. Ketika jendela web browser berubah,
lebar container juga akan menyesuaikan diri (fluid-width container).
Agar lebih dipahami, silahkan tes langsung kode di atas lalu ubah lebar jendela web browser.
Pada Bootstrap 5 terdapat tambahan class container baru dengan batasan breakpoint.
Mengenai hal ini akan kita bahas setelah materi breakpoint di akhir bab nanti.
"Responsive Mode" bawaan Web Browser

Untuk melihat efek web responsive, cara paling praktis adalah dengan memperbesar dan
memperkecil lebar web browser. Selain itu web browser modern juga menyediakan fitur
khusus yang disebut sebagai Responsive Design Mode di Mozilla Firefox, atau Toggle Device
Toolbar di Google Chrome.
Caranya, silahkan buka tab Developer Tools (Ctrl + Shift + i), lalu cari icon Toggle Device
Toolbar di bagian kiri, yakni icon yang mirip gambar smartphone.
58
Gambar: Klik icon smartphone untuk beralih ke toggle device toolbar di Chrome
Sesaat kemudian akan muncul jendela kecil di dalam web browser sebagai simulasi ukuran
layar smartphone. Kita bisa menggeser manual dimensi layar atau memilih salah satu jenis tipe
smartphone yang tersedia:
Gambar: Pilih jenis tipe smartphone di dalam toggle device toolbar
Yang harus diperhatikan saat menggunakan fitur ini adalah, meta tag viewport harus ada di
bagian <head> kode HTML. Jika tidak, halaman tampil dalam versi desktop yang di-zoom.
4.4. Row and Column

Container yang baru saja kita buat menjadi struktur dasar dari Bootstrap grid system. Di dalam
container inilah kita akan menulis row (baris) dan col (kolom) untuk membuat grid.
Konsep antara row dan col di Bootstrap grid mirip seperti fungsi tag <tr> dan <td> dari tabel
HTML. Di dalam <table>, tag <tr> berfungsi untuk membuat baris, kemudian di dalam tag
<tr> ini terdapat beberapa tag <td> untuk membuat kolom.
Begitu juga di dalam Bootstrap grid, atribut class="row" dipakai untuk membuat baris, dan
atribut class="col" untuk membuat kolom. Kedua class ini bisa ditulis ke dalam tag <div>.
Sebagai contoh, berikut kode untuk membuat tampilan 1 baris dengan 3 kolom:
03.row_and_col_1_baris.html
1 <style>
2 .col {
5 padding: 0.4em;
59
7 }
8 </style>
2 <div class="row">
3 <div class="col"> Kolom 1 </div>
6 </div>
7 </div>
Kode CSS dibagian pertama mirip seperti contoh di materi container kita sebelumnya. Tapi
sekarang selector yang saya pakai adalah .col, sehingga semua tag HTML yang memiliki
class="col" akan di-style dengan background dan border berwarna abu-abu, serta padding
0.4em dan margin-top 0.5 em.
Masuk ke kode HTML, struktur terluar terdiri dari <div class="container"> . Kemudian di
dalamnya terdapat tag <div> dengan class="row". Selanjutnya tag <div class="row"> ini
memiliki 3 buah tag <div> dengan class="col" untuk membuat 3 buah kolom.
Berikut tampilan dari kode di atas:
Bootstrap grid dengan 1 baris yang berisi 3 kolom
Ketiga kolom ini sudah memiliki efek responsive. Jika lebar jendela web browser berubah,
lebar kolom juga akan menyesuaikan.
Bagaimana dengan membuat 2 baris atau lebih? Tidak masalah, tinggal tambah class="row"
baru di bawahnya. Berikut contoh kode untuk membuat 4 baris dengan jumlah kolom yang
berbeda-beda:
04.row_and_col_banyak_baris.html
2 <div class="row">
4 </div>
5 <div class="row">
8 </div>
9 <div class="row">
60

13 </div>
14 <div class="row">
20 </div>
21 </div>
Gambar: Bootstrap grid dengan 4 baris dengan jumlah kolom bervariasi
Sama seperti sebelumnya, semua kolom sudah responsive dan mengikuti lebar web browser:
Gambar: Setiap kolom bersifat responsive dan menyesuaikan dengan lebar layar
Berapa maksimal jumlah kolom dalam 1 baris? Mari kita coba tambah 16 kolom dalam 1 baris:
05.row_and_col_16_kolom.html
2 <div class="row">
3 <div class="col"> Kolom 1 </div><div class="col"> Kolom 2 </div>
61

11 </div>
12 </div>
Gambar: Bootstrap akan mempertahankan lebar kolom hingga kata terpendek
Ternyata efek responsive berdampak di sini. Bootstrap berusaha menempatkan semua kolom
dalam satu baris. Namun jika lebar jendela web browser cukup kecil, setiap kolom akan
mendapat jatah hingga kata terpanjang yang ada di kolom tersebut.
Dalam contoh di atas, kata "kolom" adalah kata terpanjang dan tidak bisa dipotong. Akibatnya
kolom yang tidak muat akan pindah ke bawah.
Sebagai pembanding, jika saya menghapus kata "kolom", semua kolom bisa ditempatkan dalam
1 baris, meskipun jendela web browser cukup kecil.
06.row_and_col_16_kolom_nomor.html
2 <div class="row">
3 <div class="col">1 </div><div class="col">2 </div>
62
11 </div>
12 </div>
Gambar: Bootstrap akan mempertahankan lebar kolom hingga kata terpanjang
Sekarang isi kolom hanya terdiri dari angka dengan 1 atau 2 digit karakter. Akibatnya, lebar
kolom bisa "dimampatkan" karena tidak ada lagi kata "kolom" yang cukup panjang. Efek ini
sebenarnya berasal dari CSS Flexbox yang menjadi dasar Bootstrap grid system.
Mari tes dengan kata yang lebih panjang:
07.row_and_col_3_kolom_teks_panjang.html
2 <div class="row">
3 <div class="col">IniAdalahTeksPanjangTanpaSpasi1</div>
6 </div>
7 </div>
Gambar: Kata yang panjang akan mempengaruhi lebar kolom
Meskipun row ini hanya terdiri dari 3 kolom, namun kata di dalamnya sangat panjang sehingga
tidak bisa dipotong (tidak ada spasi). Akibatnya, kolom ketiga harus pindah ke bawah karena
tidak muat di baris pertama.
Namun jika teks tersebut dipisah dengan spasi, hasilnya menjadi sebagai berikut:
Gambar: Teks yang panjang tidak mempengaruhi lebar kolom, karena terdapat pemisah spasi
63
Sekarang lebar kolom tetap 1/3 dari lebar baris dan tidak pindah membuat baris baru.
4.5. Column Number

Dalam bahasan sebelumnya, lebar setiap kolom grid dibagi sama rata. Maksudnya jika 1 row
memiliki 4 col, maka lebar masing-masing col adalah 25% atau 1/4 dari lebar baris. Jika di
dalam 1 row terdapat 3 col, maka lebar setiap col adalah 33,33% atau 1/3 dari lebar baris.
Bootstrap juga menyediakan cara untuk membagi ukuran kolom secara proporsional, yakni
tidak harus sama besar. Misalnya kita bisa mengatur lebar kolom 1 sebesar 50%, kolom 2
sebesar 40% dan kolom 3 sebesar 10%. Caranya, tulis nomor pada saat penulisan class="col".
Dalam sistem grid Bootstrap, setiap baris dibagi menjadi 12 segmen. Jika kita ingin satu kolom
mengambil 1/2 lebar baris, maka gunakan class="col-6". Dari mana datangnya angka 6? yakni
dari (1/2) * 12. Jika ingin lebar kolom mencakup 1/4 lebar baris, maka gunakan class="col-3",
dimana angka 3 berasal dari dari (1/4) * 12.
Berikut contoh sistem penomoran ini:
08.row_proportional.html
1 <style>
2 .row {
3 margin-top: 1em;
4 }
5 [class^="col"] {
8 padding: 0.4em;
9 }
10 </style>
2 <div class="row">
3 <div class="col-12"> Col-12 </div>
4 </div>
5 <div class="row">
9 </div>
14 </div>
19 </div>
64
24 </div>
25 </div>
Gambar: Kolom tampil secara proporsional
Untuk kode CSS, saya memisahkan property margin-top ke dalam selector row. Tujuannya
agar di antara setiap baris terdapat sedikit spasi di bagian atas.
Setelah itu saya membuat selector yang terlihat kompleks, yakni [class^="col"]. Di dalam
CSS, selector ini dikenal sebagai attribute selector, yakni selector CSS yang mencari apakah
sebuah atribut hadir di dalam tag HTML. Selector [class^="col"] akan mencari seluruh
atribut bernama class yang nilainya diawali dengan kata "col". Atribut ini akan cocok dengan
class="col-12", class="col-1", maupun class="col-5". Yakni selama nilai atribut class
diawali kata col.
Sama seperti contoh sebelumnya, kode CSS ini dipakai hanya untuk mewarnai kolom supaya
mudah terlihat.
Masuk ke kode HTML, pada row pertama di baris 3, terdapat class="col-12". Ini berarti lebar
kolom mencakup 12 segmen, sehingga kolom tersebut akan menempati satu baris penuh.
Pada row kedua di baris 6-8, saya membuat tiga buah class="col-4". Karena nilai kolom ini
sama-sama bernilai 4, maka lebar segmen akan dibagi sama rata.
Untuk row ketiga di baris 11-13, nilai class sudah berbeda, yakni class="col-3", class="col-6"
dan class="col-3". Akibatnya, kolom tengah berukuran 2 kali lebih besar daripada kolom
pertama dan ketiga.
Pada row keempat di baris 16-18, saya menggunakan kombinasi class="col-2", class="col-8"
dan class="col-2". Hasilnya, kolom kedua menjadi cukup lebar dan mengambil sekitar 66%
lebar baris.
65
Terakhir di row kelima pada baris 21-23, kombinasi row-nya adalah class="col-1",
class="col-10" dan class="col-1". Sekarang kolom kedua akan menempati 83% lebar baris.
Menggunakan teknik penomoran segmen seperti ini kita bisa membuat struktur halaman
dengan mudah, misalnya di sisi kiri terdapat sidebar dengan lebar 4 segmen, lalu di kanan
adalah bagian konten dengan lebar 8 segmen. Maka kode untuk grid Bootstrap menjadi:
1 <div class="row">
2 <div class="col-4"> Sidebar </div>
3 <div class="col-8"> Konten </div>
4 </div>
Namun bagaimana jika jumlah segmen ini tidak pas 12? atau malah lebih dari 12? mari kita tes:
09.row_overflow.html
2 <div class="row">
6 </div>
7 <div class="row">
10 </div>
16 </div>
17 </div>
Gambar: Efek kolom overflow
Pada row pertama di baris 2-6, total segmen yang dipakai sudah lebih dari 12, tepatnya 13
segmen, yakni class="col-5", class="col-5" dan class="col-3". Akibatnya, kolom terakhir
66
tidak muat dan pindah ke bawah.
Di row kedua pada baris 7-10, jumlah segmen malah tidak sampai 12, hanya 8 yang didapat dari
class="col-4" dan class="col-4". Hasilnya, di sisi kanan baris terdapat ruang kosong yang
berukuran 4 segmen.
Terakhir di row ketiga pada baris 11 – 16, total terdapat 24 segmen. Karena 1 baris hanya bisa di
tempati 12 segmen, maka sisa 12 segmen lagi akan pindah ke bawah.
Sebagai tambahan, semua kolom ini sudah responsive dan mempertahankan lebar segmen
masing-masing saat lebar web browser diperkecil, termasuk jika terdapat kata yang sangat
panjang (tidak dipisah dengan spasi):
10.row_proportional_teks_panjang.html
2 <div class="row">
3 <div class="col-4">IniAdalahTeksPanjangTanpaSpasi1</div>
6 </div>
7 </div>
Gambar: Kata yang panjang akan keluar dari kolom
Kali ini lebar setiap kolom akan tetap. Jika terdapat kata yang panjang, kata tersebut akan
"melimpah" keluar (overflow). Sedangkan jika tanpa menulis jumlah segmen, panjang kolom
akan menyesuaikan diri dengan kata terpanjang seperti yang pernah kita praktekkan
sebelumnya.
Kasus overflow di atas terjadi karena ada kata yang sangat panjang, bukan teks yang panjang.
Jika isi kolom berupa teks biasa yang dipisah dengan spasi, teks tersebut akan pindah ke baris
di bawahnya (tidak terjadi overflow):
Gambar: Teks panjang akan pindah ke baris di bawah
67
Bagaimana jika kolom dengan nomor segmen di gabung dengan kolom tanpa nomor?
11.row_proportional_dan_tanpa_segment.html
2 <div class="row">
5 <div class="col"> Col </div>
6 </div>
7 <div class="row">
11 </div>
12 </div>
Gambar: Gabungan kolom dengan dan tanpa nomor segmen
Untuk row pertama pada baris 2-6, terdapat 2 kolom dengan class="col-4", dan 1 kolom
tanpa nomor segmen. Secara otomatis, kolom tanpa segmen akan mengisi ruang yang tersisa
untuk mencapai total 12 segmen.
Untuk row kedua di baris 7-11, terdapat 1 kolom dengan class="col-6", serta 2 kolom tanpa
nomor segmen. Efek yang sama juga terjadi, dimana kolom tanpa segmen akan mengisi ruang
segmen yang tersisa untuk mencapai total 12 segmen. Karena ada 2 buah kolom tanpa nomor
segmen, maka lebarnya dibagi dua.
4.6. Column Auto

Ketika sebuah kolom grid memiliki penomoran segmen seperti class="col-6", maka lebar
kolom bersifat tetap dan tidak terpengaruh dengan teks yang ada di dalamnya. Sedangkan jika
kolom grid tidak memiliki nomor segmen seperti class="col", maka lebar kolom akan
mencoba memenuhi seluruh sisa baris.
Selain kedua efek ini, kita juga bisa membuat kolom yang lebarnya bergantung kepada isi teks
di dalam kolom tersebut. Caranya, gunakan class="col-auto" seperti contoh berikut:
12.row_col_auto.html
68
2 <div class="row">
3 <div class="col-auto"> Kolom 1 </div>
6 </div>
7 <div class="row">
8 <div class="col-6"> Kolom 1 </div>
9 <div class="col"> Kolom 2 yang berisi teks panjang </div>
11 </div>
14 <div class="col-auto"> Kolom 2 yang berisi teks panjang </div>
16 </div>
19 <div class="col-auto"> Kolom 2 yang berisi teks panjang </div>
21 </div>
22 </div>
Gambar: Teks panjang akan keluar dari kolom
Pada row pertama di baris 2-6, saya membuat 3 buah kolom class="col-auto". Hasilnya, lebar
ketiga kolom sesuai teks yang ada di dalam kolom tersebut.
Untuk row kedua di baris 7-11, kolom pertama berisi class="col-6". Kolom ini akan mengambil
tempat setengah lebar baris (6 segmen). Untuk kolom kedua dan ketiga menggunakan
class="col" sehingga akan berbagi lebar sama besar.
Khusus untuk kolom kedua saya menulis teks yang cukup panjang. Perhatikan lebar kolom
tidak terpengaruh dengan panjang teks. Jika teks di dalamnya tidak muat dalam 1 baris, sisa
teks pindah ke bawah.
Untuk row ketiga di baris 12-16 kasusnya mirip seperti row kedua, hanya saja sekarang kolom
kedua menggunakan class="col-auto". Akibatnya, kolom ini mencoba menampung seluruh
69
teks. Kolom ketiga dengan class="col" terpaksa mengalah dan mengambil lebar sebanyak sisa
baris.
Untuk row keempat di baris 17-21, kolom pertama dan ketiga menggunakan class="col-3".
Sedangkan kolom kedua menggunakan class="col-auto", sehingga akan menyesuaikan diri
dengan panjang teks.
4.7. Column Break

Dalam beberapa praktek yang sudah kita coba, sebuah kolom akan pindah ke baris baru hanya
jika baris pertama sudah penuh, misalnya ketika row pertama sudah lebih dari 12 segmen.
Bootstrap juga menyediakan cara untuk memaksa sebuah kolom pindah ke baris baru
meskipun jumlah segmen-nya masih cukup. Caranya, tulis element dengan class="w-100"
sebelum kolom yang akan dipindahkan:
13.row_col_break.html
2 <div class="row">
5 <div class="w-100"></div>
7 </div>
8 <div class="row">
13 </div>
21 </div>
22 </div>
70
Gambar: Hasil penggunaan class="w-100" untuk proses break
Di row pertama pada baris 2-7, saya menempatkan tag <div class="w-100"> antara kolom
kedua dan ketiga, akibatnya kolom ketiga pindah ke baris baru meskipun jumlah segmen di
baris pertama masih sanggup menampung kolom tersebut.
Untuk row kedua dan ketiga hal yang sama juga terjadi, yakni jika terdapat <div class="w-
100"> maka kolom berikutnya akan pindah ke baris baru, terlepas apakah kolom tersebut
memiliki nomor segmen atau tidak.
4.8. Column Ordering

Secara bawaan, kolom yang ditulis pertama kali berada di posisi pertama. Lalu kolom setelah-
nya menjadi kolom kedua, dst. Kita juga bisa menukar urutan ini dengan class="order-x".
Sebagai contoh, jika saya ingin suatu kolom tampil paling awal (di sebelah kiri), bisa menambah
class="order-1". Kolom tersebut akan menempati posisi pertama meskipun ditulis pada
posisi paling akhir. Penulisan class ini bisa digabung dengan penomoran segmen seperti
contoh berikut:
<div class="col-2 order-2"> Kolom 2 </div>
Kolom di atas mengambil 2 segmen (col-2) dan tempatkan di posisi kedua (order-2).
Di Bootstrap 5, nomor order ini dibatasi hanya sampai class order-5. Sebelumnya di
Bootstrap 4 mendukung hingga class order-12.
Berikut contoh praktek dari column ordering ini:
14.row_col_ordering.html
2 <div class="row">
71

4 <div class="col order-2"> Kolom 2 </div>
6 </div>
7 <div class="row">
11 </div>
13 <div class="col-6 order-5"> Kolom 1 </div>
18 </div>
19 </div>
Gambar: Efek cari class="order-x" untuk pengurutan kolom
Setiap kolom dalam kode di atas berisi teks sesuai urutan penulisan. Namun dengan tambahan
class="order-x", urutan kolom akan berubah.
Untuk row pertama di baris 2-6, "Kolom 3" menempati posisi kedua, dan "Kolom 2"
menempati posisi ke-3. Perhatikan bahwa meskipun "Kolom 3" memiliki class="order-1",
kolom ini tidak menempati posisi paling kiri karena "Kolom 1" ternyata tidak memiliki class
order. Kolom yang tidak memiliki class order dianggap sebagai class="order-0" sehingga
akan mengalahkan class="order-1".
Untuk row kedua di baris 7-11, urutan kolom saya buat terbalik, sekarang "Kolom 3" berada
paling kiri, kemudian diikuti oleh "Kolom 2" dan "Kolom 1". Perhatikan penulisan class order
tidak harus berurutan dari 1, 2 dan 3, tapi bisa lompat. Angka yang didukung pada Bootstrap 5
adalah dari 1 hingga 5, sehingga class order tertinggi adalah class="order-5".
Pada row ketiga di baris 12-18, urutan kolomnya sedikit kompleks karena terdapat 2 baris
dalam 1 row. "Kolom 3" berada di urutan pertama karena memiliki class="order-1", kemudian
diikuti oleh "Kolom 5" yang memiliki class="order-2", dst hingga "Kolom 1" yang memiliki
class="order-5".
72
Selain pengurutan berdasarkan nomor 1 sampai 5, Bootstrap menyediakan 2 class pengurutan

khusus, yakni class="order-first" dan class="order-last". Urutan class="order-first"
sama artinya dengan class="order-(-1)", sehingga kolom yang memiliki class ini secara
otomatis langsung berada di sisi paling kiri. Nilai ini juga lebih kecil dari kolom yang tidak
memiliki class order (yang dianggap sebagai class="order-0").
Urutan class="order-last" sama artinya dengan class="order-6", yakni 1 angka lebih besar
daripada maksimum class order yakni class="order-5". Akibatnya, kolom yang memiliki
class="order-last" akan berada di posisi paling kanan.
Berikut contoh penggunaan class="order-first" dan class="order-last":
15.row_col_ordering_first_last.html
2 <div class="row">
4 <div class="col order-last"> Kolom 2 </div>
5 <div class="col order-first"> Kolom 3 </div>
6 </div>
7 <div class="row">
10 <div class="col order-first"> Kolom 3 </div>
11 </div>
12 </div>
Efek cari class="order-x" untuk pengurutan kolom
Untuk row pertama di baris 2-6, "Kolom 2" menggunakan class="order-last" sehingga
berada di urutan paling akhir, sedangkan "Kolom 3" menggunakan class="order-first"
sehingga berada di urutan pertama. Kolom dengan class="order-first" ini akan melewati
"Kolom 1" yang tanpa class order.
Untuk row kedua di baris 7-11, saya ingin menguji apa kolom yang berada paling kiri, apakah
"Kolom 1" yang tanpa class order, "Kolom 2" dengan class="order-1", atau "Kolom 3" dengan
class="order-first" . Hasilnya, "Kolom 3" berada paling kiri, kemudian diikuti "Kolom 1" dan
terakhir "Kolom 2".
73
4.9. Column Offset

Secara sederhana, offset adalah sebutan untuk kolom kosong atau kolom yang dilewati.
Sebagaimana yang sudah kita pelajari, dalam 1 baris grid terdapat 12 segmen. Bagaimana jika
ingin membuat baris dengan 4 segmen di sisi kiri dan 4 segmen di sisi kanan, lalu sisa 4
segmen lagi tidak dipakai dan ada di tengah? Untuk kasus seperti ini kita butuh column offset.
Cara penggunaan column offset adalah dengan menulis class="offset-x" ke dalam sebuah
kolom. X di sini bisa diganti angka jumlah segmen yang ingin dilompati. Sebagai contoh class=
"offset-4" artinya lewati 4 segmen sebelum kolom saat ini.
Berikut contoh praktek dari column offset:
16.row_col_offset.html
2 <div class="row">
4 <div class="col-4 offset-4"> Kolom 2 </div>
5 </div>
6 <div class="row">
9 </div>
12 </div>
13 </div>
Hasil penggunaan column offset
Pada row pertama di baris 2-5, saya menggunakan offset-4 pada "Kolom 2". Efeknya, "Kolom
2" akan bergeser sebanyak 4 segmen ke kanan.
Pada row kedua di baris 6-9, di setiap kolom terdapat class="col-3 offset-3" . Artinya, buat
kolom sebesar 3 segmen (col-3), dan geser kolom tersebut sebanyak 3 segmen ke kanan
(offset-3).
Terakhir pada row ketiga di baris 10-12, hanya terdapat 1 kolom dengan class="col-6 offset-
3". Artinya, buat kolom sebesar 6 segmen (col-6), dan geser kolom tersebut sebanyak 3
74
segmen ke kanan (offset-3). Hasilnya seolah-olah kolom berada di tengah halaman.
Alternatif lain untuk mendapatkan efek offset adalah dari pengaturan margin auto yang akan
kita bahas dalam bab berikutnya.
4.10. Column Gutter

Gutter adalah istilah yang dipakai Bootstrap untuk menyebut negatif margin yang
ditempatkan pada awal dan akhir setiap baris dan kolom. Teknik negatif margin sedikit rumit
dan bisa disebut sebagai "trik" yang dipakai Bootstrap dalam membuat sistem grid. Bootstrap
menerapkan margin-right:-15px dan margin-left:-15px ke setiap baris dan kolom.
Jika kita ingin menghapus gutter bawaan ini, tambah class="g-0" ke dalam row seperti contoh
berikut:
17.row_no_gutters.html
2 <div class="row">
6 </div>
7 <div class="row g-0">
8 <div class="col-4 "> Kolom 1 </div>
11 </div>
12 </div>
Efek dari penambahan class="no-gutter" (bawah)
Dalam contoh di atas, row pertama adalah row normal dengan 3 kolom, sedangkan untuk row
kedua saya menambahkan class .g-0 di baris 7. Efeknya, kolom menjadi lebih kecil.
Di Bootstrap 5, Gutter mendapat class tambahan dimana kita men-set gutter untuk
setiap kolom dan baris. Sebagai contoh, tersedia class .g-1 hingga .g-5 untuk mengatur
ukuran gutter. Namun karena efeknya cukup susah dilihat dan jarang terpakai, saya tidak
akan membahas class-class ini.
75
4.11. Nested Row

Ketika membuat layout yang rumit, kita bisa membuat nested row, yakni row di dalam row.
Caranya cukup tempatkan row baru ke dalam column:
18.row_nested.html
2 <div class="row">
3 <div class="col-10">
4 <div class="row">
5 <div class="col-10"> Kolom 1 Nested 1 </div>
7 </div>
8 </div>
10 </div>
11 </div>
Nested row
Dalam contoh ini saya menulis row baru di dalam "Kolom 1". "Kolom 1" sendiri memiliki lebar 10
segmen yang berasal dari class="col-10". Perhatikan bahwa row yang ada di dalam "Kolom 1"
tetap terbagi ke dalam 12 segmen, bukan 10. Sisa 2 segmen lagi menjadi jatah .col-2 di baris 9.
Namun untuk row yang ada di dalam "Kolom 1", terjadi efek overflow karena total lebar baris
sedikit lebih besar daripada lebar kolom. Ini berasal dari tambahan gutter di dalam nested row.
Untuk mengatasinya, bisa dengan menghapus gutter tersebut:
19.row_nested_no_gutters.html
2 <div class="row">
7 </div>
8 </div>
10 </div>
11 </div>
76
Nested row dengan penambahan class no-gutters
Saya menambahkan class g-0 ke dalam nested row di baris 4. Hasilnya, row menjadi sedikit
lebih kecil dan pas "masuk" ke dalam "Kolom 1".
Teknik nested row seperti ini cocok diterapkan untuk layout yang kompleks.
4.12. Row Columns

Dalam contoh-contoh sebelum ini, jumlah kolom baris diatur berdasarkan lebar kolom, yakni
dengan batasan 12 segmen di setiap baris.
Selain itu, Boostrap grid mengizinkan kita mengatur jumlah kolom secara global. Caranya,
tempatkan class .row-cols-* ke dalam tag <div class="row">. Tanda * di sini bisa diganti
dengan jumlah kolom yang diinginkan. Misalnya untuk membuat setiap baris berisi 3 kolom,
classnya adalah .row-cols-3.
Syarat lain untuk membuat tampilan ini, setiap kolom tidak perlu nomor segmen, tapi cukup
tag <div class="col"> saja.
Berikut contoh praktek dari pembuatan row columns:
19a.row_cols.html
2
3 <div class="row row-cols-2">
9 </div>
10
17 </div>
18
19 </div>
77
Gambar: Mengatur jumlah kolom menggunakan class .row-cols-*
Di baris 3 terdapat class .row-cols-2, maka setiap baris akan dibagi sebanyak 2 kolom (setiap
kolom = 6 segmen). Kemudian di baris 11 terdapat class .row-cols-3, maka setiap baris akan
diatur agar muat 3 kolom (setiap kolom = 4 segmen).
Jika kita tetap mengisi jumlah segmen ke dalam class .col, maka segmen tersebut akan di
prioritaskan:
19b.row_cols_segmen.html
12 </div>
Gambar: Mengatur jumlah kolom menggunakan class .row-cols-*
78
Di baris 1 terdapat .row-cols-3, yang berarti setiap baris akan di set sebanyak 3 kolom
(masing-masing dengan lebar 4 segmen). Namun karena ada beberapa kolom yang ditulis
langsung jumlah segmennya, itu akan menimpa aturan .row-cols-3.
Secara default lebar segmen setiap kolom dibagi sama rata, terlepas dari panjang konten yang
ada di dalam kolom tersebut. Berikut contoh yang dimaksud:
19c.row_cols_normal.html
1 <div class="row">
4 <div class="col"> Kolom 3 dengan teks panjang </div>
7 </div>
Gambar: Lebar setiap kolom dibagi sama rata
Jika ingin lebar semua kolom disesuaikan menurut konten yang ada di dalamnya, tambah class
.row-cols-auto ke dalam <div class="row"> seperti contoh berikut:
19d.row_cols_auto.html
1 <div class="row row-cols-auto">
7 </div>
Gambar: Lebar setiap kolom menyesuaikan konten
Efek seperti ini pernah kita bahas dengan class .col-auto, hanya saja sekarang dilakukan
secara global dari row dengan class .row-cols-auto.
79
4.13. Grid Breakpoint

Grid breakpoint mungkin menjadi materi paling rumit dan paling powerful dalam bab ini. Grid
breakpoint adalah kunci perancangan layout responsive di dalam Bootstrap.
Masih ingat dengan mobile-first vs desktop-first? Semua contoh kode yang kita buat sejak awal
bab belum menerapkan kedua prinsip ini. Kolom layout yang kita rancang tidak mengalami
perubahan, kecuali membesar dan mengecil mengikuti lebar layar (dengan proporsi yang
sama).
Dalam konsep mobile-first, yang seharusnya terjadi adalah progressive enhancement, dimana
jika tampilan web menjadi lebih besar, kita bisa menambahkan fitur-fitur baru. Dalam sistem
grid, fitur baru ini di implementasikan dengan perubahan lebar kolom dengan proporsi yang
berbeda atau penambahan kolom baru.
Dengan grid breakpoint, kita bisa mengubah lebar kolom bergantung "jenis breakpoint"-nya.
Sebagai contoh, jika dalam tampilan desktop (layar lebar) sebuah kolom memiliki lebar 6
segmen atau setengah baris, maka ketika dibuka dalam tampilan mobile (layar kecil), kolom
yang sama menjadi 12 segmen atau satu baris penuh. Atau bisa juga ketika di layar mobile,
kolom tersebut hilang sepenuhnya.
Bootstrap 5 memiliki 6 jenis breakpoint yang dibagi menurut lebar layar. Berikut detail dari
setiap breakpoint:
Extra
Small Medium Large Extra large Extra extra large
small
≥576px ≥768px ≥992px ≥1200px ≥1400px
<576px
Lebar
container None 540px 720px 960px 1140px 1400px
maksimum
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Jumlah kolom 12
Lebar gutter 30px (15px di sisi kiri kolom dan 15px di sisi kanan kolom)
Nestable Yes
Column
Yes
ordering
Jika anda pernah belajar CSS3 media query (kode CSS untuk membuat efek responsive), maka
hal yang sama juga berlaku di sini. Sistem grid Bootstrap memiliki breakpoint di titik 576px,
768px, 992px, 1200px, dan 1400px. Jika lebar layar berada di 6 ukuran ini, kita bisa mengubah
"sesuatu" di dalam sistem grid Bootstrap.
Bagaimana caranya?
80
Perhatikan tabel di atas pada bagian class prefix di kolom extra small. Jika lebar web browser
kurang dari 576 pixel, kita bisa memakai class prefix .col-. Maksudnya, untuk membuat kolom
di breakpoint ini, class yang digunakan adalah class="col-3", class="col-6" atau
class="col-12".
Loh, bukannya penamaan class seperti itu sudah kita pakai sejak awal bab? Betul sekali. Secara
tidak langsung kita sudah menggunakan breakpoint extra small.
Bootstrap menggunakan konsep mobile-first. Karena itu, jika sebuah kolom berukuran 6
segmen di breakpoint extra small, maka lebar kolom itu akan sama hingga breakpoint extra
extra large, selama tidak diubah oleh breakpoint diatasnya. Penjelasan ini adalah inti dari
sistem breakpoint Bootstrap.
Untuk lebih memahami, kita akan masuk ke breakpoint small. Di sini class prefix yang dipakai
adalah .col-sm-, yang berarti untuk membuat kolom di breakpoint small, gunakan class
seperti class="col-sm-3", class="col-sm-6" atau class="col-sm-12".
Naik ke breakpoint medium, class prefix yang dipakai adalah .col-md-, yang artinya untuk
membuat kolom di breakpoint ini, class yang digunakan adalah class="col-md-3",
class="col-md-6" atau class="col-md-12".
Sampai di sini kita sudah bisa melihat pola pembuatan class yang rumusnya sebagai berikut:
col-<jenis_breakpoint>-<lebar_segmen>.
Rumus ini berlaku untuk semua breakpoint, kecuali extra small yang tidak butuh prefix
<jenis_breakpoint>.
Di dalam breakpoint large, class prefix yang dipakai adalah .col-lg-. Artinya untuk membuat
kolom di breakpoint ini, class yang digunakan adalah class="col-lg-3", class="col-lg-6"
atau class="col-lg-12".
Lanjut, untuk breakpoint extra large, class prefix yang dipakai adalah .col-xl-. Dengan
demikian untuk membuat kolom di breakpoint ini, class yang digunakan adalah class="col-
xl-3", class="col-xl-6" atau class="col-xl-12".
Terakhir, untuk breakpoint extra extra large, class prefix yang dipakai adalah .col-xxl-.
Artinya untuk membuat kolom di breakpoint ini, class yang digunakan adalah class="col-xxl-
3", class="col-xxl-6" atau class="col-xxl-12".
Agar lebih jelas, kita akan masuk ke dalam contoh praktek. Pertama, saya akan buat kolom
untuk breakpoint extra small dengan kode berikut:
20.breakpoint_extra_small.html
2 <div class="row">
81

6 </div>
7 </div>
Saya yakin anda sudah paham maksud kode ini karena sudah berulang kali kita pakai. Saya
membagi row menjadi 3 kolom, dimana Kolom 1 mengambil tempat sebesar 2 segmen, Kolom 2
sebanyak 6 segmen dan Kolom 3 sebesar 4 segmen. Tidak ada yang baru di sini.
Ketika dijalankan, buka Responsive Mode di web browser lalu perbesar / perkecil lebar web
browser dan perhatikan apa yang terjadi saat lebar web browser mendekati titik 576px, 768px,
992px, 1200px dan 1400px.
Tampilan saat lebar jendela web browser 576 pixel
Saat lebar jendela web browser mendekati ke 5 titik tersebut, kita bisa lihat perubahan
proporsi lebar baris grid. Seolah-olah lebar setiap baris "lompat" untuk mengisi sisi kiri dan
kanan jendela web browser.
Breakpoint Extra small berefek ketika lebar web browser kurang dari 576 pixel. Namun karena
Bootstrap menggunakan metode mobile-first, efek dari breakpoint extra-small akan berlaku ke
82
atas selama tidak diubah pada breakpoint lain.
Mari kita tambahkan breakpoint Small ke dalam contoh sebelumnya:
21.breakpoint_small.html
2 <div class="row">
3 <div class="col-2 col-sm-6"> Kolom 1 </div>
6 </div>
7 </div>
Perhatikan cara penulisan class di atas. Pada Kolom 1 saya menambah col-sm-6, padahal class
col-2 sudah ada sebelumnya. Kode class="col-2 col-sm-6" ini bisa dibaca: pada saat berada
di breakpoint extra-small, ambil tempat sebesar 2 segmen, namun ketika berada di breakpoint
small, ambil tempat sebesar 6 segmen.
Untuk bisa melihat efek ini, ubah lebar web browser antara kurang dari 576px dan di atas
576px:
Tampilan ketika jendela web browser berada di breakpoint extra small (< 576px)
Tampilan ketika jendela web browser berada di breakpoint small (576px – 767px)
Ketika berada di breakpoint extra small, yakni lebar web browser kurang dari 576 pixel, ukuran
Kolom 1 mengambil tempat sebanyak 2 segmen. Namun begitu web browser mencapai lebar
di atas 576 pixel, Kolom 1 berubah mengambil 6 segmen. Untuk breakpoint di atasnya, tetap
berukuran 6 segmen.
Hal yang sama juga berlaku untuk Kolom 2 dan Kolom 3, dimana proporsi lebar segmen akan
berubah di breakpoint small dan extra-small. Breakpoint small sendiri berada dalam rentang
576px – 767px.
Baik, mari kita tambah kode untuk breakpoint medium:
83
22.breakpoint_medium.html
2 <div class="row">
3 <div class="col-2 col-sm-6 col-md-2"> Kolom 1 </div>
6 </div>
7 </div>
Sekarang ada penambahan class baru di Kolom 1, yakni col-md-2. Namun saya yakin anda
sudah bisa menebak apa maksudnya. Yup, begitu lebar jendela web browser berada di
breakpoint medium, ukuran Kolom 1 akan mengambil tempat sebesar 2 segmen. Breakpoint
medium ini berada dalam rentang 768px – 991px.
Tampilan ketika jendela web browser berada di breakpoint medium (768px – 991px)
Ketika berada dalam breakpoint medium, proporsi row menjadi 2-2-8. Ini akan berlaku untuk
breakpoint lain di atasnya. Namun begitu masuk ke breakpoint small, proporsi row akan
kembali menjadi 6-4-2, dan saat masuk ke breakpoint extra small, proporsinya menjadi 2-6-4.
Sekarang giliran breakpoint large:
23.breakpoint_large.html
2 <div class="row">
3 <div class="col-2 col-sm-6 col-md-2 col-lg-4"> Kolom 1 </div>
6 </div>
7 </div>
Tampilan ketika jendela web browser berada di breakpoint large (992px – 1200px)
Ketika berada di breakpoint large, yakni saat lebar jendela web browser antara 992px –
1200px, proporsi kolom akan menjadi 4-4-4, sesuai dengan class col-lg-4. Proporsi ini
berlaku untuk breakpoint diatasnya, namun ketika masuk ke breakpoint medium, small dan
extra-small, proporsi yang dipakai sesuai dengan yang tertulis dalam class.
84
Lanjut, kita masuk ke breakpoint extra large:
24.breakpoint_extra_large.html
2 <div class="row">
3 <div class="col-2 col-sm-6 col-md-2 col-lg-4 col-xl-5"> Kolom 1 </div>
6 </div>
7 </div>
Tampilan ketika jendela web browser berada di breakpoint extra large (> 1200px)
Breakpoint extra large aktif saat lebar web browser antara 1200px - 1400px. Jika kondisi ini
terpenuhi, proporsi lebar kolom menjadi 5-2-5,sesuai dengan class col-xl-5, col-xl-2 dan
col-xl-5.
Terakhir, kita bisa tambah 1 lagi breakpoint extra extra large:
24a.breakpoint_extra_extra_large.html
2 <div class="row">
3 <div class="col-2 col-sm-6 col-md-2 col-lg-4 col-xl-5 col-xxl-1">
4 Kolom 1 </div>
6 Kolom 2 </div>
8 Kolom 3 </div>
9 </div>
10 </div>
Tampilan ketika jendela web browser berada di breakpoint extra extra large (> 1200px)
Breakpoint extra extra large aktif saat lebar web browser di atas 1400px. Jika kondisi ini
terpenuhi, proporsi lebar kolom menjadi 1-8-3 sesuai dengan class col-xxl-1, col-xxl-8 dan
col-xxl-3.
Breakpoint extra extra large (xxl) merupakan fitur baru di Bootstrap 5. Di Bootstrap 4,
maksimal hanya sampai breakpoint extra large (xl) saja.
85
Inilah cara penggunaan grid breakpoint Bootstrap. Kita bisa mengatur proporsi lebar kolom di
6 jenis breakpoint. Yang juga harus diingat, sistem breakpoint ini berlalu ke atas, dari mobile
ke desktop, dan bukan sebaliknya.
Perhatikan kode berikut:
25.breakpoint_large_only.html
2 <div class="row">
3 <div class="col-lg-2"> Kolom 1 </div>
6 </div>
7 </div>
Di sini saya hanya mencantumkan class untuk breakpoint large, bagaimana hasilnya?
Pada breakpoint large, proporsi kolom adalah 2-6-4
Pada breakpoint medium, proporsi kolom adalah menjadi 12-12-12
Jika ditulis seperti ini, proporsi kolom 2-6-4 hanya berlaku untuk breakpoint large ke atas
(termasuk extra-large dan extra-extra-large). Di breakpoint medium, small dan extra-small
seolah-olah kita tidak memberikan proporsi apa-apa, yang berlaku adalah proporsi default,
yakni 12-12-12 dengan setiap kolom mengambil full 1 baris.
Jadi, proporsi class berlaku ke atas selama tidak ditimpa oleh proporsi di atasnya. Inilah
penerapan konsep mobile-first di Bootstrap.
Sebagai latihan untuk menguji pemahaman tentang sistem grid breakpoint, saya ingin
membuat tampilan layout dengan bentuk berikut:
86
Tampilan kode untuk breakpoint extra-small, small, medium dan large
Saya ingin ketika berada di layar kecil (breakpoint extra-small), ketiga kolom saling bertumpuk
dengan setiap kolom mengambil panjang 1 baris. Saat masuk ke breakpoint small, kolom 1
mengambil tempat 1 baris panjang, sedangkan Kolom 2 dan 3 saling berbagi di baris bawah.
Ketika ditampilkan pada breakpoint medium, Kolom 1 masih memenuhi 1 baris, namun untuk
Kolom 2 menjadi lebih lebar dan Kolom 3 mengambil sedikit tempat di kanan baris kedua.
Terakhir untuk breakpoint large, ketiga kolom tampil dalam 1 baris saja. Dapatkah anda
merancang kode HTML untuk sistem grid seperti ini? Ingat jika dalam 1 row total jumlah
segmen lebih dari 12, maka kolom berikutnya akan pindah ke bawah.
Baik, berikut kode yang saya gunakan:
26.breakpoint_latihan.html
2 <div class="row">
6 </div>
7 </div>
Breakpoint dan Column Ordering

Bagaimana jika kita ingin pada breakpoint tertentu urutan kolom berubah? Misalnya ketika di
breakpoint small, kolom 1 berada paling kiri namun begitu masuk ke breakpoint large, kolom 1
pindah ke kanan? Tidak masalah, Bootstrap juga sudah punya fitur untuk itu.
87
Masih ingat materi tentang column ordering? Di sana terdapat class seperti order-1, order-2,
order-first dan order-last. Bagaimana jika saya sebut bahwa terdapat juga order-md-1,
order-xl-2, order-sm-first dan order-md-last? Betul, efek yang sama juga berlaku. Kita
membawa sistem column ordering ke dalam breakpoint:
27.breakpoint_ordering.html
2 <div class="row">
3 <div class="col-6 order-sm-2 order-lg-3"> Main Content</div>
4 <div class="col-3 order-sm-1 order-lg-2"> Sidebar 1</div>
5 <div class="col-3 order-sm-3 order-lg-1"> Sidebar 2</div>
6 </div>
7 </div>
Proporsi lebar setiap kolom dalam kode ini akan tetap di 6-3-3 karena tidak ada tambahan
class untuk setiap breakpoint (col-6, col-3 dan col-3).
Namun perhatikan class order yang ada. Untuk breakpoint small, "Sidebar 1" akan berada di
sisi kiri (order-sm-1), diikuti oleh "Main Content" (order-sm-2), dan di sisi kanan terdapat
"Sidebar 2" (order-sm-3). Urutan ini berlalu juga untuk breakpoint medium.
Ketika masuk ke breakpoint large, urutan kolom berubah. "Sidebar 2" sekarang berada di sisi
kiri (order-lg-1), diikuti oleh "Sidebar 1" di tengah (order-lg-2), dan di sisi kanan terdapat
"Main Content" (order-lg-3).
Untuk breakpoint extra-small, berlaku urutan default sesuai penulisan kode karena saya tidak
menulis class ordering untuk breakpoint tersebut.
Efek ordering untuk breakpoint extra-small, small, medium dan large
Sebagai latihan, bisakah rancang kode untuk tampilan berikut ini?
88
Tampilan untuk breakpoint extra-small, small, medium dan large
Dari tampilan di atas, tidak ada perbedaan untuk breakpoint extra-small dan small. Setiap
kolom memanjang memenuhi satu baris dan bertumpuk secara berurutan dari "Main Content",
"Sidebar 1" dan "Sidebar 2". Dalam kasus ini, kita cukup tulis class untuk breakpoint extra-
small yang juga akan terbawa ke breakpoint small.
Untuk breakpoint medium, lebar kolom berubah dan urutan kolom juga berubah. Sekarang
urutannya menjadi "Sidebar 1", "Main Content" dan "Sidebar 2".
Ketika sampai ke breakpoint large, lebar kolom kembali berubah namun urutan kolom sama
seperti medium.
Silahkan coba rancang sebentar class untuk setiap kolom karena ini akan menguji pemahaman
anda seputar breakpoint dan column ordering di Bootstrap.
Sudah? Bisa samakan dengan kode di bawah ini:
28.breakpoint_ordering_latihan.html
2 <div class="row">
3 <div class="col-12 col-md-9 col-lg-8 order-md-2"> Main Content</div>
4 <div class="col-12 col-md-3 col-lg-2 order-md-1"> Sidebar 1</div>
5 <div class="col-12 col-md-12 col-lg-2 order-md-3"> Sidebar 2</div>
6 </div>
7 </div>
Breakpoint Row Columns

Row columns juga mendukung breakpoint, dengan demikian kita bisa mengatur jumlah kolom
89
pada setiap baris untuk breakpoint tertentu. Format penulisan class adalah: row-cols-
<breakpoint>-<jumlah_kolom> . Berikut contoh penggunaannya:
28a.row_cols_auto.html
1 <div class="row row-cols-1 row-cols-md-3 row-cols-lg-4">
11 </div>
Gambar: Penggunaan breakpoint pada class row-cols
Penambahan class .row-cols-1, .row-cols-md-3, dan .row-cols-lg-4 akan membuat 1 baris

diisi 1 kolom untuk breakpoint extra-small dan small, lalu 1 baris diisi 3 kolom untuk
breakpoint medium, serta 1 baris diisi 4 kolom untuk breakpoint large ke atas.
Breakpoint row columns ini akan berguna untuk komponen bootstrap yang terdiri dari banyak
element seperti Card.
Breakpoint dan Offset

Selain mengurutkan kolom berdasarkan breakpoint, kita juga menggabung breakpoint dengan
offset. Offset sendiri adalah sistem di Bootstrap untuk melompati kolom.
Cara penulisan class offset mirip seperti perpaduan breakpoint dan column ordering. Sewaktu
membahas tentang offset, class yang kita pakai adalah offset-2, offset-4 atau offset-8.
Dengan breakpoint, maka terdapat offset-md-2, offset-lg-4 atau offset-xl-8 tergantung
90
breakpoint yang ingin dipakai.
Berikut contoh penggunaannya:
29.breakpoint_offset.html
2 <div class="row">
3 <div class="col-7 offset-md-2 offset-lg-0 "> Kolom 1</div>
4 <div class="col-3 offset-lg-2"> Kolom 2</div>
5 </div>
6 </div>
Mari analisis kode ini. Baris grid terdiri dari 2 kolom, dengan pembagian col-7 dan col-3.
Karena tidak ditemukan class breakpoint lain, maka proporsi 7-3 ini berlaku untuk semua
breakpoint.
Namun karena jumlah segmen hanya 10 (hasil dari 7 + 3), maka terdapat 2 segmen kosong di
sisi kanan. Ini berlaku untuk breakpoint extra-small dan small.
Ketika sampai ke breakpoint medium, class offset-md-2 akan aktif. Ini membuat 2 segmen
ruang kosong akan berada di sebelah kiri "Kolom 1".
Lanjut, ketika sampai ke breakpoint large, class offset-lg-0 di "Kolom 1" akan aktif, akibatnya
offset 2 dari breakpoint medium diubah menjadi 0. Kemudian di "Kolom 2" class offset-lg-2
akan aktif sehingga terdapat 2 segmen ruang kosong sebelum Kolom 2.
Berikut hasil tampilan dari kode di atas:
Efek offset untuk breakpoint extra-small, small, medium dan large
91
Latihan berikutnya, bisakah membuat layout berikut ini?
Gambar: Efek offset untuk breakpoint extra-small, small, medium dan large
Kali ini terdapat 3 kolom dan 1 ruang kosong untuk offset. Offset akan bergeser dari
breakpoint extra-small, small, medium dan large. Silahkan coba rancang sebentar.
Baik, berikut kode yang saya gunakan:
30.breakpoint_offset_latihan.html
2 <div class="row">
3 <div class="col-3 offset-lg-3"> Kolom 1</div>
4 <div class="col-3 offset-md-3 offset-lg-0"> Kolom 2</div>
5 <div class="col-3 offset-sm-3 offset-md-0"> Kolom 3</div>
6 </div>
7 </div>
Ketika naik ke breakpoint selanjutnya, kita perlu me-nol kan kembali efek offset. Inilah fungsi
dari offset-md-0 dan offset-lg-0.
Breakpoint Container
Salah satu fitur baru di Bootstrap 5 adalah, class .container sekarang mendukung tambahan
breakpoint.
Secara default, class .container memiliki ruang kosong (margin) di sisi kiri dan kanan, namun
begitu masuk ke breakpoint extra small (lebar layar kurang dari 576px), margin ini akan hilang
dan container melebar memenuhi 100% lebar layar. Berikut contoh tampilan yang dimaksud:
30a.breakpoint_container.html
2 <div class="row">
92
3 <div class="col"> Lebar 100% pada breakpoint extra small</div>

4 </div>
5 </div>
Gambar: Container dengan margin (atas), dan tanpa margin (bawah)
Gambar pertama (atas) adalah tampilan class .container di breakpoint large. Perhatikan ada
margin di sisi kiri dan kanan. Sedangkan gambar kedua (bawah) adalah tampilan untuk
breakpoint extra small. Di sini tidak ada lagi margin dan class .container melebar 100%
sepanjang web browser.
Di Bootstrap 5, kita bisa mengatur kapan container ini melebar 100%. Caranya, ganti
penggunaan class .container dengan salah satu dari .container-sm, .container-md,
.container-lg, .container-xl, dan .container-xxl. Berikut contoh prakteknya:
30b.breakpoint_container_all.html
2 <div class="row">
3 <div class="col"> Lebar 100% pada breakpoint extra small</div>
4 </div>
5 </div>
6
7 <div class="container-sm">
8 <div class="row">
9 <div class="col"> Lebar 100% pada breakpoint small</div>
10 </div>
11 </div>
12
13 <div class="container-md">
15 <div class="col"> Lebar 100% pada breakpoint medium</div>
16 </div>
17 </div>
18
19 <div class="container-lg">
21 <div class="col"> Lebar 100% pada breakpoint large</div>
93
22 </div>
23 </div>
24
25 <div class="container-xl">
27 <div class="col"> Lebar 100% pada breakpoint extra large</div>
28 </div>
29 </div>
30
31 <div class="container-xxl">
33 <div class="col"> Lebar 100% pada breakpoint extra extra large</div>
34 </div>
35 </div>
Gambar: Penerapan breakpoint pada class .container
Pada saat kode di atas dijalankan, tes ubah lebar web browser. Setiap container akan melebar
ke 100% tergantung breakpoint yang sedang aktif.
4.14. Perancangan Layout Dengan Grid

Sebagai materi terakhir dalam bab ini, saya ingin membuat desain layout menggunakan
Bootstrap Grid.
Komponen yang biasa ada di sebuah website mencakup logo, menu navigasi, sidebar, main
content, dan footer. Inilah yang akan kita susun untuk membentuk design tampilan. Agar lebih
sederhana, isi komponen hanya berbentuk teks biasa.
Kita berangkat dari versi mobile dahulu, yakni breakpoint extra-small. Berikut tampilan yang
akan saya rancang:
94
Tampilan layout extra-small
Ada 2 cara untuk membuat tampilan ini. Pertama, tempatkan semua kolom dalam 1 row. Atau
cara kedua, bagi ke dalam beberapa row.
Loh, bukannya jika dibagi menjadi beberapa row akan ada jarak dengan baris di atasnya
(seperti contoh-contoh sebelum ini)? Jarak antar row tersebut berasal dari kode CSS yang
saya tambah manual, bukan bawaan Bootstrap. Berikut kode yang dimaksud:
.row {
margin-top: 1em;
}
Secara default, tidak ada jarak (margin) antara 1 row dengan row lain. Dengan demikian saya
akan bagi tampilan di atas ke dalam 3 row:
31.latihan_layout_xs.html
1 <style>
2 [class^="col"] {
5 padding: 0.4em;
6 }
7 </style>
2 <div class="row">
3 <div class="col-12"> Logo</div>
4 <div class="col-12"> Menu Navigation</div>
5 </div>
6 <div class="row">
7 <div class="col-12"> Main Content</div>
8 <div class="col-12"> Sidebar</div>
9 </div>
95
11 <div class="col-12"> Footer 1</div>

14 </div>
15 </div>
Semua kolom menggunakan 12 segmen agar tampil pas 1 baris (100% width).
Lalu ketika masuk ke breakpoint small, saya ingin tampilannya berubah menjadi berikut:
Tampilan layout small
Sekarang logo dan menu navigasi saling bersebelahan satu sama lain. Begitu pula dengan
sidebar dan main content. Untuk membuatnya, kita perlu menambah class .col-sm-x agar
lebar setiap komponen berubah saat di breakpoint small. Berikut kode yang diperlukan:
32.latihan_layout_sm.html
2 <div class="row">
3 <div class="col-12 col-sm-2"> Logo</div>
4 <div class="col-12 col-sm-10"> Menu Navigation</div>
5 </div>
6 <div class="row">
7 <div class="col-12 col-sm-9"> Main Content</div>
8 <div class="col-12 col-sm-3 order-sm-first"> Sidebar</div>
9 </div>
11 <div class="col-12 col-sm-12"> Footer 1</div>
14 </div>
15 </div>
Saya menambah beberapa class untuk breakpoint small. Khusus untuk "Sidebar", terdapat
tambahan class order-sm-first agar sidebar pindah ke sisi kiri, karena secara default berada
di sisi kanan.
Lanjut ke breakpoint medium, berikut tampilan yang saya inginkan:
96
Tampilan layout medium
Pada layout medium ini, yang berubah hanya bagian footer saja. Sekarang ketiga footer
memanjang dan hanya mengambil 1 baris. Berikut kode yang diperlukan:
33.latihan_layout_md.html
2 <div class="row">
5 </div>
6 <div class="row">
7 <div class="col-12 col-sm-9"> Main Content</div>
8 <div class="col-12 col-sm-3 order-sm-first"> Sidebar</div>
9 </div>
11 <div class="col-12 col-sm-12 col-md-6"> Footer 1</div>
14 </div>
15 </div>
Perubahannya ada di baris 11, 12 dan 13. Kali ini terdapat tambahan class breakpoint col-md-6
dan col-md-3 agar footer berada dalam 1 baris.
Kita lanjut ke breakpoint large:
Tampilan layout large
Untuk tampilan large, saya ingin mengurangi proporsi sidebar serta membagi footer sama
besar. Berikut kode yang diperlukan:
34.latihan_layout_lg.html
97
2 <div class="row">
5 </div>
6 <div class="row">
7 <div class="col-12 col-sm-9 col-lg-10"> Main Content</div>
8 <div class="col-12 col-sm-3 order-sm-first col-lg-2"> Sidebar</div>
9 </div>
11 <div class="col-12 col-sm-12 col-md-6 col-lg-4"> Footer 1</div>
14 </div>
15 </div>
Tambahan class terdapat di baris 7, 8 serta 11, 12 dan 13. Komponen "Main Content" sekarang
menjadi 10 segmen, sidebar 2 segmen dan footer masing-masing 4 segmen.
Untuk breakpoint extra large dan extra extra large, saya tidak akan mengubah tampilan yang
ada. Tapi saya yakin anda sudah bisa menambah class breakpoint sendiri jika diinginkan.
Jalankan file di atas, lalu ubah-ubah lebar jendela web browser. Secara otomatis semua
komponen akan menyesuaikan lebar dan posisi sesuai class yang ada. Tanpa Bootstrap grid,
kita butuh kode CSS yang cukup panjang untuk membuatnya.
---
Dalam bab ini kita telah bahas salah satu materi inti dari Bootstrap, yakni Bootstrap Grid
System. Berikutnya kita akan masuk ke modul Bootstrap Utilities.
------------------------------------------------------------------
=====================================================================
98
Bootstrap Utilities & Helpers
5. Bootstrap Utilities & Helpers
Bootstrap utilities & helpers berisi kumpulan class CSS untuk menghasilkan efek sederhana.
Sebenarnya, sebagian besar dari class ini bisa kita buat sendiri menggunakan kode CSS yang
tidak terlalu kompleks, akan tetapi daripada reinvent the wheel, lebih baik gunakan class yang
sudah disediakan Bootstrap.
Utilities class ini juga bisa disebut sebagai "class bantu" karena berfungsi untuk memberi efek
tambahan kepada element HTML. Diantaranya untuk mengatur warna background, mengatur
warna teks, mengatur besar margin dan padding, mengubah posisi element, menerapkan float
dan clearfix, serta mengatur lebar dan tinggi element. Beberapa class juga menerapkan sistem
breakpoint sehingga kita bisa merancang tampilan responsive yang lebih fleksibel.
Sedikit catatan, hampir semua utilities class Bootstrap menggunakan perintah tambahan !
important di dalam kode CSS. Sehingga jika kita ingin menimpa efek tersebut, harus menulis
juga perintah !important. Namun sebelum sampai ke sini, lebih baik tidak memakai utilities
class sama sekali dan buat efek yang sama langsung dari kode CSS saja.
5.1. Colors
Colors adalah utilities class Bootstrap yang berisi class untuk mengubah warna teks. Cara
penggunaannya sangat mudah, cukup tambah nama class ke dalam element HTML yang ingin
diubah warna teksnya.
Dalam CSS, untuk mengubah warna teks kita bisa pakai property color. Misalnya untuk
mengubah warna teks menjadi merah bisa menggunakan color:red. Di dalam Bootstrap,
terdapat 13 class untuk mengubah warna teks, yakni:
✔ .text-primary
✔ .text-secondary
✔ .text-success
✔ .text-danger
✔ .text-warning
✔ .text-info
✔ .text-light
✔ .text-dark
✔ .text-body
99
✔ .text-muted
✔ .text-white
✔ .text-black-50
✔ .text-white-50
01.text_color.html
1 <style>
2 div > div {
3 border: 1px solid black;
4 width: 120px;
5 height: 50px;
6 margin: 0.3em;
7 padding: 10px 0;
8 text-align: center;
9 float: left;
10 }
11 </style>
2 <div class="text-primary">.text-primary</div>
3 <div class="text-secondary">.text-secondary</div>
4 <div class="text-success">.text-success</div>
5 <div class="text-danger">.text-danger</div>
6 <div class="text-warning">.text-warning</div>
7 <div class="text-info">.text-info</div>
8 <div class="text-light">.text-light</div>
9 <div class="text-dark">.text-dark</div>
10 <div class="text-body">.text-body</div>
11 <div class="text-muted">.text-muted</div>
12 <div class="text-white">.text-white</div>
13 <div class="text-black-50">.text-black-50</div>
14 <div class="text-white-50">.text-white-50</div>
15 </div>
Hasil penggunaan class color Bootstrap
Terlihat warna teks dari setiap kotak berubah sesuai dengan nama classnya. Penamaan warna
100
ini juga dipakai pada banyak komponen Bootstrap lain, misalnya jika kita menemukan suatu
class bernama "primary", hasilnya akan menjadi warna biru, atau untuk class bernama
"secondary" hasilnya menjadi warna abu-abu, dst.
Khusus untuk class .text-light, .text-white dan .text-white-50 efek warna tidak bisa
terlihat karena menyatu dengan background putih. Kita harus mengubah warna background
menjadi gelap agar bisa melihat efeknya:
02.text_color_black.html
1 <style>
2 div > div {
3 border: 1px solid white;
4 ...
5 }
6 body {
7 background-color: black;
8 }
9 </style>
Hasil penggunaan class color Bootstrap dengan background hitam
Efek perubahan warna teks juga berlaku untuk link atau tag <a>. Berikut contohnya:
03.text_color_link.html
2 <div><a href="#" class="text-primary">.text-primary</a></div>
3 <div><a href="#" class="text-secondary">.text-secondary</a></div>
4 <div><a href="#" class="text-success">.text-success</a></div>
5 <div><a href="#" class="text-danger">.text-danger</a></div>
6 <div><a href="#" class="text-warning">.text-warning</a></div>
7 <div><a href="#" class="text-info">.text-info</a></div>
8 <div><a href="#" class="text-light">.text-light</a></div>
9 <div><a href="#" class="text-dark">.text-dark</a></div>
10 <div><a href="#" class="text-body">.text-body</a></div>
11 <div><a href="#" class="text-muted">.text-muted</a></div>
12 <div><a href="#" class="text-white">.text-white</a></div>
13 <div><a href="#" class="text-black-50">.text-black-50</a></div>
14 <div><a href="#" class="text-white-50">.text-white-50</a></div>
15 </div>
101
Hasil penggunaan class color Bootstrap untuk link
Di sini class warna saya tempatkan ke dalam tag <a>, hasilnya ketika cursor mouse berada di
atas teks, terjadi efek hover dari link. Efek hover ini juga sudah ditangani oleh Bootstrap.
Sebagai contoh, teks dengan class .text-success akan hijau muda. Ketika cursor mouse
berada di atasnya, warna teks menjadi sedikit gelap dengan tambahan efek garis bawah
(underline).
5.2. Background Color

Selain mengubah warna teks, Bootstrap juga menyediakan class untuk mengubah warna
background. Terdapat 10 class untuk mengubah warna background:
✔ .bg-primary
✔ .bg-secondary
✔ .bg-success
✔ .bg-danger
✔ .bg-warning
✔ .bg-info
✔ .bg-light
✔ .bg-dark
✔ .bg-white
✔ .bg-transparent
Dengan mengubah warna background, warna teks tidak langsung mengikuti. Kita perlu
menggunakan kombinasi color dan background color jika ingin mengubah warna teks dan
warna background sekaligus. Berikut contohnya:
04.background_color.html
2 <div class="bg-primary text-white">.bg-primary</div>
3 <div class="bg-secondary text-white">.bg-secondary</div>
4 <div class="bg-success text-white">.bg-success</div>
5 <div class="bg-danger text-white">.bg-danger</div>
102
6 <div class="bg-warning text-dark">.bg-warning</div>

7 <div class="bg-info text-white">.bg-info</div>
8 <div class="bg-light text-dark">.bg-light</div>
9 <div class="bg-dark text-white">.bg-dark</div>
10 <div class="bg-white text-dark">.bg-white</div>
11 <div class="bg-transparent text-dark">.bg-transparent</div>
12 </div>
Hasil penggunaan class background color Bootstrap
Dalam contoh di atas, saya mengombinasikan class text-color dengan bg-color. Perhatikan
bahwa Bootstrap memiliki sebuah "theme" sendiri, dimana jika class itu mengandung kata
primary, warnanya akan menjadi biru, begitu juga dengan warna-warna lain.
Bagaimana jika kita ingin mengganti warna-warna ini? Bootstrap menyarankan untuk
mengubahnya dari Sass, sebuah "bahasa pemrograman khusus CSS" atau lebih tepat disebut
sebagai CSS pre-processor. Pembahasan mengenai Sass sendiri cukup luas sehingga tidak akan
saya bahas dalam buku ini. Meskipun begitu, kita tetap bisa menimpa warna-warna ini dari
kode CSS biasa.
Sebagai tambahan, saya juga sarankan untuk melihat langsung kode CSS yang dipakai
Bootstrap dari Developer Tools atau Inspect Element. Tujuannya agar kita bisa mempelajari
bagaimana Bootstrap bekerja.
Menggunakan inspect element untuk melihat kode CSS yang dipakai Bootstrap
103
Dalam gambar di atas, terlihat bahwa secara internal class .bg-success menggunakan kode
CSS background-color: #28a745 !important .
Background Color Gradient

Bootstrap 5 menambah class baru untuk membuat efek gradient ke dalam warna background.
Caranya, tambah class .bg-gradient seperti contoh berikut:
04a.background_color_gradient.html
1 <style>
2 div > div {
4 width: 200px;
5 height: 100px;
6 margin: 0.3em;
7 padding: 35px 0;
9 float: left;
10 }
11 </style>
2 <div class="bg-primary text-white bg-gradient">.bg-primary</div>
3 <div class="bg-secondary text-white bg-gradient">.bg-secondary</div>
4 <div class="bg-success text-white bg-gradient">.bg-success</div>
5 <div class="bg-danger text-white bg-gradient">.bg-danger</div>
6 <div class="bg-warning text-dark bg-gradient">.bg-warning</div>
7 <div class="bg-info text-white bg-gradient">.bg-info</div>
8 <div class="bg-dark text-white bg-gradient">.bg-dark</div>
9 </div>
Gambar: Efek gradient untuk background color
Dengan tambahan class .bg-gradient, warna background memiliki gradasi di bagian atas. Efek
yang dihasilkan memang tidak terlalu terlihat, tapi jika diperhatikan dengan seksama warna di
sisi atas sedikit memutih dibandingkan warna di sisi bawah element.
104
5.3. Borders
Borders adalah utility class Bootstrap yang dipakai untuk membuat bingkai (border). Selain
menambah border, tersedia juga class untuk mengatur warna border, ketebalan border, serta
membuat efek sudut melengkung (border radius).
Untuk menambahkan border ke sebuah element, Bootstrap menyediakan 5 class:

✔ .border
✔ .border-top
✔ .border-end
✔ .border-bottom
✔ .border-start
Kelima class ini disebut sebagai additive class karena dipakai untuk menambah efek border.
Salah satu efek dari dukungan RTL (right-to-left) di Bootstrap 5 adalah, terdapat
perubahan nama class dari arah left dan right menjadi start dan end.
Sebagai contoh, sebelumnya di Bootstrap 4 terdapat class bernama .border-left dan

.border-right. Di Bootstrap 5 keduanya diganti dengan .border-start dan .border-end.
Perubahan nama ini berlaku di hampir semua class Bootstrap lain, sehingga butuh waktu
penyesuaian bagi yang sudah terbiasa menggunakan nama arah left dan right.
Class .border dipakai untuk membuat bingkai di semua sisi element, yakni top, end (right),
bottom dan start (left). Sedangkan class lain akan menambah bingkai di satu sisi saja sesuai
dengan nama masing-masing class. Sebagai contoh, class .border-bottom hanya menambah
border di sisi bawah saja. Berikut contoh penggunaannya:
05.border_additive.html
1 <style>
2 div > div {
3 height: 150px;
4 width: 150px;
5 float: left;
6 margin: 1em;
8 line-height: 140px;
9 }
10 </style>
2 <div class="border">.border</div>
3 <div class="border-top">.border-top</div>
4 <div class="border-end">.border-end</div>
5 <div class="border-bottom">.border-bottom</div>
6 <div class="border-start">.border-start</div>
105
7 </div>
Hasil dari class penambahan border (border additive)
Secara default, border berwarna abu-abu yang nantinya bisa bisa tukar dengan warna lain.
Selain menambahkan border, tersedia juga class untuk menghapus border atau subtractive
class. Berikut 5 class tersebut:
✔ .border-0
✔ .border-top-0
✔ .border-end-0
✔ .border-bottom-0
✔ .border-start-0
Penulisannya mirip seperti additive class, namun kali ini dengan akhiran (suffix) angka -0.
Class .border-0 akan menghapus border di semua sisi, yakni top, end, bottom dan start.
Sedangkan class lainnya dipakai untuk menghapus bingkai di satu sisi saja sesuai nama class.
Sebagai contoh, class .border-start-0 hanya menghapus bingkai di sisi start (kiri) saja.
06.border_subtractive.html
1 <style>
2 div > div {
3 height: 150px;
4 width: 150px;
5 float: left;
6 margin: 1em;
10 }
11 </style>
2 <div class="border-0">.border-0</div>
3 <div class="border-top-0">.border-top-0</div>
4 <div class="border-end-0">.border-end-0</div>
5 <div class="border-bottom-0">.border-bottom-0</div>
6 <div class="border-start-0">.border-start-0</div>
106
7 </div>
Hasil dari class pengurangan border (border subtractive)
Sebelum masuk ke kode HTML, saya memakai kode CSS untuk membuat border dari property
border: 1px solid black di baris 9. Selanjutnya class border Bootstrap menghapus bingkai di
setiap sisi sesuai nama class yang dipakai.
Border Color
Bootstrap juga menyediakan class khusus untuk mengubah warna bingkai (border-color).
Nama class yang digunakan sama seperti nama class warna teks dan warna background.
Terdapat 9 class Bootstrap untuk mengubah warna border:
✔ .border-primary
✔ .border-secondary
✔ .border-success
✔ .border-danger
✔ .border-warning
✔ .border-info
✔ .border-light
✔ .border-dark
✔ .border-white
07.border_color.html
1 <style>
2 div > div {
3 height: 100px;
4 width: 100px;
5 float: left;
6 margin: 0.3em;
8 padding: 20px 10px;
9 }
10 </style>
107
2 <div class="border border-primary">.border-primary</div>
3 <div class="border border-secondary">.border-secondary</div>
4 <div class="border border-success">.border-success</div>
5 <div class="border border-danger">.border-danger</div>
6 <div class="border border-warning">.border-warning</div>
7 <div class="border border-info">.border-info</div>
8 <div class="border border-light">.border-light</div>
9 <div class="border border-dark">.border-dark</div>
10 <div class="border border-white">.border-white</div>
11 </div>
Hasil penggunaan class border color Bootstrap
Sama seperti pada kasus text color, efek dari class .border-light dan .border-white baru
terlihat jika menggunakan warna background gelap:
08.border_color_black.html
1 <style>
2 ...
3 body{
4 background-color: black;
5 color: white;
6 }
7 </style>
Hasil penggunaan class border color Bootstrap dengan background hitam
108
Border Width
Untuk mengatur ketebalan border, Bootstrap menyediakan 5 class tambahan, yakni:
✔ .border-1
✔ .border-2
✔ .border-3
✔ .border-4
✔ .border-5
Semakin besar nilai class, semakin besar juga ketebalan border. Berikut contoh
penggunaannya:
08a.border_width.html
2 <div class="border border-primary border-1">.border-1</div>
7 </div>
Gambar: Hasil penggunaan class border width Bootstrap
Border Radius
Di dalam CSS, property border-radius dipakai untuk membuat efek rounded corners atau
sudut membulat. Bootstrap juga menyediakan beberapa class untuk membuat efek serupa:
✔ .rounded
✔ .rounded-top
✔ .rounded-end
✔ .rounded-bottom
✔ .rounded-start
✔ .rounded-circle
✔ .rounded-pill
Class .rounded dipakai untuk membuat efek rounded corners di ke-4 sudut.
109
Class .rounded-top dipakai untuk membuat efek rounded corners di kedua sudut bagian atas,
yakni sudut kiri atas dan kanan atas.
Class .rounded-end dipakai untuk membuat efek rounded corners di kedua sudut bagian
kanan, yakni sudut kanan atas dan kanan bawah.
Class .rounded-bottom dipakai untuk membuat efek rounded corners di kedua sudut bagian
bawah, yakni sudut kiri bawah dan kanan bawah.
Class .rounded-start dipakai untuk membuat efek rounded corners di kedua sudut bagian kiri,
yakni sudut kiri atas dan kiri bawah.
Class .rounded-circle dipakai untuk membuat efek lingkaran.
Class .rounded-pill dipakai untuk membuat efek pill atau membulat di kedua sisi. Syarat
untuk class ini element harus berbentuk persegi panjang, jika tidak efeknya akan sama seperti
.rounded-circle.
Berikut contoh penggunaan dari ke-7 class ini:
09.border_corner.html
1 <div class="container-fluid">
2 <div class="border border-primary rounded">.rounded</div>
3 <div class="border border-primary rounded-top">.rounded-top</div>
4 <div class="border border-primary rounded-end">.rounded-end</div>
5 <div class="border border-primary rounded-bottom">.rounded-bottom</div>
6 <div class="border border-primary rounded-start">.rounded-start</div>
7 <div class="border border-primary rounded-circle">.rounded-circle</div>
8 <div style="width: 150px;" class="border border-primary rounded-pill">
9 .rounded-pill</div>
10 <div style="width: 50px;" class="border border-primary rounded-pill">
11 .rounded-pill</div>
12 </div>
Gambar: Hasil penggunaan class border radius Bootstrap
Dalam contoh ini saya mengombinasikan class border, border color dan border radius ke
dalam setiap element. Teknik gabungan seperti ini akan sering kita pakai sepanjang kode yang
menggunakan Bootstrap. Untuk contoh class .rounded-pill, lebar element diubah
menggunakan inline style CSS agar efeknya bisa terlihat.
Jika diperhatikan dari inspect element, secara internal Bootstrap menggunakan radius 0.25rem
110
untuk setiap sudut, kecuali pada class .rounded-circle yang menggunakan radius 50%. Jika
kita ingin mengatur besar radius kelengkungan, tersedia juga 4 class berikut:
✔ .rounded-0
✔ .rounded-1
✔ .rounded-2
✔ .rounded-3
Class .rounded-0 dipakai untuk menghapus border radius yang sudah ada, sedangkan class
.rounded-1, .rounded-2, dan .rounded-3 dipakai untuk membuat border radius sebesar
0.2rem, 0.25rem dan 0.3 rem. Berikut contoh penggunaannya:
09a.border_corner_radius.html
2 <div class="border border-primary rounded-0">.rounded-0</div>
6 </div>
Gambar: Mengatur besar kelengkungan border radius
5.4. Shadows
Shadows adalah class Bootstrap untuk membuat efek bayangan (shadow) ke dalam element
HTML. Di dalam CSS kita bisa menggunakan property box-shadow untuk mendapatkan efek
serupa. Bootstrap menyediakan 4 class untuk membuat efek bayangan:
✔ .shadow-none
✔ .shadow-sm
✔ .shadow
✔ .shadow-lg
Class .shadow-none tidak menambah efek bayangan apapun, class ini ditujukan menghapus
efek bayangan yang sudah ada saat ini. Class .shadow-sm dipakai untuk membuat efek
bayangan kecil (small), class .shadow untuk membuat efek bayangan sedang, dan class
.shadow-lg untuk membuat efek bayangan besar (large).
111
10.shadow.html
1 <style>
2 div > div {
3 height: 50px;
4 width: 200px;
5 margin : 1em;
6 float: left;
9 }
10 </style>
2 <div class="border border-secondary shadow-none">.shadow-none</div>
3 <div class="border border-secondary shadow-sm">.shadow-sm</div>
4 <div class="border border-secondary shadow">.shadow</div>
5 <div class="border border-secondary shadow-lg">.shadow-lg</div>
6 </div>
Hasil penggunaan class shadow Bootstrap
Selain menggunakan class shadow, pada contoh ini saya juga memakai class border dan
border color. Efek bayangan dari class shadow Bootstrap memang tidak terlalu jelas, tapi
sudah cukup untuk penggunaan biasa. Jika ingin efek yang lebih besar, bisa dibuat manual
menggunakan property box-shadow dari CSS.
5.5. Spacing
Spacing berisi class utility Bootstrap untuk mengatur spasi atau jarak. Di dalam CSS, ini tidak
lain berupa padding dan margin. Pengaturan padding dan margin cukup sering dipakai, oleh
karena itu Bootstrap menyediakan penulisan class yang cukup lengkap.
Selain membuat padding dan margin, kita juga bisa mengatur ukuran serta breakpoint tempat
padding dan margin terjadi, yakni apakah di breakpoint extra small, small, medium, large,
extra large, atau extra extra large. Dengan class ini, sebuah padding bisa dibuat kecil untuk
breakpoint small dan membesar di breakpoint large, atau sebaliknya. Semua teknik ini akan
kita bahas secara bertahap.
112
Padding
Padding adalah jarak atau spasi antara konten dengan border. Bootstrap menyediakan 6 class
untuk membuat padding yang dibedakan berdasarkan ukuran:
✔ .p-0
✔ .p-1
✔ .p-2
✔ .p-3
✔ .p-4
✔ .p-5
Awalan p merupakan singkatan dari padding. Semakin besar angka class, semakin besar pula
efek padding yang dihasilkan. Berikut contoh penggunaannya:
11.padding.html
1 <style>
2 div > div {
4 margin: 0.3em;
5 width: 150px;
6 height: 150px;
7 float: left;
8 }
9 </style>
2 <div class="p-0">Class .p-0</div>
8 </div>
Hasil tampilan class padding Bootstrap
Class .p-0 tidak menambah efek padding apapun, atau bisa dibilang bahwa class ini dipakai
untuk menghapus efek padding yang ada saat ini (jika ditemukan). Untuk class lain, semakin
besar angka class, semakin besar pula efek padding yang dihasilkan. Dalam gambar di atas bisa
113
terlihat teks semakin terdorong ke tengah karena penambahan padding di semua sisi.
Agar lebih mudah, ukuran besar padding ini akan saya sebut sebagai level padding. Terdapat 5
level padding mulai dari level 0 (tidak ada padding) hingga level 5 dengan padding yang cukup
besar. Silahkan buka Developer Tools / Inspect Element untuk melihat lebih jelas berapa besar
ruang yang dipakai untuk padding ini:
Besar ruang atau spasi padding dari class .p-5 Bootstrap
Secara internal, Bootstrap menggunakan satuan rem untuk membuat padding. Rem adalah
singkatan dari root em, yakni satuan em yang tidak memiliki efek compound. Jika tidak di
ubah, 1 rem sama dengan 1 em, yakni sebesar 16 pixel (ukuran default font web browser).
Selain mengatur besar padding, Bootstrap juga menyediakan class untuk mengubah satu sisi
padding saja, apakah sisi top, bottom, start, end, start dan end, serta top dan bottom.
Caranya, tambah karakter t, b, s, e, x atau y ke dalam nama class padding.
Sama seperti penulisan class border, terdapat perubahan nama arah untuk padding. Dari
sebelumnya left dan right di Bootstrap 4, menjadi start dan end di Bootstrap 5.
Sebagai contoh, untuk membuat efek .p-3 hanya untuk sisi kanan saja, gunakan class .pe-3.
Untuk membuat efek .p-5 untuk sisi atas, gunakan class .pt-5. Atau untuk membuat efek .p-1
di sisi kiri saja gunakan class .ps-1.
Huruf t, b, e dan s bersesuaian dengan nama inisial top, bottom, end, dan start. Sedangkan
inisial x dipakai untuk membuat efek padding di sumbu x (sumbu horizontal), yakni padding di
sisi start dan end. Inisial y dipakai untuk membuat efek padding di sumbu y (sumbu vertikal),
yakni sisi top dan bottom.
Berikut contoh penggunaan kombinasi padding ini:
12.padding_side.html
2 <div class="pt-5">Div dengan class .pt-5</div>
3 <div class="ps-5">Div dengan class .ps-5</div>
4 <div class="pb-5">Div dengan class .pb-5</div>
5 <div class="pe-5">Div dengan class .pe-5</div>
6 <div class="px-5">Div dengan class .px-5</div>
114
7 <div class="py-5">Div dengan class .py-5</div>

8 </div>
Hasil tampilan class padding .p-5 untuk berbagai sisi
Dalam contoh di atas saya menempatkan berbagai posisi padding level 5. Jika teks bergeser,
berarti ada padding di sisi tersebut.
Dari gabungan 6 posisi untuk 6 level padding, maka terdapat total 36 kombinasi class, mulai
dari .pt-0, ps-0, hingga .py-5. Tidak cukup dengan 36 class ini, Bootstrap juga
mengimplementasikan konsep breakpoint ke dalam padding. Artinya kita bisa mengubah
besar padding untuk setiap breakpoint.
Sebagai contoh, class .pt-sm-3 artinya "set padding top level 3 untuk breakpoint small". Atau
class .ps-md-5 yang artinya "set padding start level 5 untuk breakpoint middle".
Berikut format penulisan final class padding Bootstrap:
.p<posisi>-<breakpoint>-<level/besar_padding>
Dari kombinasi posisi, breakpoint dan level ini, total terdapat 6 * 6 * 6 = 216 kombinasi class
padding Bootstrap!
Namun jika kita sudah hafal inisial dari setiap huruf, tidak sulit untuk memahami arti class-
class ini. Berikut contoh penerapan breakpoint ke dalam class padding Bootstrap:
13.padding_breakpoint.html
2 <div class="pt-sm-3 ps-md-5 p-lg-3">
3 Div dengan class .pt-sm-3 .ps-md-5 dan .p-lg-3
4 </div>
5 </div>
115
Efek breakpoint di dalam class padding Bootstrap
Di sini saya membuat class .pt-sm-3 , .ps-md-5 dan .p-lg-3 ke dalam 1 tag <div>.
Ketika ukuran layar mencapai breakpoint extra-small, tidak ada padding apapun karena tidak
terdapat class untuk breakpoint tersebut.
Begitu sampai di breakpoint small, berlaku class .pt-sm-3. Artinya, buat padding level 3 di
arah atas (top). Seperti yang terlihat, teks sedikit bergeser ke bawah untuk mengakomodasi
padding dari atas.
Untuk breakpoint medium, class padding berganti menjadi .ps-md-5. Class ini membuat efek
padding level 5 di arah kiri (start). Hasilnya, teks akan terdorong cukup jauh ke arah kanan.
Terakhir untuk breakpoint large, yang aktif adalah class .p-lg-3. Efeknya, terdapat padding
level 3 di semua sisi. Terlihat teks bergeser sedikit ke tengah.
Fitur class padding Bootstrap memang sengat fleksibel, namun seperti yang sudah kita lihat,
perlu ketelitian untuk bisa menerjemahkan efek dari setiap class.
Margin
Selesai dengan padding, kita masuk ke margin. Margin adalah spasi atau jarak antara satu
element dengan element lain di dalam HTML.
116
Terdapat kabar buruk dan kabar baik. Kabar buruknya, sistem margin Bootstrap sama
kompleksnya dengan padding yang baru saja kita bahas. Namun kabar baiknya, penamaan
class sama persis dengan padding, yang berbeda hanya inisial p diganti dengan m.
Dengan demikian, juga terdapat 216 jenis kombinasi untuk margin. Format dasar penulisan
classnya sama dengan padding:
.m<posisi>-<breakpoint>-<level/besar_margin>
Sebagai contoh, .m-5 artinya "buat margin level 5 untuk semua sisi (top, bottom, start dan
end) serta berlaku untuk semua breakpoint". Class .ms-3 artinya "buat margin start level 3 dan
berlaku untuk semua breakpoint". Sedangkan class .mend-md-4 artinya "buat margin end level
4 untuk breakpoint middle".
Berikut contoh penerapan class margin Bootstrap:
14.margin.html
2 <div class="m-0">Class .m-0</div>
8 </div>
Hasil 5 level class margin Bootstrap
Dalam contoh di atas terlihat hasil dari 5 level margin, mulai dari .m-0 di sisi kiri, hingga .m-5
di sisi kanan. Semakin besar level, semakin besar pula efek margin yang terjadi. Terlihat untuk
class .m-5, kotak <div> terdorong cukup jauh ke arah bawah kanan.
Berikut contoh penerapan margin class Bootstrap dalam berbagai sisi:
15.margin_side.html
2 <div class="mt-4">Div dengan class .mt-4</div>
3 <div class="ms-4">Div dengan class .ms-4</div>
4 <div class="mb-4">Div dengan class .mb-4</div>
117
5 <div class="me-4">Div dengan class .me-4</div>

6 <div class="mx-4">Div dengan class .mx-4</div>
7 <div class="my-4">Div dengan class .my-4</div>
8 </div>
Hasil class margin Bootstrap untuk berbagai sisi
Hasil di atas tampak sedikit berantakan karena efek margin yang berbeda-beda. Cara
membaca class margin ini sama seperti padding, dimana digit kedua mewakili inisial top,
bottom, start dan end. Serta inisial x untuk margin start + end dan inisial y untuk margin top +
bottom.
Selanjutnya, berikut contoh penerapan class margin ke dalam sistem breakpoint Bootstrap:
16.margin_breakpoint.html
2 <div></div>
3 <div class="ms-5 ms-sm-4 ms-md-3 ms-lg-2 ms-xl-0">
4 Div dengan class .ms-5 .ms-sm-4 .ms-md-3 .ms-lg-2 .ms-xl-0
5 </div>
6 </div>
Penerapan breakpoint ke dalam class margin Bootstrap
Jika diperhatikan, kombinasi class="ms-5 ms-sm-4 ms-md-3 ms-lg-2 ms-xl-0" cukup unik.
118
Dimana saya membuat ukuran margin mengecil ketika masuk ke breakpoint yang lebih besar.
Untuk breakpoint extra-small, gunakan margin left level 5. Namun untuk breakpoint extra-
large, gunakan margin left level 0 (tanpa efek margin sama-sekali).
Hasilnya, ketika layar kecil (extra-small), jarak kedua tag <div> menjadi lebar, namun begitu
layar dibesarkan maksimal (extra-large), kedua kotak akan menempel karena tidak ada margin
sama sekali.
Margin Auto
Untuk margin, terdapat nilai khusus: auto. Sebagaimana yang kita ketahui, margin: auto
memiliki efek unik di dalam CSS. Property ini berfungsi agar web browser mengatur sisa
margin yang ada. Salah satu yang sering dipakai adalah untuk membuat rata tengah
(centering) pada block level element.
Nilai margin auto juga hadir dengan berbagai variasi posisi, yakni: .m-auto (margin auto di
semua sisi), .mx-auto (margin auto di sumbu x), .my-auto (margin auto di sumbu y), serta
margin auto di setiap sisi dengan class .mt-auto, .mb-auto, .ms-auto dan .me-auto.
Berikut contoh penerapan class margin auto di Bootstrap:
17.margin_auto.html
1 <style>
2 [class^="col"] {
5 padding: 0.4em;
6 }
7 .row {
8 margin-top: 1em;
9 }
10 </style>
2 <div class="row">
3 <div class="col-4"> .col-4 </div>
4 <div class="col-4 ms-auto"> .col-4 .ms-auto </div>
5 </div>
6 <div class="row">
7 <div class="col-4 me-auto">.col-4 .me-auto </div>
8 <div class="col-4"> .col-4 </div>
9 </div>
11 <div class="col-3 ms-auto me-auto"> .col-3 .ms-auto .me-auto </div>
12 <div class="col-3"> col-3 </div>
13 </div>
15 <div class="col-6 mx-auto"> col-6 .mx-auto</div>
16 </div>
17 </div>
119
Hasil penggunaan class margin auto Bootstrap
Dalam row pertama di baris 2-5 saya menerapkan class .ms-auto ke kolom kedua. Hasilnya,
kolom tersebut akan terdorong ke kanan akibat margin auto di sisi end (kanan). Efek ini mirip
seperti penggunakan column offset, dimana kita bisa menggeser posisi kolom.
Dalam row kedua pada baris 6-9 saya menerapkan class .me-auto ke kolom pertama. Hasilnya,
kolom pertama akan terdorong ke sisi start (kiri).
Pada row ketika di baris 10-13 saya menerapkan class .ms-auto dan .me-auto ke kolom
pertama. Dengan demikian, margin yang ada akan dibagi sama rata di sisi kiri dan kanan.
Terakhir di row keempat, hanya ada satu kolom yang menggunakan class .mx-auto. Efeknya,
kolom tersebut tepat berada di tengah row.
5.6. Display
Bootstrap menyediakan class utilities display yang efeknya sama dengan property display.
Di dalam CSS, property display sering dipakai untuk mengubah bentuk element HTML dari
inline menjadi block atau sebaliknya (menggunakan perintah display:inline dan
display:block), serta juga bisa menyembunyikan element dengan perintah display:none.
Bootstrap menyediakan class khusus untuk keperluan ini:

✔ .d-none
✔ .d-inline
✔ .d-inline-block
✔ .d-block
✔ .d-grid
✔ .d-table
✔ .d-table-cell
✔ .d-table-row
✔ .d-flex
✔ .d-inline-flex
120
Penamaan class display Bootstrap sesuai dengan nilai dari property display CSS. Sebagai
contoh, class .d-none sama artinya dengan kode CSS display:none serta class .d-inline sama
artinya dengan kode CSS display:inline.
18.display.html
1 <style>
2 div > div {
4 padding: 0.2em;
5 margin: 0.3em;
6 }
7 </style>
2 <div class="d-none">.d-none</div>
3 <div class="d-inline">.d-inline</div>
4 <div class="d-inline-block">.d-inline-block</div>
5 <div class="d-block">.d-block</div>
6 <div class="d-grid">.d-grid</div>
7 <div class="d-table">.d-table</div>
8 <div class="d-table-cell">.d-table-cell</div>
9 <div class="d-table-row">.d-table-row</div>
10 <div class="d-flex">.d-flex</div>
11 <div class="d-inline-flex">.d-inline-flex</div>
12 </div>
Hasil penggunaan class display Bootstrap
Tampilan di atas memang tampak berantakan karena tidak ada tujuan khusus kecuali
menampilkan semua display class Bootstrap.
Dari semua class ini, yang akan sering kita pakai adalah .d-none, .d-flex, .d-inline, .d-
inline-block dan .d-block. Sisa class lain relatif jarang terpakai.
121
Display Breakpoint
Display class Bootstrap juga diberi fitur breakpoint. Artinya kita bisa mengatur seperti apa
tampilan element pada breakpoint tertentu. Ini sangat menarik terutama untuk class .d-none,
dimana sebuah element bisa disembunyikan pada breakpoint tertentu dan ditampilkan
kembali pada breakpoint lain.
Berikut format penulisan display class Bootstrap dengan penambahan breakpoint:
.d-<breakpoint>-<nilai display>
Sebagai contoh, class .d-sm-none artinya "sembunyikan element pada breakpoint small dan
breakpoint di atasnya" atau class .d-lg-inline yang berarti "ubah display element menjadi
inline pada breakpoint large dan di atasnya".
Berikut contoh penggunaan display class breakpoint Bootstrap:
19.display_breakpoint.html
1 <style>
2 div > div, span {
4 width: 100px;
5 height: 100px;
6 padding: 0.3em;
7 margin: 1em;
9 float: left;
10 }
11 </style>
2 <div class="d-none">.d-none</div>
3 <div class="d-sm-none">.d-sm-none</div>
4 <div class="d-md-none">.d-md-none</div>
5 <div class="d-lg-none">.d-lg-none</div>
6 <div class="d-xl-none">.d-xl-none</div>
7 </div>
122
Hasil penggunaan class display breakpoint Bootstrap
Pada contoh ini saya membuat tag <div> dengan 5 jenis class .d-none untuk berbagai
breakpoint. Hasilnya, tag <div> akan tersembunyi satu per satu begitu masuk ke breakpoint
yang lebih tinggi.
Yang harus diingat, sistem breakpoint Bootstrap adalah mobile-first. Artinya jika sebuah
element menggunakan class .d-none-sm, maka element tersebut tidak akan tampil untuk
breakpoint di atasnya, yakni md, lg, xl dan xxl. Kecuali di set ulang dengan nilai display lain
pada breakpoint tersebut.
Class .d-none sendiri bisa diartikan sebagai .d-none-xs, yang akan menyembunyikan element
mulai dari breakpoint extra small, small, dst. Dalam contoh di atas, tag <div> dengan class .d-
none otomatis tidak terlihat di breakpoint mana pun.
Bagaimana jika kita ingin menyembunyikan sebuah element pada breakpoint tertentu dan
menampilkannya di breakpoint lain? Caranya, kembalikan nilai display menjadi selain none
seperti contoh berikut:
20.display_breakpoint_combine.html
1 <style>
2 div > div, span {
4 padding: 0.3em;
5 margin: 1em;
7 }
8 </style>
123
2 <div class="d-sm-none d-md-block d-xl-none">
3 .d-sm-none .d-md-block .d-xl-none
4 </div>
5 <div class="d-none d-md-inline d-lg-none d-xl-block">
6 .d-none .d-md-inline .d-lg-none .d-xl-block
7 </div>
8 </div>
Kali ini saya membuat 2 buah tag <div> yang berisi berbagai class display.
Tag pertama berisi class:"d-sm-none d-md-block d-xl-none" , yang artinya:

 Breakpoint extra small: tampil (display: block), berasal dari bawaan element
 Breakpoint small: tidak tampil (display: none), berasal dari .d-sm-none
 Breakpoint medium: tampil (display: block), berasal dari .d-md-block
 Breakpoint large: tampil (display: block), berasal dari .d-md-block
 Breakpoint extra large: tidak tampil (display: none), berasal dari .d-xl-none
 Breakpoint extra extra large: tidak tampil (display: none), berasal dari .d-xl-none
Tag kedua berisi class="d-none d-md-inline d-lg-none d-xl-block" , yang artinya:

 Breakpoint extra small: tidak tampil (display: none), berasal dari .d-none
 Breakpoint small: tidak tampil (display: none), berasal dari .d-none
 Breakpoint medium: tampil (display: inline), berasal dari .d-md-inline
 Breakpoint large: tidak tampil (display: none), berasal dari .d-lg-none
 Breakpoint extra large: tampil (display: block), berasal dari .d-xl-block
 Breakpoint extra extra large: tampil (display: block), berasal dari .d-xl-block
Efek breakpoint class display Bootstrap
124
Perhatikan tampilan dari breakpoint large dan extra-large, meskipun sama-sama

menampilkan 1 element, tapi itu adalah tag <div> yang berbeda. Di dalam breakpoint large,
yang tampil adalah tag <div> pertama, sedangkan dalam breakpoint extra-large, yang tampil
adalah tag <div> kedua.
Efek menyembunyikan element ini sangat berguna di dalam sistem grid Bootstrap, seperti
contoh berikut:
21.display_breakpoint_layout.html
1 <style>
2 .row > div {
5 padding: 0.4em;
6 }
7 .row {
8 margin-top: 1em;
9 }
10 </style>
2 <div class="row">
3 <div class="col-12 col-md-8"> Main Content</div>
4 <div class="col-12 col-md-2 order-md-first"> Sidebar 1</div>
5 <div class="d-none col-md-2 d-md-block"> Sidebar 2</div>
6 </div>
7 </div>
Tampilan layout dengan class d.none pada Sidebar 2
Dalam contoh ini saya menyembunyikan Sidebar 2 ketika tampilan masuk ke breakpoint small
dan extra-small. Efek seperti ini sering dipakai untuk konten tambahan yang kurang cocok
tampil di layar smartphone.
Class display Bootstrap memang sangat praktis. Namun yang harus diingat adalah, jika sebuah
element sudah menggunakan class .d-none, maka class ini harus ditimpa pada breakpoint lain
agar element tersebut bisa tampil kembali.
125
Display Print
Bootstrap juga menyediakan class display khusus, yakni .d-print-none. Fungsinya, untuk
menyembunyikan sebuah element pada saat halaman web di cetak (print). Cara
penggunaannya sama seperti class display lain, seperti contoh berikut:
22.display_print.html
2 <div class="row">
3 <div class="col-8"> Main Content</div>
4 <div class="col-2 d-print-none"> Sidebar 1</div>
5 <div class="col-2 d-print-none"> Sidebar 2</div>
6 </div>
7 </div>
Tampilan print preview dengan class d-print-none pada Sidebar 1 dan Sidebar 2
Dalam contoh ini, saya menempatkan class .d-print-none ke Sidebar 1 dan Sidebar 2.
Hasilnya, saat masuk ke menu print preview, yang tampil hanya kolom Main Content saja.
Class .d-print-non ini cocok dipakai untuk element web yang bersifat dekoratif dan kurang
pas untuk di print, misalnya sidebar, kotak iklan, dsb. Ini bisa mempermudah pengujung web
kita untuk menghemat kertas dan tinta.
5.7. Visibility
Visibility class Bootstrap berguna untuk mengatur nilai property visibility bawaan CSS.
Property visibility bisa diisi nilai visible dan hidden. Jika sebuah element di set dengan
visibility:hidden, element tersebut tidak akan tampak di layar. Dan jika di set sebagai
visibility:visible, element tersebut tampil kembali.
Jadi, jika sama-sama menyembunyikan element, apa bedanya visibility:hidden dengan

display:none?
126
Untuk element HTML yang di set sebagai display:none (misalnya dari class Bootstrap .d-
none), element tersebut seolah-olah "diambil" dari halaman web. Lokasi element itu bisa
ditempati oleh element lain. Sedangkan untuk element yang di-set sebagai visibility:
hidden, lokasi element itu tidak bisa ditempati dengan element lain, seolah-olah element
tersebut masih ada namun tidak terlihat.
Bootstrap menyediakan class .visible dan .invisible sebagai penulisan singkat dari
property visibility:visible dan visibility:hidden. Berikut contoh penggunaannya:
23.visible.html
1 <style>
2 div > div {
4 padding: 0.5em;
5 margin: 0.5em;
6 }
7 </style>
2 <div class="visible">Div 1: Visible</div>
3 <div class="invisible">Div 2: Visible</div>
4 <div>Div 3: Visible</div>
5 </div>
Hasil tampilan dari class .visible dan .invisible
Di sini Div 2 saya set dengan class .invisible, hasilnya element tersebut tidak terlihat di web
browser namun "tempatnya" masih ada dan tidak bisa ditempati oleh element lain. Jika class
Div 2 ini diganti dengan .d-none, maka Div 3 akan naik ke atas menempati lokasi dari Div 2.
5.8. Float
Dengan hadirnya fitur CSS3 Flexbox dan CSS3 Grid, penggunaan float untuk perancangan
layout sudah mulai berkurang. Namun bootstrap tetap menyediakan class bantu untuk
pembuatan property float, yakni:
✔ .float-start
✔ .float-end
127
✔ .float-none
Tiga class ini mewakili property CSS float:left, float:right dan float:none. Berikut contoh
penggunaannya:
24.float.html
1 <style>
2 div > div {
4 width: 100px;
5 height: 100px;
6 background-color:lightgrey;
7 }
8 </style>
2 <div class="float-start">.float-start</div>
3 <div class="float-end">.float-end</div>
4 </div>
Contoh pengguaan class float Bootstrap
Jika sudah paham cara penggunaan property float:left dan float:right di CSS, tentu tidak
kesulitan memahami tampilan di atas. Saya men-float 1 div ke kiri (start), dan 1 lagi ke kanan
(end).
Bootstrap juga menerapkan fitur breakpoint ke dalam class float, sehingga kita bisa mengatur
nilai float bergantung ukuran layar. Berikut format penulisan float class Bootstrap dengan
penambahan breakpoint:
.float-<breakpoint>-<jenis float>
Sebagai contoh class .float-md-start artinya "float-kan sebuah element ke kiri pada saat
masuk ke breakpoint middle". Berikut contoh penggunaannya:
25.float_breakpoint.html
1 <style>
2 div > div {
4 width: 100px;
5 height: 100px;
128
9 }
10 </style>
2 <div class="float-start float-sm-end float-md-none float-lg-start">1</div>
3 <div class="float-start float-sm-end float-md-none float-lg-end ">2</div>
4 </div>
Contoh pengguaan class float Bootstrap dengan breakpoint
Dalam contoh ini, posisi box akan berubah tergantung class float yang aktif pada setiap
breakpoint.
5.9. Clearfix
Clearfix adalah istilah khusus dalam CSS untuk "memperbaiki" efek float. Menggunakan float
dalam membuat layout memiliki tantangan tersendiri karena banyak efek samping yang bisa
terjadi. Misalnya efek "The Great Collapse" dimana parent element otomatis hilang atau
"collapse" jika semua childnya di float-kan. Berikut contoh kasusnya:
26.clearfix_problem.html
1 <style>
129
2 .header {
3 background-color:lightpink;
4 }
5 .header > div {
7 width: 100px;
8 height: 100px;
10 }
11 </style>
2 <div class="header">
5 </div>
6 </div>
Efek "the great collapse" untuk parent element
Dalam kode di atas, tag <div> dengan class .float-start dan .float-end berada di dalam tag
<div class="header">. Class .header ini di set dengan warna background lightpink namun
tidak terlihat warna pink apapun. Ini karena class .header akan collapse atau mengecil sebagai
efek samping floating element.
Dari Developer Tools atau Inspect Element, akan terlihat tinggi dari .header adalah 0 pixel,
padahal di dalamnya ada 2 buah tag <div>.
Terdapat beberapa trik yang bisa dipakai untuk memperbaiki hal ini, mulai dari menambah
property overflow:hidden ke parent element, menggunakan tag <br clear:both>, hingga
yang terbaru menggunakan pseudo selector ::after.
Bootstrap menyediakan class khusus untuk keperluan ini, yakni tempatkan class .clearfix ke
dalam parent element:
27.clearfix_solution.html
2 <div class="header clearfix">
5 </div>
6 </div>
130
Hasil penggunaan class .clearfix Bootstrap
Sekarang class .header sudah normal dan memiliki tinggi sesuai element yang ada di
dalamnya. Warna background pink mengkonfirmasi hal ini. Secara internal, class .clearfix
Bootstrap menggunakan teknik pseudo element ::after untuk memperbaiki efek float:
.clearfix::after {
display: block;
clear: both;
content: "";
}
5.10. Text
Bootstrap menyediakan class bantu untuk membuat berbagai efek teks seperti membuat rata
teks, mengubah huruf besar / kecil, membuat huruf tebal dan miring, dll.
Text Alignment
Text Alignment adalah utilities class Bootstrap sebagai alternatif dari property text-align
CSS. Terdapat 3 class untuk mengatur text alignment:
✔ .text-start
✔ .text-center
✔ .text-end
28.text_align.html
1 <style>
2 div > div {
4 width: 250px;
5 height: 160px;
6 padding: 0.5em;
7 margin: 0.5em;
8 float: left;
9 }
10 </style>
131
2 <div class="text-start">Lorem ipsum, dolor sit amet consectetur
3 adipisicing elit. Perspiciatis aliquam, est minus, natus magni,
4 alias hic omnis sunt doloribus asperiores enim dolorem!
5 </div>
6 <div class="text-center">Lorem ipsum, dolor sit amet consectetur
9 </div>
10 <div class="text-end">Lorem ipsum, dolor sit amet consectetur
13 </div>
14 </div>
Contoh penggunaan class text align Bootstrap
Class text align Bootstrap juga ditambah efek breakpoint dengan format: .text-<breakpoint>-
<jenis_text_align>
Sebagai contoh, class .text-md-center artinya "ubah rata teks menjadi di tengah pada saat
masuk ke breakpoint middle". Berikut contoh penggunaannya:
29.text_align_breakpoint.html
2 <h1 class="text-sm-center text-md-start text-lg-end">Belajar Bootstrap</h1>
3 </div>
Efek
breakpoint pada rata teks dengan class text-align Bootstrap
132
Berikut penjabaran dari class="text-sm-center text-md-start text-lg-end":

 Breakpoint extra-small: rata kiri, berasal dari bawaan element
 Breakpoint small: rata tengah, berasal dari .text-sm-center
 Breakpoint medium: rata kiri, berasal dari .text-md-start
 Breakpoint large ke atas : rata kanan, berasal dari .text-lg-end
Text Wrapping and Overflow

Class text wrapping and overflow cukup unik, fungsinya mengatur bagaimana teks
ditampilkan jika tidak mampu ditampung oleh sebuah element.
Secara default, sebuah teks di dalam element HTML akan ditampilkan dari kiri ke kanan (atau
dari kanan ke kiri untuk versi RTL). Jika element tersebut tidak memiliki lebar yang tetap (tidak
ada kode width CSS yang mengaturnya), maka teks akan terus "memanjang" ke samping.
Jika element tersebut memiliki lebar yang tetap (didefinisikan di dalam kode CSS), atau sudah
bertemu lebar maksimum, maka teks akan dipecah menjadi beberapa baris tepat pada
karakter spasi atau tanda hubung "-".
Selain perilaku bawaan ini, Bootstrap menyediakan 2 buah class lain:

✔ .text-nowrap
✔ .text-truncate
Class .text-nowrap akan memaksa teks untuk "melimpah" ke luar jika tidak bisa ditampung di
dalam sebuah element. Sedangkan class .text-truncate akan mengganti sisa karakter yang
"melimpah" tersebut dengan tanda titik tiga kali, yakni '...'.
Agar lebih jelas, mari kita lihat dengan contoh kode berikut:
30.text_wrapping.html
1 <style>
2 div > div {
4 padding: 0.5em;
5 margin: 0.5em;
6 }
7 </style>
2 <div>
3 Lorem ipsum, dolor sit amet consectetur adipisicing elit. normal
4 </div>
5 <div class="text-nowrap">
6 Lorem ipsum, dolor sit amet consectetur adipisicing elit. text-nowrap
7 </div>
8 <div class="text-truncate">
9 Lorem ipsum, dolor sit amet consectetur adipisicing elit. text-truncate
10 </div>
133
11 </div>
Hasil penggunaan class .text-nowrap dan .text-truncate Bootstrap
Div pertama tidak memiliki class tambahan apapun. Hasilnya, teks akan pindah ke baris kedua
karena tidak muat lagi di baris pertama. Ini adalah perilaku default dari semua element HTML
Untuk mengaktifkan efek ini secara manual, bisa juga memakai class .text-wrap.
Div kedua saya set dengan class="text-nowrap". Hasilnya, teks akan dipaksa untuk melimpah
keluar (overflow) karena tidak bisa ditampung dalam 1 baris.
Div ketiga saya set dengan class="text-truncate". Hasilnya, teks yang melimpah diganti
dengan tanda titik tiga "..." di akhir element. Class ini cukup menarik dan cocok dipakai untuk
memotong teks serta menambahkan link "read more" untuk versi lengkapnya.
Text Transform
Class text transform Bootstrap tidak lain mempermudah penulisan property text-transform
CSS. Terdapat 3 class untuk keperluan ini:
✔ .text-lowercase
✔ .text-uppercase
✔ .text-capitalize
31.text_transform.html
1 <style>
2 div > div {
4 padding: 0.5em;
5 margin: 0.5em;
6 }
7 </style>
134
2 <div class="text-lowercase">Belajar Bootstrap</div>

3 <div class="text-uppercase">Belajar Bootstrap</div>
4 <div class="text-capitalize">belajar bootstrap</div>
5 </div>
Hasil penggunaan class text transform Bootstrap
Class .text-lowercase akan menampilkan seluruh teks dalam huruf kecil. Class .text-
uppercase akan menampilkan seluruh teks dalam huruf besar. Serta class .text-capitalize
akan menampilkan teks dengan huruf besar di setiap karakter pertama kata.
Font Size
Untuk mengubah ukuran teks dengan cepat, Bootstrap menyediakan 5 class berikut:
✔ .fs-1
✔ .fs-2
✔ .fs-3
✔ .fs-4
✔ .fs-5
✔ .fs-6
Semakin besar nilai class, semakin kecil ukuran teks. Berikut percobaannya:
31a.text_font-size.html
2 <div class="fs-1">.fs-1 Belajar Bootstrap</div>
8 </div>
135
Gambar: Mengatur ukuran teks dengan class .fs
Secara internal Bootstrap, ukuran teks dari ini bersesuaian dengan tag <h1> sampai <h6>,
namun tanpa efek bold.
Font Weight and Italics

Class ini sebenarnya cukup mudah dibuat dari CSS, tapi tetap disediakan Bootstrap. Fungsinya
untuk mengubah tampilan teks menjadi huruf tebal (bold) dan miring (italic):
✔ .fw-bold
✔ .fw-bolder
✔ .fw-normal
✔ .fw-light
✔ .fw-lighter
✔ .fst-italic
✔ .fst-normal
Setiap class diawali dengan inisial dari efek yang dihasilkan, yakni .fw-x = font-weight, dan
.fst-x = font style. Ini sesuai dengan nama property CSS dari efek tersebut. Berikut contoh
penggunaannya:
32.font_weight_italics.html
1 <style>
2 div > div {
4 padding: 0.5em;
5 margin: 0.5em;
6 }
7 </style>
2 <div class="fw-bold">Belajar Bootstrap</div>
3 <div class="fw-normal">Belajar Bootstrap</div>
4 <div class="fw-light">Belajar Bootstrap</div>
136
5 <div class="fst-italic">Belajar Bootstrap</div>

6 </div>
Tampilan dari class Font Weight and Italics Bootstrap
Khusus untuk class .fw-light, harus di dukung oleh jenis font yang dipakai karena tidak
semua font menyediakan versi light.
Line Height
Di dalam CSS, property line-height dipakai untuk mengatur jarak atau spasi antar baris.
Bootstrap menyediakan 4 class untuk membuat line-height dengan cepat:
✔ .lh-1
✔ .lh-sm
✔ .lh-base
✔ .lh-lg
32a.line_height.html
1 <style>
2 div > p {
3 width: 250px;
4 padding: 0.5em;
5 margin: 0.5em;
6 float: left;
7 }
8 </style>
2 <p class="lh-1">Lorem ipsum, dolor sit amet consectetur
5 </p>
6 <p class="lh-sm">Lorem ipsum, dolor sit amet consectetur
9 </p>
10 <p class="lh-base">Lorem ipsum, dolor sit amet consectetur
137

13 </p>
14 <p class="lh-lg">Lorem ipsum, dolor sit amet consectetur
17 </p>
18 </div>
Gambar: Tampilan dari class line height Bootstrap
Secara default, tag <p> di set Bootstrap dengan nilai line-height: 1.5, atau sama dengan
class="lh-base". Kita bebas ingin mengubah spasi paragraf ini dengan class .lh-1, .lh-sm
maupun .lh-lg.
Monospace
Class monospace dipakai untuk mengkonversi tampilan teks menjadi monospace, yakni jenis
font dimana setiap huruf menempati ruang yang sama besar. Class monospace cocok dipakai
untuk menampilkan dokumen teknis seperti contoh kode program komputer. Untuk
menggunakannya, Bootstrap menyediakan class .text-monospace seperti contoh berikut:
33.font_monospace.html
1 <style>
2 div > div {
4 padding: 0.5em;
5 margin: 0.5em;
6 }
7 </style>
2 <div class="text-monospace">Belajar Bootstrap</div>
3 </div>
138
Gambar: Tampilan dari class monospace Bootstrap
Secara internal, Bootstrap menggunakan urutan font berikut untuk class monospace:
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier

New", monospace;
Text Decoration
Property text-decoration CSS biasa dipakai untuk membuat efek garis bawah (underline),
garis tercoret(line-through), maupun untuk menghapus efek text-decoration yang sudah ada.
Ketiga fungsi ini bisa dibuat melalui 3 class Bootstrap berikut:
✔ .text-decoration-underline
✔ .text-decoration-line-through
✔ .text-decoration-none
33a.text-decoration.html
1 <style>
2 div > div {
4 padding: 0.5em;
5 margin: 0.5em;
6 }
7 </style>
2 <div class="text-decoration-underline">Belajar Bootstrap</div>
3 <div class="text-decoration-line-through">Belajar Bootstrap</div>
4 <div><a class="text-decoration-none" href="#">Belajar Bootstrap</a></div>
5 </div>
Gambar: Contoh penggunaan class text decoration Bootstrap
Di antara ketiga class ini, .text-decoration-none akan cukup sering kita pakai, terutama
untuk menghapus efek underline bawaan dari tag <a>.
139
5.11. Vertical alignment

Class vertical alignment tidak lain berisi property vertical-align CSS. Class ini ditujukan
untuk mengatur rata teks secara vertikal, namun hanya berlaku untuk kondisi tertentu seperti
jika teks tersebut berada di dalam sel tabel. Terdapat 6 class vertical alignment yang
disediakan Bootstrap:
✔ .align-baseline
✔ .align-top
✔ .align-middle
✔ .align-bottom
✔ .align-text-top
✔ .align-text-bottom
34.vertical_align.html
1 <style>
2 table {
4 margin: 0.5em;
5 height: 100px;
6 }
7 td{
8 border: 1px dashed black;
9 }
10 </style>
2 <table>
3 <tr>
4 <td class="align-baseline">baseline</td>
5 <td class="align-top">top</td>
6 <td class="align-middle">middle</td>
7 <td class="align-bottom">bottom</td>
8 <td class="align-text-top">text-top</td>
9 <td class="align-text-bottom">text-bottom</td>
10 </tr>
11 </table>
12 </div>
Penerapan class vertical alignment Bootstrap di dalam tabel
140
Class ini sebenarnya sangat menarik, namun dari sisi CSS memang terbatas untuk kondisi
tertentu saja, seperti di dalam sel tabel seperti contoh di atas serta inline dan inline-block
level element. Property vertical alignment tidak berpengaruh untuk block level element.
5.12. Sizing
Sizing adalah class Bootstrap untuk mengatur lebar dan tinggi sebuah element. Jika
menggunakan CSS, ini bisa di set dari property height dan width.
Untuk mengatur lebar element (width), Bootstrap menyediakan 6 class:

✔ .w-25
✔ .w-50
✔ .w-75
✔ .w-100
✔ .w-auto
✔ .mw-100
Semua class ini relatif kepada parent element. Class .w-25, .w-50, .w-75, dan .w-100, secara
berurutan dipakai untuk men-set lebar element sebesar 25%, 50%, 75% dan 100% dari lebar
parent element.
Class .w-auto dipakai untuk men-set lebar element dengan nilai auto. Secara default nilai auto
akan membuat lebar element sesuai dengan lebar parent element. Class .mw-100 dipakai untuk
men-set maksimal width 100% yang dalam kebanyakan situasi juga sama seperti auto.
Berikut contoh penggunaan width class Bootstrap:
35.sizing_width.html
1 <style>
2 div > div {
4 padding: 0.5em;
6 }
7 </style>
2 <div class="w-25">Width 25%</div>
6 <div class="w-auto">Width auto</div>
7 <div class="mw-100">Max Width 100%</div>
8 </div>
141
Hasil tampilan berbagai class width Bootstrap
Selain lebar element, Bootstrap juga menyediakan 6 class untuk tinggi element (height):
✔ .h-25
✔ .h-50
✔ .h-75
✔ .h-100
✔ .h-auto
✔ .mh-100
Penjelasan class ini sama seperti width, dimana class .h-25, .h-50, .h-75, dan .h-100 secara
berurutan dipakai untuk mengatur tinggi element sebesar 25%, 50%, 75% dan 100% dari tinggi
parent element.
Class .h-auto dipakai untuk men-set lebar element dengan nilai auto. Secara default, nilai
auto ini sama dengan tinggi konten yang ada di dalam element. Class .h-100 dipakai untuk
me-set maksimal height 100% yang dalam kebanyakan situasi juga sama seperti auto.
Berikut contoh penggunaan height class Bootstrap:
36.sizing_height.html
1 <style>
2 .container {
3 height: 200px;
4 background-color: lightgray;
5 }
6 div > div {
8 padding: 0.5em;
9 display: inline-block;
10 }
11 </style>
142
2 <div class="h-25">Height 25%</div>
6 <div class="h-auto">Height auto</div>
7 <div class="mh-100">Max Height 100%</div>
8 </div>
Hasil tampilan berbagai class height Bootstrap
Di sini tag <div> yang berisi class height Bootstrap saya set dengan display: inline-block.
Tujuannya agar tampilan class bisa berjejer ke samping namun ukuran element tetap bisa di
ubah dari property height CSS.
Sekedar pengingat, kita hanya bisa mengubah tinggi dan lebar dari sebuah element HTML jika
element tersebut bertipe block dan inline-block, dan tidak bisa untuk inline level element
seperti tag <span>, <i> atau <a>.
5.13. Position
Position adalah utilities class Bootstrap untuk mengatur penempatan sebuah element. Ini
merupakan penulisan singkat dari property position CSS.
Untuk mengatur penempatan element berbentuk "sticky" yang seolah-olah menempel di web
browser, Bootstrap menyediakan 3 class:
✔ .fixed-top
✔ .fixed-bottom
✔ .sticky-top
Berikut contoh penggunaan ketiga class ini:
37.position_sticky.html
1 <style>
143
2 article {
3 width: 200px;
4 }
5 .fixed-top,.fixed-bottom,.sticky-top{
6 background-color: lightgray;
7 width: 150px;
8 }
9 </style>
2 <div class="fixed-top">Fixed-top</div>
3 <div class="fixed-bottom">Fixed-bottom</div>
4
5 <article class="ms-5">
6 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo
7 magni veniam libero? Iusto impedit blanditiis ut, ex qui voluptatem
8 perspiciatis. Quas quasi distinctio nisi enim labore nam ullam sunt
9 reiciendis.
10 </p>
11 <div class="sticky-top">Sticky-top</div>
12 <p>Veritatis nobis ab saepe ratione enim facilis officia alias non rem
13 laborum, nihil quas quidem itaque accusantium consequatur. Distinctio
14 dolore necessitatibus maxime obcaecati consequatur reiciendis hic
15 autem qui magnam nisi.
16 </p>
17 <p>...</p>
18 <p>...</p>
19 <p>...</p>
20 </article>
21 </div>
Contoh penggunaan class .fixed-top, .fixed-bottom dan .sticky-top Bootstrap
Ketika halaman web di scroll ke bawah, class .fixed-top dan .fixed-bottom akan "menempel"
di bagian atas dan bawah web browser. Sedangkan class .sticky-top baru "menempel" begitu
bagian atas web browser melewati element tersebut.
144
Position class lain yang disediakan Bootstrap adalah sebagai berikut:

✔ .position-static
✔ .position-relative
✔ .position-absolute
✔ .position-fixed
✔ .position-sticky
Class ini bersesuaian dengan property position dari CSS. Berikut contoh penggunaannya:
38.position.html
1 <style>
2 div > div {
4 width: 100px;
5 height: 100px;
6 padding: 0.3em;
7 margin: 1em;
8 }
9 </style>
2 <div class="position-static">.position-static</div>
3 <div class="position-relative">.position-relative</div>
4 <div class="position-absolute">.position-absolute</div>
5 <div class="position-fixed">.position-fixed</div>
6 <div class="position-sticky">.position-sticky</div>
7 </div>
Contoh penggunaan berbagai class position Bootstrap
Tampilan di atas terlihat berantakan karena kita perlu mengatur kembali posisi setiap element.
Sebagai contoh, untuk .position-absolute perlu di set posisinya dari property top, left,
bottom atau right CSS.
Class untuk penempatan .position-absolute juga disediakan oleh Bootstrap dengan rumus:
<property>-<position>.
145
Untuk property, bisa di isi dengan salah satu dari top, start, bottom, dan end. Sedangkan untuk
position bisa di isi salah satu nilai 0, 50, 100. Ketiga nilai ini menggunakan satuan persen yang
dihitung dari sisi parent element.
Sebagai contoh, class .top-50 artinya tempatkan element sebesar 50% dari sisi atas parent
element. Atau class .end-100 artinya tempatkan element 100% dari sisi end (kanan) parent
element. Berikut praktek penggunaannya:
39.position_relative.html
1 <style>
2 .container {
3 height: 200px;
4 }
5 .box {
6 width: 40px;
7 height: 40px;
8 color: white;
9 font-size: 24px;
11 }
12 </style>
1 <div class="container mt-4 border border-secondary position-relative">

2 <div class="box bg-info position-absolute top-0 start-0"> 1 </div>
3 <div class="box bg-info position-absolute top-0 end-0"> 2 </div>
6 <div class="box bg-info position-absolute bottom-0 start-100"> 5 </div>
7 </div>
Gambar: Pengaturan posisi class position-absolute
Di sini saya membuat container dengan tinggi 200px dan di set dengan class .position-
relative. Di dalam container ini terdapat 5 tag <div> yang memiliki class .position-absolute.
Dengan demikian, posisi kelima box bisa diatur dengan class <property>-<position>.
146
Sebagai contoh, box 1 memiliki class .top-0 dan .start-0, maka sisi atas dan sisi kiri box akan
berada di titik 0%, 0% parent element, yakni di sudut kiri atas. Untuk box 2, posisinya berada
di .top-0 dan .end-0, sehingga berada di sisi kanan atas container. Begitu selanjutnya untuk
box 3, 4 dan 5.
Box 5 terlihat ada di luar container. Ini karena efek class .start-100 yang akan menempatkan
sisi kiri box berada di 100% sisi kanan container.
Jika butuh penjelasan lebih detail tentang pengaturan position absolute dan relative di
CSS, bisa dibaca pada buku CSS Uncover Duniailkom.
Sebagai pelengkap, Bootstrap menyediakan class .translate-middle yang dipakai untuk

mengatur agar posisi child element tepat di tengah-tengah. Contoh kasusnya ada di box 4,
meskipun saya menggunakan class top-50 dan start-50, namun posisi box 4 ini tidak pas di
tengah container. Ini karena perhitungan posisi dimulai dari sisi border box 4.
Maka agar perhitungan posisi dilakukan dari titik pusat box, tambahkan class .translate-
middle seperti contoh berikut:
40.position_relative_middle.html
1 <div class="container mt-4 border border-secondary position-relative">
2 <div class="box bg-info position-absolute top-0 start-0
3 translate-middle"> 1 </div>
4 <div class="box bg-info position-absolute top-0 end-0
10 <div class="box bg-info position-absolute bottom-0 start-100
12 </div>
Gambar: Efek tambahan class .translate-middle ke pengaturan posisi element
147
Dengan tambahan class .translate-middle ke dalam setiap box, maka perhitungan top,
bottom, start dan end dilakukan dari titik tengah element. Hasilnya box 4 akan pas berada di
tengah container.
Jika kita ingin mengatur titik tengah untuk satu sumbu saja, tersedia juga class .translate-
middle-x dan .translate-middle-y .
5.14. Interactions
Interactions merupakan utility class Bootstrap yang berisi beberapa class untuk efek interaksi
dengan teks yang ada. Terdapat 5 class yang masuk dalam kategori ini:
✔ .user-select-auto
✔ .user-select-all
✔ .user-select-none
✔ .pe-auto
✔ .pe-none
Tiga class pertama dipakai untuk mengatur apakah sebuah teks bisa di select atau tidak.
Class .user-select-auto adalah efek default, dimana kita bisa men-select teks seperti biasa.
Class .user-select-all akan membuat semua teks ter-select begitu teks di klik. Efek ini bisa
dipakai untuk membuat fitur copy-paste. Sedangkan class .user-select-none akan membuat
teks tidak bisa di copy sama sekali.
Dua class terakhir berhubungan dengan link. Class .pe-auto berisi efek default link (bisa di
klik). Sedangkan class .pe-none akan me-nonaktifkan link (tidak bisa di klik).
Berikut contoh penggunaan class interactions Bootstrap:
41.interaction.html
2 <p class="user-select-auto">Efek interaksi normal</p>
3 <p class="user-select-all">Sekali klik, semua paragraf ter-select</p>
4 <p class="user-select-none">Teks ini tidak bisa di select</p>
5
6 <p><a href="https://www.duniailkom.com" class="pe-auto">
7 Link normal ke website Duniailkom</a></p>
8 <p><a href="https://www.duniailkom.com" class="pe-none">
9 Link ini tidak bisa di klik</a></p>
10 </div>
148
Gambar: Hasil penggunaan class interactions bootstrap
Efek interaksi seperti ini relatif jarang kita pakai, namun bisa berguna untuk situasi tertentu.
5.15. Stacks
Stacks bisa dipakai untuk membuat tampilan element yang tersusun vertikal atau horizontal.
Class ini merupakan penulisan singkat dari beberapa property flexbox.
Untuk membuat tampilan vertikal, tambah class .vstack ke parent element, dan untuk
membuat tampilan horizontal, gunakan class .hstack. Selain itu class .gap-1 sampai .gap-5
bisa dipakai untuk mengatur jarak setiap element. Berikut contoh penggunaannya:
42.stacks.html
2 <div class="vstack gap-4">
3 <div class="bg-light border p-1">First item</div>
4 <div class="bg-light border p-1">Second item</div>
5 <div class="bg-light border p-1">Third item</div>
6 </div>
7 <div class="hstack gap-2 mt-5">
9 <div class="bg-light border p-1">Second item</div>
11 </div>
12 </div>
149
Gambar: Tampilan stack vertikal dan horizontal
Untuk tampilan horizontal, kita juga bisa menambah class .ms-auto atau .me-auto untuk
"mendorong" sisa element ke arah kiri atau kanan:
43.stacks_margin.html
2 <div class="hstack gap-3">
4 <div class="bg-light border p-1 ms-auto">Second item</div>
5 <div class="vr"></div>
7 </div>
8 <div class="hstack gap-3 mt-5">
10 <div class="vr"></div>
11 <div class="bg-light border p-1 me-auto">Second item</div>
13 </div>
14 </div>
Gambar: Tambahan class .ms-auto dan .me-auto untuk mendorong element
Di baris 4, class .ms-auto ditambahkan ke dalam tag <div> kedua, akibatnya tag ini dan sisa
element akan terdorong ke arah kanan. Di baris 11, terdapat class .me-auto, sehingga tag <div>
selanjutnya akan terdorong ke arah kanan.
Untuk tampilan horizontal seperti ini, Bootstrap juga menyediakan class .vr untuk membuat
150
garis pembatas seperti di baris 5 dan 10. Class .vr sendiri singkatan dari vertical rules.
Stack cocok dipakai untuk tampilan sederhana. Jika butuh pengaturan layout yang lebih
kompleks, bisa memakai Bootstrap flexbox utilities yang nantinya akan kita bahas dalam satu
bab tersendiri.
5.16. Stretched Link

Stretched link merupakan cara praktis untuk "melebarkan link" agar bisa melingkupi beberapa
element sekaligus.
Ini sering di jumpai pada halaman yang menampilkan banyak cuplikan artikel (snippets).
Cuplikan artikel bisa terdiri dari gambar thumbnail, judul, dan sedikit teks. Ketika salah
satunya di klik, akan terbuka halaman baru yang menampilkan artikel utuh.
Jika menggunakan cara normal, kita harus menambah tag <a> ke setiap element (gambar, judul
dan juga teks), atau bisa juga dengan melingkupi parent element ke sebuah tag <a>.
Menggunakan stretched link, cukup tambah class .stretched-link ke satu tag <a> yang ada di
dalam snippets, dan link tersebut akan melingkupi seluruh parent element sampai ditemukan
parent yang menggunakan class .position-relative.
44.stretched_link_1.html
2 <div class="row bg-light position-relative">
3 <div class="col-3 p-3">
4 <div class="w-100 h-100 bg-success"> </div>
5 </div>
8 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
9 Nihil possimus enim consectetur nemo architecto maxime velit fuga
10 nesciunt nulla unde hic ratione repudiandae doloribus, aliquam
11 magnam ea?</p>
12 <a href="https://getbootstrap.com" class="stretched-link">
13 Learn more...
14 </a>
15 </div>
16 </div>
151
Gambar: Efek hover link aktif untuk semua element row
Dalam contoh ini saya membuat struktur grid dengan 2 kolom. Kolom sebelah kiri memiliki tag
<div class="w-100 h-100 bg-success"> yang seolah-olah berisi gambar. Kemudian di sisi
kanan terdapat kolom dengan tag <h1>, <p> dan <a>. Tampilan ini mirip seperti cuplikan artikel
yang sering kita temui di halaman home sebuah web.
Untuk membuat efek stretched link, tag <a> di baris 12 harus ditambah class .stretched-link.
Efeknya, link akan "melebar" memenuhi parent element. Parent element yang dimaksud tidak
hanya tag <div class="col-6 p-3"> saja, tapi bisa ke parent element yang lebih luas.
Dalam contoh di atas, class .position-relative ada di baris 2, sehingga efek stretched link
akan berhenti sampai di sini.
Jika kita pindahkan class .position-relative ke dalam tag <div class="col-6 p-3"> di baris
6, maka efek link juga akan berhenti sampai di sana:
45.stretched_link_2.html
2 <div class="row bg-light">
4 <div class="w-100 h-100 bg-success"> </div>
5 </div>
6 <div class="col-6 p-3 position-relative">
9 Nihil possimus enim consectetur nemo architecto maxime velit fuga
10 nesciunt nulla unde hic ratione repudiandae doloribus, aliquam
11 magnam ea?</p>
12 <a href="https://getbootstrap.com" class="stretched-link">
13 Learn more...
14 </a>
15 </div>
16 </div>
152
Gambar: Kotak hijau tidak lagi menjadi link
Karena class .position-relative sekarang ada di kolom kedua, maka kolom pertama yang
berisi box hijau tidak lagi berfungsi sebagai link.
Fitur stretched link sangat praktis untuk membuat efek link ke banyak element sekaligus.
Biasanya, kita harus tempatkan tag <a> ke setiap element yang ingin dijalankan link, belum lagi
harus me-reset ulang style CSS yang terdampak dari penggunaan link.
---
Dalam bab ini kita telah membahas utilities dan helper class Bootstrap yang berisi berbagai
class bantu. Class-class ini nantinya akan digabung dengan komponen Bootstrap lain untuk
membuat design web yang menarik.
Berikutnya akan dibahas tentang class Bootstrap yang dipakai untuk mengolah konten.
153
Bootstrap Content
6. Bootstrap Content
Dalam pengertian umum, content (bahasa inggris) atau konten (bahasa indonesia) adalah
sebutan dari bagian utama website. Konten ini bisa terdiri dari teks artikel, teks berita, teks
tutorial, dan bisa juga berupa gambar serta video.
Bootstrap Content yang menjadi judul bab ini merujuk ke kumpulan class Bootstrap yang
mempengaruhi konten, terutama teks dan gambar. Kita akan membahas bootstrap reboot (CSS
reset versi Bootstrap), typography, pengaturan gambar serta pengaturan tabel.
Judul bab Bootstrap Content saya pakai karena di dalam dokumentasi resmi Bootstrap,
semua materi ini berada di kategori Content: getbootstrap.com/docs/5.2/content10.
6.1. Reboot
Reboot adalah istilah Bootstrap untuk menyebut kode CSS yang mengubah style bawaan web
browser. Dalam teori CSS, bootstrap reboot adalah bentuk lain dari CSS reset.
Sebagaimana yang kita ketahui, setiap web browser punya style bawaan. Misalnya tag <h1> di
style dengan huruf besar dan tebal (bold), font default di OS Windows adalah "Times New
Roman", block level element seperti <p> dan <h1> memiliki margin bawaan, dst.
Masalah bisa muncul karena setiap web browser punya default style yang berbeda-beda. Saat
ini perbedaan style antar setiap browser memang tidak terlalu besar (tidak seperti zaman
Internet Explorer dahulu), namun tetap ada satu ada dua hal yang berbeda.
Untuk mengatasinya, web designer menulis ulang style bawaan web browser dengan kode
CSS. Kode inilah yang disebut sebagai CSS reset. Isi CSS reset itu sendiri tetap berupa
perintah CSS biasa. Berikut contoh kode CSS reset yang paling sederhana:
* {
margin: 0;
padding: 0;
}
Kode di atas akan menghapus padding dan margin dari seluruh element HTML. Dengan CSS
reset, kita bisa mulai dari style yang seragam. Lebih lanjut tentang CSS reset serta plus
10 https://getbootstrap.com/docs/5.2/content
154
Bootstrap Content
minusnya bisa dibaca pada buku CSS Uncover Duniailkom.
Kembali ke reboot, ini adalah sebutan untuk CSS reset yang dibuat oleh tim Bootstrap. Pada
saat kita menyertakan kode <link rel="stylesheet" href="css/bootstrap.css"> , maka
bootstrap reboot sudah langsung aktif dan mengubah berbagai style bawaan web browser.
Apa saja yang diubah? Mari bahas dengan lebih detail.
Prinsip "don't reinvent the wheel" kembali dipakai Bootstrap ketika membuat CSS reboot.
Daripada menulis semuanya dari awal, Bootstrap memanfaatkan normalize (necolas.
github.io/normalize.css). Normalize adalah sebuah CSS reset* yang dibuat web designer
Nicolas Gallagher.
*Dari dokumentasinya dijelaskan bahwa normalize sedikit berbeda dari CSS reset.
Normalize hanya mengubah beberapa style dasar, bukan menghapus seluruh style
bawaan sebagaimana layaknya CSS reset.
Font Stack
Perubahan paling terlihat adalah jenis font yang dipakai Bootstrap.
Jika kita menggunakan sistem operasi Windows, font default di mayoritas web browser adalah
"Times New Roman". Oleh Bootstrap, font ini diubah menjadi sebagai berikut:
1 body {
2 font-family: system-ui, -apple-system, "Segoe UI", Roboto,
3 "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
4 sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
5 "Segoe UI Symbol", "Noto Color Emoji";
6 }
Dalam kode di atas, terdapat 13 urutan font (font-stack). Prinsip kerja dari property font-
family CSS adalah: font pertama akan diprioritaskan terlebih dahulu (yang ditulis paling awal).
Jika font pertama tidak tersedia di komputer user, web browser akan mencoba memakai font
kedua. Jika tidak ditemukan juga, akan lanjut ke font ketiga, dst.
Urutan penulisan font-stack di atas sudah dirancang sedemikian rupa oleh Bootstrap, dimana
setiap font punya fungsi masing-masing:
✔ system-ui: font generic cross platform.
✔ -apple-system: font ini akan dipakai jika halaman web dibuka dari web browser Safari
di OS X dan iOS (San Francisco).
✔ "Segoe UI": font ini akan dipakai jika halaman web dibuka dalam sistem operasi
Windows Vista ke atas (atau Windows XP jika sudah terinstall Micosoft Office).
✔ "Roboto": font ini akan dipakai jika halaman web dibuka dari web browser di sistem
155
Bootstrap Content
operasi Android.
✔ "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif: font ini akan dipakai
jika font sebelumnya tidak terdapat di komputer. Ini adalah classic font-stack yang
hampir tersedia di semua jenis komputer.
✔ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji":
kumpulan font khusus untuk karakter emoji.
Dengan melihat urutan font di atas, bagi yang menggunakan sistem operasi Windows
kemungkinan besar teks tampil dengan font "Segoe UI". Berikut perbedaan tampilan font
default (tanpa Bootstrap) dan dengan Bootstrap di web browser Firefox Windows 10:
01.font-stack.html
1 <p>The Quick Brown Fox Jumps Over the Lazy Dog</p>
Tampilan teks yang sama dari default web browser (kiri) dan dengan Bootstrap (kanan)
Jenis font sebenarnya lebih ke pilihan design daripada hal teknis. Jika kurang suka dengan font
"Segoe UI" yang di pakai Bootstrap, tentu bisa diubah dengan font lain, misalnya menggunakan
font dari Google Font (fonts.google.com) yang menyediakan ribuan jenis font.
Sebagai tambahan, warna teks default yang digunakan Bootstrap bukan hitam atau #000000,
tapi sedikit abu-abu dengan kode RGB #212529.
Kode reboot Bootstrap untuk tag <body>
Box Sizing
Box-sizing adalah property CSS yang mengatur cara perhitungan lebar dan tinggi element.
Secara default bawaan web browser, semua element HTML menggunakan box-sizing:
content-box, namun Bootstrap reboot mengubahnya menjadi box-sizing:border-box.
156
Bootstrap Content
Apa perbedaan antara box-sizing:content-box dengan box-sizing:border-box? Kita akan

bahas menggunakan contoh berikut:
02.box-sizing.html
1 <!DOCTYPE html>
2 <html lang="id">
3 <head>
7 <style>
8 div {
9 width: 200px;
10 height: 100px;
13 margin: 10px;
14 padding: 10px;
15 }
16 .box1 {
17 box-sizing: content-box;
18 }
19 .box2 {
20 box-sizing: border-box;
21 }
22 </style>
23 </head>
24 <body>
25 <div class="box1">Box 1</div>
27 </body>
28 </html>
Perbedaan tampilan dari box-sizing: content-box (atas) dengan box-sizing: border-box (bawah)
Di sini saya hanya menggunakan kode HTML dan CSS standar (tanpa Bootstrap).
Kedua box dibuat dari tag <div> yang sama-sama di set dengan width 200 pixel, height 100
pixel, serta padding, border dan margin masing-masing 10 pixel di semua sisi. Bedanya adalah,
157
Bootstrap Content
Box 1 menggunakan box-sizing:content-box , sedangkan Box 2 menggunakan box-

sizing:border-box. Seperti yang terlihat, tampilan kedua box ini juga berbeda.
Seperti yang kita singgung sebelumnya, secara default semua element HTML menggunakan
box-sizing:content-box , meskipun kode ini tidak ditulis. Dalam content-box, besar element
didapat dari penjumlahan width/height + padding + border. Dengan kata lain, nilai property
width dan height tidak mencerminkan ukuran sebenarnya dari sebuah element.
Dalam contoh di atas, lebar dan tinggi Box 1 didapat dari perhitungan berikut:
 Total lebar = 200px (width) + 10px (padding-left) + 10px (padding-right) + 10px (border-
left) + 10px (border-right) = 240px.
 Total tinggi = 100px (height) + 10px (padding-top) + 10px (padding-bottom) + 10px

(border-top) + 10px (border-bottom) = 140px.
Menggunakan Developer Tools atau Inspect Element, terlihat ilustrasi berikut:
Gambar: Perhitungan tinggi dan lebar element dari box-sizing: content-box
Meskipun agak rumit, tapi inilah cara kerja web browser dalam menghitung total lebar dan
tinggi element. Nilai property width dan height dipertahankan sebagai ukuran untuk bagian
konten saja, karena itulah jenis ini disebut sebagai content-box. Penambahan padding dan
border akan memperbesar ukuran element agar tidak mengganggu lebar dan tinggi konten.
Ketika nilai property CSS box-sizing diubah menjadi border-box, maka perhitungan lebar dan
tinggi element berubah total. Sekarang property width dan height menjadi total lebar dan
tinggi element secara keseluruhan. Setiap penambahan padding atau margin, itu akan
mengurangi bagian konten element ke arah dalam, bukan keluar element sebagaimana
content-box.
Dalam Box 2, nilai property width adalah 200 pixel dan height 100 pixel. Ketika ditambahkan
padding 10px dan border 10px, web browser akan mempertahankan bahwa 200px dan 100px
ini adalah total dari konten + padding + border.
Berikut perhitungan lebar konten dari Box 2:
158
Bootstrap Content
 Lebar konten = 200px (width) -10px (padding-left) - 10px (padding-right) -10px

(border-left) - 10px (border-right) = 160px.
 Tinggi konten = 100px (height) - 10px (padding-top) - 10px (padding-bottom) - 10px

(border-top) - 10px (border-bottom) = 60px.
Harap diperhatikan bahwa lebar 160px dan tinggi 60px di atas adalah lebar bagian konten di
dalam element, bukan lebar keseluruhan element seperti perhitungan pada content-box.
Gambar: Perhitungan tinggi dan lebar element dari box-sizing: border-box
Keuntungan dari border-box adalah, kita tidak perlu khawatir penambahan padding dan
border akan mempengaruhi ukuran total element.
Jika anda pernah merancang layout menggunakan CSS, tentu merasakan betapa repotnya
mengubah besar border di satu element ketika website sudah selesai. Perubahan lebar border
di satu element bisa "menghancurkan" semua tampilan web karena perlu ruang untuk border
tersebut. Kita terpaksa menghitung ulang total besar element serta mengubah nilai width dan
height untuk mengakomodasi penambahan border tersebut.
Dengan memakai sistem border-box, penambahan border dan padding tidak akan berefek ke
element lain, karena perubahan ukuran terjadi ke arah dalam, bukan keluar.
Karena alasan inilah Bootstrap menerapkan box-sizing:border-box dengan kode berikut ini:
*, ::before, ::after {
box-sizing: border-box;
}
Efek dari kode di atas, seluruh element HTML (termasuk pseudo element ::before dan
::after) akan memakai perhitungan box-sizing:border-box secara default, kecuali kita ubah
manual menjadi box-sizing:content-box. Berikut pembuktiannya:
03.box-sizing_bootstrap.html
1 <!DOCTYPE html>
2 <html lang="id">
3 <head>
159
Bootstrap Content
8 <style>
9 div {
10 width: 200px;
11 height: 100px;
14 margin: 10px;
15 padding: 10px;
16 }
17 .box2 {
18 box-sizing:content-box;
19 }
20 </style>
21 </head>
22 <body>
26 </body>
27 </html>
Gambar: Perbedaan tampilan dari bawaan Boostrap (atas) dengan box-sizing:content-box (bawah)
Dalam kode ini saya sudah menggunakan file Bootstrap. Sekarang Box 1 terlihat lebih kecil
karena Bootstrap menerapkan box-sizing:border-box. Untuk Box 2 terlihat lebih besar sebab
saya ubah manual menjadi box-sizing:content-box .
Bagi yang sudah terbiasa menggunakan box-sizing:content-box , sistem box-sizing:border-

box mungkin terasa aneh, tapi ini akan memudahkan kita sebagai web designer ke depannya.
Rem Sizing
Untuk pengukuran nilai element, bootstrap reboot mengubah satuan bawaan web browser dari
em menjadi rem. Rem merupakan singkatan dari root em, yakni satuan yang merujuk ke
160
Bootstrap Content
ukuran font-size dari root element. Dalam HTML, root element ini adalah tag <html>.
Satuan em dan rem mirip satu sama lain karena sama-sama menggunakan font-size sebagai
patokan. Bedanya, satuan em merujuk ke font-size parent element, sedangkan satuan rem
merujuk kepada font-size dari root element, yakni tag <html>.
Bootstrap lebih memilih satuan rem untuk menghindari masalah "penumpukan ukuran" pada
element bersarang (nested element), yakni ketika sebuah element yang berada di dalam
element lain. Berikut contoh kasusnya:
04.rem_vs_em.html
1 <!DOCTYPE html>
2 <html lang="id">
3 <head>
7 <style>
8 div {
9 margin-top: 10px;
10 }
11 .class_em {
12 font-size: 1.3em;
13 }
14 .class_rem {
15 font-size: 1.3rem;
16 }
17 </style>
18 </head>
19 <body>
20
21 <div class="class_em">Child Element 1, font-size: 1.3em
25 </div>
26 </div>
27 </div>
28 </div>
29
30 <hr>
31
32 <div class="class_rem">Child Element 1, font-size: 1.3rem
36 </div>
37 </div>
38 </div>
39 </div>
40
41 </body>
161
Bootstrap Content
42 </html>
Gambar: Perbandingan font-size: 1.3em (atas) dengan font-size: 1.3rem (bawah)
Pada contoh ini saya tidak menggunakan Bootstrap, hanya kode HTML dan CSS biasa saja.
Di dalam tag <body>, terdapat 2 kelompok tag <div> yang saling bertumpuk dengan struktur
sama persis. Untuk kelompok pertama (atas), menggunakan kode CSS font-size:1.3em,
sedangkan untuk kelompok kedua (bawah), memakai font-size:1.3rem pada setiap tag <div>.
Secara default, ukuran font-size dari root element atau tag <html> adalah sebesar 16 pixel. Nilai
ini menjadi patokan dari ukuran em maupun rem.
Pada kelompok pertama, semua tag <div> di set dengan font-size:1.3em. Tag <div> terluar
akan memakai ukuran font-size sebesar 1.3 kali ukuran font size parent element. Apa parent
elementnya? Yakni tag <body>.
Namun karena tag <body> tidak memiliki nilai font-size di kode CSS, maka proses lanjut ke
parent element diatasnya, yakni tag <html>. Tag <html> ternyata memiliki font-size 16px
(bawaan web browser), maka ukuran font-size tag <div> terluar menjadi 1.3 * 16px = 20,8 pixel.
Kita bisa lihat hasil ini dari Developer Tools. Cari element tersebut, lalu pilih tab computed:
Melihat perhitungan font-size dari Web Developer Tools di web browser Firefox
162
Bootstrap Content
Untuk tag <div> kedua yang ada di dalam tag <div> pertama, juga di set dengan nilai font-
size:1.3em. Sehingga ukuran font menjadi 1.3 * 20.8px (font-size parent element) = 27.04 px.
Untuk tag <div> ketiga yang berada di dalam tag <div> kedua, di set dengan nilai font-
size:1.3em. Sehingga ukuran font menjadi 1.3 * 27.04px (font-size parent element) = 35.15 px.
Hal yang sama juga terjadi untuk tag <div> keempat (yang paling dalam), dimana perhitungan
ukuran font-sizenya adalah 1.3 * 35.15px = 45.7 px.
Melihat perhitungan font-size dari Web Developer Tools di web browser Firefox
Inilah efek "penumpukan ukuran" jika memakai satuan em, sebab patokannya relatif ke font-
size parent element.
Hal ini tidak terjadi untuk kelompok tag <div> kedua yang menggunakan font-size:1.3rem.
Dimana pun posisi element, ukuran font-sizenya adalah 1.3 kali font-size tag <html>. Karena
font-size tag <html> adalah 16 pixel, maka seluruh tag <div> memiliki ukuran font-size 1.3 *
16px = 20.8px.
Secara internal, kode reboot bootstrap banyak menimpa dan menukar satuan nilai default web
browser dari em menjadi rem. Khusus untuk font-size, Bootstrap menggunakan kode berikut:
body {
font-size: 1rem;
}
Artinya, semua child element yang ada di dalam tag <body> ukuran font-nya adalah 1rem.
Margin-top dan Margin-bottom

Efek lain yang diubah oleh Bootstrap reboot adalah menghapus margin-top dari mayoritas
element dan hanya menggunakan margin-bottom. Ini dilakukan untuk menghindari berbagai
efek seperti margin collapsing.
Sebagai contoh, dari bawaan web browser tag <h1> dan <p> memiliki margin-top dan margin
bottom sekaligus seperti tampilan berikut:
163
Bootstrap Content
Secara bawaan, tag <h1> memiliki margin-top dan margin-bottom
Tampilan di atas adalah hasil dari Inspect Element tag <h1>. Warna kuning di bagian atas dan
bawah adalah tanda untuk margin, yakni margin-top (atas) dan margin-bottom (bawah).
Nantinya, efek margin collapsing di CSS akan mencegah penumpukan margin-bottom element
pertama dengan margin-top dari element kedua.
Untuk menghindari efek-efek yang tidak diinginkan, bootstrap reboot menghapus margin-top
dan hanya menggunakan margin-bottom saja. Secara teknis, heading element tag <h1>, <h2>,
hingga <h6> di set dengan margin-bottom:0.5rem. Untuk paragraf element, yakni tag <p>, di
set dengan margin-bottom:1rem.
Berikut tampilan yang sama tapi kali ini menggunakan Bootstrap:
05.margin.html
1 <h1>Belajar Bootstrap dari Duniailkom</h1>
6 <p>Belajar Bootstrap dari Duniailkom</p>
Dengan Bootstrap reboot, tag <h1> hanya memiliki margin-bottom saja
164
Bootstrap Content
Tampilan di atas adalah hasil dari Inspect Element tag <h1> yang sudah menggunakan
Bootstrap. Perhatikan warna kuning sebagai penanda margin sekarang hanya ada di sisi bawah
saja. Ini berlaku untuk hampir semua block level element, termasuk list element seperti tag
<ol> dan <ul>:
06.list.html
1 <ul>
2 <li>Lorem ipsum dolor sit amet</li>
3 <li>Facilisis in pretium nisl aliquet</li>
4 <li>Nulla volutpat aliquam velit
5 <ul>
6 <li>Phasellus iaculis neque</li>
7 <li>Purus sodales ultricies</li>
8 <li>Ac tristique libero volutpat at</li>
9 </ul>
10 </li>
11 <li>Faucibus porta lacus fringilla vel</li>
12 <li>Eget porttitor lorem</li>
13 </ul>
14
15 <ol>
17 <li>Consectetur adipiscing elit</li>
18 <li>Integer molestie lorem at massa</li>
19 <li>Facilisis in pretium nisl aliquet</li>
21 </ol>
Gambar: Hasil tampilan list element tanpa Bootstrap (kiri) dan dengan Bootstrap (kanan)
Gambar di atas memperlihatkan hasil tampilan list element tanpa Bootstrap (kiri) dan dengan
Bootstrap (kanan). Tanpa Bootstrap, list element memiliki margin-top dan margin-bottom.
Dengan Bootstrap hanya ada margin-bottom saja yang di set sebesar 1rem.
165
Bootstrap Content
Element Style
Empat materi yang kita bahas sebelum ini, font stack, box sizing, rem sizing dan margin
berdampak global pada semua element. Selain itu, Bootstrap reboot juga mengubah tampilan
beberapa element yang secara khusus berdampak pada element itu saja.
Element style dari Bootstrap reboot yang akan kita bahas adalah description list, table, form,
address, blockquote, abbr dan summary.
Perubahan dari Bootstrap reboot juga dibuat seminimal mungkin. Untuk efek lanjutan, bisa di
dapat dengan menambah class khusus. Sebagai contoh untuk men-style tag <tabel> nantinya
terdapat class .table-dark, .table-bordered, .table-sm, .table-responsive, dll. Class-class
ini akan kita pelajari di bagian table content secara terpisah.
Berikut perbedaan tampilan description list tanpa dan dengan Bootstrap:
07.desc_list.html
1 <dl>
2 <dt>Description lists</dt>
3 <dd>A description list is perfect for defining terms.</dd>
4 <dt>Euismod</dt>
5 <dd>Vestibulum id ligula porta felis euismod semper lacinia odio sem.</dd>
6 <dd>Donec id elit non mi porta gravida at eget metus.</dd>
7 <dt>Malesuada porta</dt>
8 <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
9 </dl>
Hasil tampilan description list element tanpa Bootstrap (kiri) dan dengan Bootstrap (kanan)
Description list adalah jenis list yang dipakai untuk membuat struktur mirip kamus, yakni list
yang memiliki judul beserta keterangannya. Untuk membuat description list, butuh perpaduan
dari tag <dt> dan <dd>.
Seperti yang terlihat, Bootstrap reboot mengubah style kedua element ini. Property CSS
margin-left pada tag <dd> di set menjadi 0 serta ditambahkan margin-bottom:.5rem . Selain
itu isi teks tag <dt> di buat menjadi tebal (bold).
166
Bootstrap Content
Untuk table element, berikut hasil tampilan tanpa dan dengan Bootstrap:
08.table.html
1 <table>
2 <caption>
3 Disini tempat untuk table caption
4 </caption>
5 <thead>
6 <tr>
7 <th>Table heading</th><th>Table heading</th><th>Table heading</th>
8 </tr>
9 </thead>
10 <tbody>
11 <tr>
12 <td>Table cell</td><td>Table cell</td><td>Table cell</td>
13 </tr>
14 <tr>
16 </tr>
17 <tr>
19 </tr>
20 </tbody>
21 </table>
Hasil tampilan table element tanpa Bootstrap (kiri) dan dengan Bootstrap (kanan)
Selain jenis font, Bootstrap memindahkan posisi table caption dari sisi atas ke bagian bawah
tabel. Kemudian juga ada tambahan property border-collapse:collapse.
Untuk address element, berikut hasil tampilan tanpa dan dengan Bootstrap:
09.address.html
1 <div>
2 <address>
3 <strong>Duniailkom</strong><br>
4 Jl. Perintis Kemerdekaan No.1<br>
5 Kel. Aman Makmur, Kec. Sukses Jaya<br>
6 <abbr title="Phone">HP:</abbr> 083180285808
7 </address>
167
Bootstrap Content
8
9 <address>
10 <strong>Andre Pratama</strong><br>
11 <a href="mailto:#">duniailkom@gmail.com</a>
12 </address>
13 </div>
Hasil tampilan address element tanpa Bootstrap (kiri) dan dengan Bootstrap (kanan)
Tag <address> adalah tag khusus untuk membuat alamat (address). Perubahan yang dibuat
oleh Bootstrap reboot berupa jenis font, menghapus efek huruf miring (italic), serta tambahan
margin-bottom:1rem.
Untuk blockquote element, berikut hasil tampilan tanpa dan dengan Bootstrap:
10.blockquote.html
1 <div>
2 <blockquote>
3 <p>I knew that if I failed I wouldn't regret that,
4 but I knew the one thing I might regret is not trying.</p>
5 <cite title="Source Title">Jeff Bezos (founder & CEO of Amazon.com)</cite>
6 </blockquote>
7 </div>
Hasil tampilan blockquote element tanpa Bootstrap (kiri) dan dengan Bootstrap (kanan)
Tag <blockquote> dan <cite> dipakai untuk membuat kutipan. Secara default bawaan web
browser, tag <blockquote> memiliki margin 1em 40px. Bootstrap menggantinya dengan 0 0
1rem, yakni hanya ada margin-bottom sebesar 1rem.
Untuk abbr element, berikut hasil tampilan tanpa dan dengan Bootstrap:
168
Bootstrap Content
11.abbr.html
1 <div>
2 <p>
3 <abbr title="Hypertext Markup Language">HTML</abbr> dan
4 <abbr title="Cascading Style Sheet">CSS</abbr>
5 wajib dipahami sebelum belajar Bootstrap.
6 </p>
7 </div>
Hasil tampilan abbr element tanpa Bootstrap (kiri) dan dengan Bootstrap (kanan)
Tag <abbr> bisa dipakai untuk membuat singkatan yang menampilkan kepanjangan kata dalam
bentuk teks pop-up. Perubahan yang dilakukan Bootstrap adalah menambah efek cursor dari
property CSS cursor:help. Tanpa Bootstrap, tidak ada tanda cursor apapun, dimana cursor
berbentuk normal berupa tanda 'I'.
Penambahan efek cursor ini juga dilakukan untuk details dan summary element:
12.summary.html
1 <div>
2 <details>
3 <summary>Pengertian HTML</summary>
4 <p>HTML atau HyperText Markup Language adalah bahasa markup standar yang
5 digunakan untuk membuat halaman web</p>
6 </details>
7 <details open>
8 <summary>Pengertian CSS </summary>
9 <p>Cascading Style Sheets (CSS) adalah bahasa style sheet yang digunakan
10 untuk mengatur tampilan dan format dari sebuah dokumen yang ditulis
11 dengan bahasa markupâ€.</p>
12 </details>
13 </div>
Hasil tampilan details dan summary element tanpa Bootstrap (kiri) dan dengan Bootstrap (kanan)
169
Bootstrap Content
Tag <details> dan <summary> adalah tag baru dari HTML 5.1 yang berfungsi untuk membuat
konten teks yang dikenal sebagai accordion. Isi teks awalnya tersembunyi dan baru tampil jika
judul di klik. Lebih jauh tentang tag <details> dan <summary> element sudah pernah saya
bahas di buku HTML Uncover.
Sama seperti tag <abbr>, Bootstrap menambah efek mouseover berupa cursor "tangan" yang
berasal dari property CSS cursor:pointer.
Terakhir (dan yang cukup kompleks), Bootstrap mengubah tampilan form element, yakni tag-
tag HTML untuk membuat form. Berikut perbedaan tampilannya:
Hasil tampilan form element tanpa Bootstrap (kiri) dan dengan Bootstrap (kanan)
Untuk menghemat tempat saya tidak menampilkan kode program yang dipakai. Jika tertarik,
silahkan buka file 13.form.html di file belajar_bootstrap.zip.
Kalau dilihat sekilas, tampilan form bootstrap tidak lebih cantik daripada bawaan web browser.
Namun seperti yang dibahas di awal materi bootstrap reboot, proses mempercantik element
menjadi pilihan opsional di dalam Bootstrap, caranya dengan menambah berbagai class yang
170
Bootstrap Content
akan kita pelajari di bab tersendiri.
Salah satu efek paling terlihat adalah bootstrap menghapus border, padding dan margin dari
tag <fieldset> dan <legend>. Tujuannya agar bisa dipakai sebagai "container" bagi beberapa
komponen form. Secara default bawaan web browser, tag <fieldset> dan <legend>
memberikan efek bingkai di sekeliling form.
6.2. Typography
Dalam materi tentang bootstrap reboot, kita telah membahas style dasar apa saja yang
diterapkan secara default. Efek tambahan bisa didapat dengan menulis class opsional, dimana
salah satunya adalah class tentang typography. Typography sendiri adalah seni mengatur
huruf/teks untuk membuatnya tampak menarik dan lebih mudah dibaca.
Sekedar pengingat, berikut global style dari bootstrap reboot untuk typography:
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto,"Helvetica Neue",
Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color
Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
}
Style di atas berlaku untuk semua teks, kecuali ditimpa dengan style lain baik dari
penambahan class bootstrap atau dari kode CSS yang kita tambah sendiri.
Heading
Untuk membuat heading, di dalam HTML tersedia tag <h1> hingga <h6>. Selain itu bootstrap
juga menyediakan class .h1, .h2, .h3, .h4, .h5 dan .h6 untuk membuat efek yang sama. Class
ini bisa dipakai dalam situasi kita perlu efek heading tapi tidak ingin menggunakan heading
element. Berikut tampilan dari class ini:
14.typography_heading.html
2
3 <div style="float:left">
4 <h1>h1. Bootstrap heading</h1>
10 </div>
171
Bootstrap Content
11
12 <div style="float: right;">
13 <p class="h1">h1. Bootstrap heading</p>
19 </div>
20
21 </div>
Hasil tampilan heading element (kiri) dengan heading class bootstrap (kanan)
Tampilan teks di sebelah kiri menggunakan heading element tag <h1> sampai <h6>, sedangkan
teks di sebelah kanan adalah tag <p> yang berisi class .h1 hingga .h6. Terlihat tampilan
keduanya sama persis.
Untuk mendapatkan efek lanjutan, heading element bisa digabung dengan berbagai utility
class bootstrap yang sudah kita pelajari dalam bab sebelumnya:
15.typography_customizing_heading.html
1 <h3 class="text-center">Bootstrap Uncover
2 <small class="text-muted">panduan belajar framework CSS</small>
3 </h3>
Gabungan heading element <h1>, tag <small>, serta class .text-center dan .text-muted
Di sini saya mengombinasikan heading element <h3> dengan class .text-center serta tag
<small> dengan class .text-muted. Tag <small> berfungsi untuk membuat teks dengan ukuran
yang lebih kecil, kemudian class .text-muted membuat efek teks berwarna abu-abu.
172
Bootstrap Content
Display
Heading element seperti tag <h1> cocok dipakai untuk judul artikel. Jika kita ingin teks yang
lebih besar, bootstrap menyediakan class .display-1 hingga .display-4. Berikut contoh
penggunaan class display bootstrap:
16.typography_display_headings.html
1 <h1 class="display-1">Display 1</h1>
Tampilan class display bootstrap
Dengan teks yang terbilang "sangat besar", class display ini pas digunakan sebagai judul teks
untuk keperluan display seperti dalam slideshow.
Lead
Lead adalah class khusus untuk membuat sebuah paragraf tampil "beda", yakni dengan huruf
yang lebih besar daripada paragraf lain. Berikut contoh penggunaannya:
17.typography_lead.html
1 <p class="lead">
2 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
3 Duis mollis, est non commodo luctus.</p>
4 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat
5 vitae alias, ducimus cupiditate inventore impedit eos aspernatur ea
6 expedita neque quam, totam minus obcaecati fugit iste possimus
7 voluptates consectetur illo?</p>
173
Bootstrap Content
Tampilan class .lead bootstrap
Paragraf yang ditambahkan class .lead tampil dengan huruf besar dan sedikit lebih ramping.
Secara teknis, Bootstrap memakai property CSS font-size:1.25rem dan font-weight:300
untuk mendapatkan efek ini. Class .lead cocok dipakai untuk bagian artikel yang ingin lebih
diutamakan.
Inline Text Elements

Bootstrap tidak banyak mengubah style tampilan dari inline element. Berikut diantaranya:
18.typography_inline_text.html
1 <p>Mark element bisa dipakai untuk <mark>highlight text</mark>.</p>
2 <p><del>Ini dimaksudkan sebagai teks yang akan dihapus</del></p>
3 <p><s>Ini dimaksudkan sebagai teks yang tidak akurat</s></p>
4 <p><ins>Ini dimaksudkan sebagai teks tambahan</ins></p>
5 <p><u>Ini dimaksudkan sebagai teks dengan garis bawah</u></p>
6 <p><small>Ini dimaksudkan sebagai teks dengan huruf lebih kecil</small></p>
7 <p><strong>Teks ini akan tampil dengan huruf tebal</strong></p>
8 <p><strong>Teks ini juga tampil dengan huruf tebal</strong></p>
9 <p><em>Teks ini akan tampil dengan huruf miring</em></p>
10 <p><i>Teks ini juga akan tampil dengan huruf miring</i></p>
Tampilan berbagai inline element HTML dengan bootstrap aktif
174
Bootstrap Content
Khusus untuk tag <mark> dan <small>, tersedia class .mark dan .small untuk mendapatkan
efek yang sama:
19.typography_inline_text_class.html
1 <p>Mark class bisa dipakai untuk <span class="mark">highlight text</span>.</p>
2 <p><span class="small">Ini sebagai teks dengan huruf lebih kecil</span></p>
Tampilan class .mark dan .small bootstrap
Blockquotes
Untuk membuat kutipan, tersedia tag <blockquote>. Bootstrap menyediakan class
.blockquote serta .blockquote-footer untuk mempercantik tampilan tag ini. Berikut contoh
penggunaannya:
20.typography_blockquotes.html
1 <blockquote class="blockquote">
2 <p>Your most unhappy customers are your greatest source of learning</p>
3 <footer class="blockquote-footer">
4 <cite>Bill Gates</cite> (Microsoft co-founder)
5 </footer>
6 </blockquote>
Contoh penggunaan class .blockquote dan .blockquote-footer bootstrap
Efek dari tambahan class .blockquote, ukuran teks membesar menjadi 1.25rem serta terdapat
margin-bottom sebesar 1rem. Sedangkan efek dari class .blockquote-footer akan membuat
teks sedikit lebih kecil, berwarna abu-abu serta ada tambahan garis "-" di bagian kiri teks. Efek
terakhir ini dibuat bootstrap menggunakan pseudo selector ::before.
Agar lebih menarik, kita bisa tambah utility class bootstrap seperti contoh berikut:
21.typography_blockquotes_utility.html
1 <blockquote class="blockquote text-center">
175
Bootstrap Content
2 <p>Design is not just what it looks like and feels like.

3 Design is how it works</p>
5 <cite>Steve Jobs</cite> (Apple Inc. co-founder, chairman and CEO)
6 </footer>
7 </blockquote>
8
9 <blockquote class="blockquote text-end">
10 <p>A 'startup' is a company that is confused about
11 (1) what its product is, (2) who its customers are, and
12 (3) how to make money.</p>
14 <cite>Dave McClure</cite> (founder of the accelerator 500 Startups.)
15 </footer>
16 </blockquote>
Penambahan utilitity class bootstrap ke dalam blockquote
Di sini saya mengubah rata teks tag <blockquote> menggunakan utility class .text-center
dan .text-end (baris 1 dan 9).
Lists
Selain membuat daftar atau list, list element juga sering dipakai untuk membuat struktur menu
navigasi website. Salah satu langkah untuk mengkonversi list menjadi menu navigasi adalah
menghapus karakter list yang ada di sisi kiri (karakter "bullet" atau "numbering"). Ini bisa
dilakukan dengan kode CSS list-style:none, atau untuk bootstrap tersedia class .list-
unstyled yang menghasilkan efek serupa.
22.typography_lists.html
1 <ul class="list-unstyled">
3 <li>Consectetur adipiscing elit</li>
4 <li>Nulla volutpat aliquam velit
5 <ul>
6 <li>Phasellus iaculis neque</li>
7 <li>Vestibulum laoreet porttitor sem</li>
8 <li>Ac tristique libero volutpat at</li>
9 </ul>
176
Bootstrap Content
10 </li>
11 <li>Faucibus porta lacus fringilla vel</li>
13 </ul>
Contoh penggunaan class .list-unstyled bootstrap
Class .list-unstyled akan menghapus karakter list di sisi kiri, namun ini berlaku hanya untuk
1 level kedalaman saja. Untuk nested list seperti di atas, kita harus tulis kembali class .list-
unstyled untuk setiap tag <ul> dan <ol>.
Class lain yang disediakan bootstrap adalah untuk mengubah tampilan list dari block menjadi
inline. Ini bisa didapat dari kombinasi class .list-inline dan .list-inline-item seperti
contoh berikut:
23.typography_lists_inline.html
1 <ul class="list-inline">
2 <li class="list-inline-item">Lorem ipsum</li>
3 <li class="list-inline-item">Phasellus iaculis</li>
4 <li class="list-inline-item">Nulla volutpat</li>
5 </ul>
Mengubah tampilan list menjadi inline level element
Class .list-inline ditempatkan ke dalam tag <ul>, sedangkan class .list-inline-item

ditempatkan ke semua tag <li>. Hasilnya, list item berjejer dari kiri ke kanan sebagaimana
inline level element.
Code
HTML menyediakan berbagai element untuk membuat teks teknis seperti kode program,
diantaranya tag <pre>, <code>, <kbr>, <var>, dan <samp>. Semua tag ini juga "dipoles" oleh
177
Bootstrap Content
Bootstrap. Berikut contoh tampilannya:
24.typography_code.html
1 <p>Tag <code><blockquote></code> dan <code><cite></code>
2 bisa dipakai untuk membuat kutipan.</p>
3
4 <p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>
5
6 <p>Untuk masuk ke Web Developer Tools, tekan kombinasi tombol
7 <kbd>ctrl</kbd> + <kbd>shift</kbd> + <kbd>i</kbd></p>
8
9 <p>Pesan errornya adalah:
10 <samp> Keyboard not found, Press F1 to continue</samp></p>
11
12 <pre>
13 <blockquote>
14 My number one piece of advice is: you should learn how to program
15 </blockquote>
16 <cite>Mark Zuckerberg</cite>
17 </pre>
Tampilan tag <pre>, <code>, <kbr>, <var>, dan <samp> dengan bootstrap
Yang cukup menarik, tag <code> berwarna pink dan tag <kbr> di-style menjadi mirip tombol.
Untuk tag <pre>, akan muncul horizontal scrollbar jika lebar jendela web browser terlalu kecil:
Horizontal scrollbar tampil jika lebar jendela web browser terlalu kecil
178
Bootstrap Content
Sebelumnya di Bootstrap 4 terdapat class .pre-scrollable untuk membuat kotak tag <pre>
setinggi 340px. Di Bootstrap 5 class ini sudah tidak ada lagi (dihapus), akan tetapi efek yang
sama bisa didapat dari property max-height menggunakan kode CSS biasa:
25.typography_code_scrollbar.html
1 <pre style="max-height:340px">
3 ...
4 ...
5 ...
6 </blockquote>
7 </pre>
Gambar: Vertical scrollbar untuk tag <pre> sebagai pengganti class .pre-scrollable
6.3. Image & Figure

Kali ini kita masuk ke class Bootstrap untuk mempercantik tampilan gambar, diantaranya
untuk membuat gambar yang responsive, efek thumbnail, serta membuat keterangan (caption).
Responsive Images
Meskipun sudah menggunakan Bootstrap, namun secara default gambar itu sendiri belum
responsive. Untuk itu tambahkan class .img-fluid ke dalam tag <img>. Berikut contoh
penggunaannya:
26.image_responsive.html
2
3 <div class="row">
179
Bootstrap Content
5 <img src="img/pic1.jpg" class="img-fluid">
6 </div>
8 <img src="img/pic1.jpg">
9 </div>
10 </div>
11
12 </div>
Perbedaan gambar responsive (kiri) dengan yang tidak responsive (kanan)
Dalam contoh ini saya membuat dua buah tag <img> dengan gambar yang sama persis. Tag
<img> pertama ditambahkan class .img-fluid. Efek dari penambahan class ini baru terlihat
ketika lebar layar diperkecil.
Untuk tag <img> dengan tambahan class .img-fluid, gambar ikut mengecil sesuai ukuran
parent element. Untuk tag <img> tanpa class .img-fluid, gambar akan mempertahankan
ukurannya. Jika lebar parent element mengecil, maka gambar akan "melimpah" keluar
(overflow).
Class .img-fluid ini akan sering kita pakai karena sudah seharusnya gambar juga ikut
mengecil begitu parent element-nya tidak bisa menampung gambar tersebut. Secara internal
class .img-fluid men-set 2 buah propery CSS, yakni max-width:100% dan height:auto.
Image Thumbnails
Mungkin anda menebak kalau image thumbnail yang dimaksud adalah versi kecil dari gambar
sebenarnya, namun class image thumbnail Bootstrap hanyalah berupa tambahan efek bingkai
ke sebuah gambar. Caranya, gunakan class .img-thumbnail seperti contoh berikut:
180
Bootstrap Content
27.image_thumbnail.html
2 <img src="img/pic2.jpg" class="img-thumbnail">
3 </div>
Hasil penambahan class .img-thumbnail ke dalam tag <img>
Efek bingkai ini memang tidak terlalu terlihat, tapi jika diperhatikan terdapat garis putih
beberapa pixel di sekeliling gambar. Ini didapat dari penggunakan kode CSS berikut oleh
Bootstrap:
1 .img-thumbnail {
2 padding: 0.25rem;
3 background-color: #fff;
4 border: 1px solid #dee2e6;
5 border-radius: 0.25rem;
6 max-width: 100%;
7 height: auto;
8 }
Class .img-thumbnail ini bisa kita kombinasikan dengan berbagai utilities class Bootstrap lain
28.image_thumbnail_class.html
2 <img src="img/pic2.jpg" class="img-thumbnail rounded">
3 <img src="img/pic2.jpg" class="img-thumbnail rounded-circle">
4 <img src="img/pic2.jpg" class="img-thumbnail rounded-circle shadow">
5 <img src="img/pic2.jpg" class="img-thumbnail rounded
6 shadow-lg border-warning">
7 </div>
181
Bootstrap Content
Hasil perpaduan class image thumbnail dengan berbagai utilities class Bootstrap
Di sini saya mengombinasikan image thumbnail dengan berbagai utilities class Bootstrap
seperti .rounded, .rounded-circle, .shadow, .shadow-lg dan .border-warning. Teknik
kombinasi berbagai class seperti inilah yang akan banyak kita pakai untuk membuat efek-efek
menarik di dalam Bootstrap. Syaratnya, harus paham fungsi dari setiap class yang ada.
Figures
HTML5 membawa tag <figure> dan <figcaption> yang bisa dipakai untuk mengelompokkan
gambar serta membuat keterangan gambar (caption). Bootstrap menyediakan 3 class:
✔ class .figure untuk tag <figure>
✔ class .figure-img untuk tag <img>
✔ class .figure-caption untuk tag <figcaption>
Berikut perbedaan tampilan dari ketiga class ini:
29.image_figures.html
1 <figure class="figure">
2 <img src="img/pic3.jpg" class="figure-img" alt="City Night">
3 <figcaption class="figure-caption">
4 A beautiful city night picture
5 </figcaption>
6 </figure>
Tampilan tanpa Bootstrap (kiri) serta dengan class .figure, .figure-img dan .figure-caption Bootstrap (kanan)
182
Bootstrap Content
Seperti yang terlihat, tambahan class .figure, .figure-img dan .figure-caption tidak terlalu
banyak mengubah tampilan gambar dan caption.
Class .figure efeknya mengubah tag <figure> agar menjadi display:inline-block. Untuk
class .figure-img hanya mengubah margin-bottom:0.5rem dan line-height:1.
Sedangkan untuk class .figure-caption yang diubah adalah font-size: 90% dan color:
#6c757d. Penambahan class ini membuat ukuran teks caption sedikit lebih kecil dan berwarna
abu-abu.
Sama seperti dengan sebelumnya, kita bisa membuat efek yang lebih menarik dengan
tambahan berbagai class Bootstrap seperti contoh berikut:
30.image_figures_class.html
1 <figure class="figure mt-3">
2 <img src="img/pic3.jpg" class="figure-img img-fluid img-thumbnail
3 shadow" alt="City Night">
4 <figcaption class="figure-caption text-right">
5 A beautiful city night picture
6 </figcaption>
7 </figure>
Penambahan berbagai class untuk figure dan figcaption element
Dalam contoh di atas saya menulis class .mt-3 ke dalam tag <figure> untuk membuat sedikit
padding. Kemudian tambahan class .img-fluid, .img-thumbnail dan .shadow ke dalam tag
<img> agar gambar menjadi responsive, memiliki bingkai dan terdapat efek bayangan.
Untuk tag <figcaption> saya tambah class .text-right agar caption pindah ke sebelah kanan.
183
Bootstrap Content
6.4. Table
Bootstrap menyediakan cukup banyak class untuk mempercantik tampilan tabel, mulai dari
membuat border, membuat efek strip, mengubah warna background, menambahkan caption
hingga membuat tabel yang responsive. Semua efek ini akan kita bahas satu per satu.
Secara default, Bootstrap sengaja tidak banyak mengubah style bawaan tag <table> karena
table element banyak dipakai di komponen lain seperti calendars dan date pickers. Jika terlalu
banyak efek yang ditambah, bisa mempengaruhi komponen-komponen tersebut.
Berikut tampilan tabel Bootstrap tanpa tambahan class apapun:
31.table.html
2
3 <table>
4 <thead>
5 <tr>
6 <th>No</th>
7 <th>Nama</th>
8 <th>Asal</th>
9 <th>Jurusan</th>
10 </tr>
11 </thead>
12 <tbody>
13 <tr>
14 <th>1</th>
15 <td>Ikhsan Prayoga</td>
16 <td>Jakarta</td>
17 <td>Teknik Informatika</td>
18 </tr>
19 <tr>
20 <th>2</th>
21 <td>Sari Citra Lestari</td>
22 <td>Surabaya</td>
23 <td>Farmasi</td>
24 </tr>
25 <tr>
26 <th>3</th>
27 <td>Sandri Fatmala</td>
28 <td>Medan</td>
29 <td>Sistem Informasi</td>
30 </tr>
31 </tbody>
32 </table>
33
34 </div>
184
Bootstrap Content
Tampilan tabel Bootstrap tanpa tambahan class apapun
Tampilan tabel di atas mirip seperti bentuk default web browser, yakni tanpa bingkai sehingga
tidak tampak seperti tabel.
Juga karena kode program untuk tabel cukup panjang, sepanjang sisa pembahasan saya hanya
menampilkan potongan kode program saja. Jika ingin melihat kode lengkap, bisa buka file yang
disertakan dalam belajar_bootstrap.zip.
Class yang hampir selalu dibutuhkan untuk membuat tabel Bootstrap adalah class .table.
Class ini langsung mempercantik tampilan tabel seperti contoh berikut:
32.table_class.html
1 <table class="table">
2 ...
3 ...
Tampilan tabel Bootstrap dengan class .table
Selain tampak lebih menarik, lebar tabel juga otomatis menyesuaikan diri dengan parent
element. Jika kita memperkecil lebar jendela web browser, lebar tabel akan ikut mengecil.
Bootstrap juga menyediakan tambahan class .table-dark untuk membuat tabel dengan
background gelap dan teks putih. Berikut tampilan dari class .table-dark :
33.table_class_dark.html
1 <table class="table table-dark">
2 ...
185
Bootstrap Content
Tampilan tabel Bootstrap dengan class .table dan .table-dark
Tabel versi gelap ini cocok dipakai jika kita membuat theme atau template website yang juga
berwarna gelap.
Table Head Options

Dalam struktur tabel, baris pertama biasanya berisi judul untuk setiap kolom. Judul kolom ini
umumnya diletakkan ke dalam tag <thead>. Jika class .table-light dan .table-dark di
tempatkan ke dalam tag <thead>, maka hanya bagian header saja yang berubah warna. Berikut
contoh penggunaannya:
34.table_thead_light_dark.html
2 <thead class="table-light">
3 ...
5 <thead class="table-dark">
Tampilan tabel Bootstrap dengan class .table-light dan .table-dark di tag <thead>
186
Bootstrap Content
Tambahan class .table-light dan .table-dark di bagian <thead> membuat tampilan tabel
lebih menarik. Baris pertama yang menjadi judul kolom dibedakan dengan baris-baris tabel
lain yang berisi data.
Striped rows
Efek selanjutnya yang sering dibuat ke dalam tabel adalah striped rows atau baris belang-
belang. Untuk membuatnya, tambah class .table-striped ke dalam tag <table>.
Class .table-striped bisa dipakai untuk table light (tabel dengan background putih) maupun
table dark (tabel dengan background hitam). Berikut contoh hasilnya:
35.table_striped.html
1 <table class="table table-striped">
2 ...
3 ...
4 <table class="table table-dark table-striped">
5 ...
6 ...
Tampilan tabel Bootstrap dengan class .table-striped
Fitur ini cocok dipakai untuk tabel dengan banyak data agar lebih mudah membedakan data
pada setiap baris.
Bordered table
Secara default tabel Bootstrap tidak memiliki border di sisi luar, hanya ada border pemisah
antar baris. Untuk menambahkan efek border di sekeliling tabel, tersedia class .table-
bordered seperti contoh berikut:
187
Bootstrap Content
36.table_border.html
1 <table class="table table-bordered">
2 ...
3 ...
4 <table class="table table-dark table-bordered">
5 ...
6 ...
Tampilan tabel Bootstrap dengan class .table-bordered
Seperti yang terlihat, class .table-bordered bisa dipakai untuk table light maupun table dark.
Borderless table
Berkebalikan dari bordered table, borderless table adalah sebutan untuk tabel tanpa border.
Untuk mendapatkan efek ini kita bisa gunakan class .table-borderless seperti contoh
berikut:
37.table_borderless.html
1 <table class="table table-borderless">
2 ...
3 ...
4 <table class="table table-dark table-borderless">
5 ...
6 ...
Efek borderless mungkin tidak terlalu sering kita gunakan karena jadi sedikit susah melihat
data di baris yang berbeda. Namun hal ini juga tergantung dari design yang diinginkan.
188
Bootstrap Content
Tampilan tabel Bootstrap dengan class .table-borderless
Hoverable rows
Hoverable rows adalah istilah untuk menyebut efek tabel yang barisnya berubah warna ketika
cursor mouse berada di atas tabel. Perubahan warna ini membantu kita membedakan setiap
baris. Untuk membuat hoverable rows, tambahkan class .table-hover ke dalam tag <table>.
38.table_hover.html
1 <table class="table table-hover">
2 ...
3 <table class="table table-dark table-hover">
4 ...
Efek hover ini sangat menarik untuk memberikan kesan interaktif dan mempermudah
pembacaan data.
189
Bootstrap Content
Tampilan tabel Bootstrap dengan class .table-hover
Small table
Untuk membuat tabel yang lebih "compact" atau lebih kecil, kita bisa menggunakan class
.table-sm. Berikut tampilan dari small table ini:
39.table_small.html
1 <table class="table table-sm">
2 ...
3 ...
4 <table class="table table-dark table-sm">
5 ...
Tampilan tabel Bootstrap dengan class .table-sm
190
Bootstrap Content
Secara teknis, class .table-sm menggunakan padding:0.3rem, dimana tabel normal Bootstrap
menggunakan padding:0.75rem sehingga tampak lebih kecil.
Contextual classes
Contextual classes adalah sebutan Bootstrap untuk sistem pewarnaan konten. Jika sudah
berkaitan dengan warna, maka nama class yang dipakai Bootstrap tidak jauh-jauh dari nama
primary, secondary, warning, danger, info dst. Nama warna ini dirancang agar sesuai dengan
maksud dari class tersebut (sesuai dengan konteksnya), misalkan class warning cocok dipakai
untuk konten yang berisi peringatan, class info untuk konten yang berisi informasi, dst.
Untuk menambah contextual classes ke dalam tabel, atau lebih sederhana bisa disebut untuk
"mewarnai background tabel", terdapat beberapa class yang bisa ditulis pada tag <tr> maupun
tag <td>. Berikut class warna untuk tabel yang disediakan Bootstrap:
✔ .table-active
✔ .table-primary
✔ .table-secondary
✔ .table-success
✔ .table-danger
✔ .table-warning
✔ .table-info
✔ .table-light
✔ .table-dark
Jika class ini ditempatkan ke dalam tag <tr> maka itu akan mengubah warna background
seluruh sel tabel dalam 1 baris. Jika class ini ditempatkan ke dalam tag <td> maka yang
berubah hanya warna background untuk sel itu saja.
Berikut contoh penggunaan dari contextual classes untuk tabel:
40.table_color.html
2 ...
3 <tr class="table-primary">
4 ...
5 <tr class="table-info">
6 ...
7 <tr class="table-danger">
8 ...
9 </table>
10
12 ...
13 <tr>
14 <th>1</th>
15 <td class="table-success">Ikhsan Prayoga</td>
191
Bootstrap Content
16 <td>Jakarta</td>
17 <td class="table-warning">Teknik Informatika</td>
18 </tr>
19 <tr>
20 <th>2</th>
21 <td>Sari Citra Lestari</td>
22 <td class="table-info">Surabaya</td>
23 <td>Farmasi</td>
24 </tr>
25 <tr>
26 <th>3</th>
27 <td class="table-primary">Sandri Fatmala</td>
28 <td class="table-secondary">Medan</td>
29 <td class="table-active">Sistem Informasi</td>
30 </tr>
31 ...
32 </table>
Hasil penggunaan berbagai class warna tabel Bootstrap (contextual classes)
Table Caption
Table caption dipakai untuk membuat keterangan atau penjelasan tambahan. Untuk
membuatnya, tempatkan tag <caption> ke dalam struktur tabel. Oleh Bootstrap, caption ini
akan berada di bagian bawah tabel, seperti contoh berikut:
41.table_caption.html
2 <caption>Daftar nama mahasiswa</caption>
3 <thead>
4 ...
5
6 <table class="table table-dark">
192
Bootstrap Content
7 <caption class="text-end">Daftar nama mahasiswa</caption>

8 <thead>
9 ...
Tabel dengan tambahan caption
Dalam contoh ini saya membuat 2 tabel dengan tag <caption>. Untuk tabel kedua, caption
ditambah dengan class .text-end sehingga pindah ke bagian kanan bawah tabel.
Responsive Table
Di awal materi tentang class table, terdapat penjelasan bahwa tabel akan menyesuaikan diri
dengan ukuran parent element. Namun efek ini hanya berlaku selama isi tabel masih lebih kecil
daripada lebar parent element.
Apabila isi tabel cukup banyak (punya banyak kolom), pada titik tertentu tabel tidak lagi
menjadi responsive. Tabel akan overflow dan memanjang ke kanan seperti ilustrasi berikut:
Tabel yang cukup lebar sehingga tidak bisa ditampung oleh parent element
193
Bootstrap Content
Tabel di atas terlalu lebar sehingga ketika jendela web browser diperkecil, akan muncul
scrollbar. Hal ini sebenarnya tidak masalah tapi kurang pas untuk web responsive.
Sebagai solusi, Bootstrap menyediakan class .table-responsive dengan efek sebagai berikut:
42.table_responsive.html
1 <div class="table-responsive">
3 ...
4 ...
Scrollbar akan muncul di sisi bawah tabel untuk mempertahankan efek responsive
Sekarang ketika tabel terlalu lebar dan tidak bisa ditampilkan semua, scrollbar akan muncul di
sisi bawah tabel, bukan dari web browser. Perhatikan di sisi kanan tabel masih terdapat ruang
putih (margin) karena tabel masih ada di dalam parent element (tidak overflow ke kanan).
Namun yang menjadi catatan, class .table-responsive ditempatkan bukan ke dalam tag
<tabel>, tapi ke parent element dari tag <table>. Dalam contoh di atas, parent element ini
adalah sebuah tag <div> yang sengaja saya tambah.
Selain itu, class .table-responsive juga memiliki fitur breakpoint. Artinya kita bisa mengatur
kapan efek responsive bisa berjalan. Penulisan class nya adalah dengan format .table-
responsive-<breakpoint> , seperti .table-responsive-sm, .table-responsive-md atau
.table-responsive-lg. Berikut contoh penggunaannya:
43.table_responsive_breakpoint.html
1 <div class="table-responsive-lg">
3 ...
4 ...
5
6 <div class="table-responsive-sm">
8 ...
194
Bootstrap Content
9 ...
Tampilan tabel dalam breakpoint medium (kiri) dan small (kanan)
Tabel pertama (atas) di set dengan class .table-responsive-lg, dengan demikian jika dalam
breakpoint large (atau di bawahnya) lebar tabel sudah tidak bisa ditampung oleh parent
element, maka tabel menjadi responsive dan muncul scrollbar di bawah tabel. Hasilnya, dalam
breakpoint medium dan small, tabel pertama memiliki scrollbar.
Tabel kedua (bawah) saya set dengan class .table-responsive-sm. Maka tabel hanya akan
responsive dalam breakpoint small dan extra-small saja. Untuk breakpoint medium ke atas,
tabel tidak lagi responsive. Ini bisa terlihat dalam gambar di atas dimana pada breakpoint
medium, tabel kedua overflow ke arah kanan dan muncul scrollbar milik web browser.
Sedangkan pada breakpoint small, tabel ini sudah responsive.
Dalam penggunaan sehari-hari, menurut saya kita tidak perlu membedakan breakpoint untuk
tabel, karena agak aneh jika tabel baru responsive pada titik tertentu. Oleh karena itu cukup
pakai class .table-responsive saja agar tabel selalu responsive di semua breakpoint.
---
Dalam bab ini kita telah membahas berbagai hal terkait proses mempercantik konten
menggunakan Bootstrap, diantaranya tentang bootstrap reboot, class untuk typography, class
untuk gambar, dan class untuk tabel. Digabung dengan berbagai utility class serta grid system,
kita telah membahas cukup banyak materi Bootstrap.
Berikutnya akan masuk ke bagian yang paling menarik, yakni Bootstrap Component.
195
Button Related Component
7. Button Related Component
Dalam dokumentasi Bootstrap, component adalah bagian yang paling besar dan bisa dibilang
sebagai inti dari Bootstrap itu sendiri (selain bootstrap grid system). Bootstrap component
berisi struktur kode HTML untuk membuat berbagai komponen website seperti tombol, menu
navigasi, slider, form, dropdown, popover, card, alert dan masih banyak lagi.
Saking banyaknya saya memutuskan untuk memecah materi Bootstrap component menjadi 3
bab, yakni:
✔ Button related component
✔ Navigation related component
✔ Display related component
Dalam bab ini kita akan membahas button related component, yakni komponen Bootstrap
untuk membuat tombol (button) dan variasinya, yakni:
✔ Button
✔ Button Group
✔ Dropdown
✔ Pagination
✔ Badge
✔ List Group
Teknik yang dipakai Bootstrap untuk membuat komponen sama seperti bahasan sebelumnya,
yakni dengan menambah class tertentu ke dalam element. Hanya saja untuk komponen yang
besar, penempatan element juga harus sama persis seperti aturan yang dibuat oleh Bootstrap.
7.1. Button
Button adalah komponen Bootstrap untuk membuat tombol. Dalam HTML, button bisa dibuat
dengan berbagai cara, misalnya menggunakan tag <button> atau tag <input type=button>.
Selain itu Bootstrap juga membolehkan kita membuat button dari tag lain seperti <span> atau
<a>. Caranya, tambahkan class .btn ke dalam element tersebut.
Berikut contoh pembuatan button di dalam Bootstrap:
196
01.button.html
1 <button class="btn">Tombol</button>
2 <input type="button" class="btn" value="Tombol">
3 <span class="btn">Tombol</span>
4 <a href="#" class="btn">Tombol</a>
Tampilan dasar button
Ke dalam ke-4 element di atas, saya tambahkan class .btn untuk membuat tombol. Tampilan-
nya saat ini memang lebih mirip teks biasa, namun begitu cursor mouse diarahkan ke atas
teks, cursor akan berubah menjadi "tangan" yang menandakan itu adalah sebuah tombol. Jika
teks di klik, akan tampil efek bingkai. Kita akan warnai tombol-tombol ini sesaat lagi.
Poin penting di sini adalah, class .btn dipakai untuk membuat struktur dasar button.
Bootstrap menyediakan berbagai class tambahan lain agar tampilannya menjadi lebih menarik.
Color
Modifikasi paling sering yang dilakukan untuk button adalah mengubah warnanya. Dalam
Bootstrap, jika berhubungan dengan warna maka yang dimaksud adalah contextual classes,
yakni sistem penamaan warna sesuai dengan tujuan warna tersebut.
Bootstrap menyediakan 8 class untuk mengubah warna tombol, yakni:

✔ .btn-primary
✔ .btn-secondary
✔ .btn-success
✔ .btn-danger
✔ .btn-warning
✔ .btn-info
✔ .btn-light
✔ .btn-dark
02.button_color.html
1 <button type="button" class="btn btn-primary">Primary</button>
2 <button type="button" class="btn btn-secondary">Secondary</button>
3 <button type="button" class="btn btn-success">Success</button>
4 <button type="button" class="btn btn-danger">Danger</button>
197
5 <button type="button" class="btn btn-warning">Warning</button>

6 <button type="button" class="btn btn-info">Info</button>
7 <button type="button" class="btn btn-light">Light</button>
8 <button type="button" class="btn btn-dark">Dark</button>
Tampilan button dengan berbagai warna
Sekarang tampilan tombol menjadi lebih menarik dengan berbagai variasi warna. Selain itu
terdapat efek hover sewaktu cursor mouse berada di atas tombol, dimana warna tombol akan
sedikit meredup.
Apa Fungsi Atribut type untuk Button Element?
Sebagai tambahan, atribut type="button" untuk tag <button> sebenarnya bersifat

opsional. Tanpa atribut ini, tag <button> juga tampil sama persis. Artinya untuk membuat
tombol warna merah, cukup dengan menulis:
<button class="btn btn-danger">Danger</button>
Atribut type untuk tag <button> bisa diisi dengan 3 nilai: button, submit dan reset. Jika
tag <button> ditempatkan ke dalam form tanpa menuliskan atribut type, secara default
button tersebut akan menjadi tombol submit:
<form>
<button>Tombol ini akan men-submit form jika di klik</button>
</form>
Kode di atas sama artinya dengan:

<form>
<button type="submit">Tombol ini akan men-submit form jika di klik</button>
</form>
Supaya tag <button> tersebut tidak berperilaku sebagai tombol submit, maka tambahkan
atribut type="button":
<form>
<button type="button">Tombol ini tidak akan melakukan apa-apa</button>
</form>
Sekarang tag <button> tidak akan melalukan apapun ketika di klik.
Efek ini hanya terjadi untuk tag <button> yang berada di dalam <form>. Jika berada di
198
luar form tag <button> tidak akan memproses apa-apa meskipun tanpa atribut
type="button".
Namun menjadi kebiasaan yang baik jika kita tetap menulisnya. Dokumentasi resmi
Bootstrap juga selalu menggunakan type="button" untuk semua tag <button>, kecuali
memang sengaja dibuat sebagai tombol submit atau tombol reset form.
Mari kita coba menggunakan class warna ini untuk tag lain selain <button>:
03.button_color_element.html
1 <a href="#" class="btn btn-primary">Link</a>
2 <span class="btn btn-secondary">Span</span>
3 <input type="button" class="btn btn-success" value="Input">
4 <i class="btn btn-danger">i</i>
5 <b class="btn btn-warning">b</b>
6 <em class="btn btn-info">em</em>
7 <strong class="btn btn-light">strong</strong>
8 <small class="btn btn-dark">small</small>
Tampilan button yang dibuat dari berbagai element
Hasilnya, semua element berbentuk tombol meskipun itu adalah tag <em>, <strong> atau
<small>. Hal ini juga memperlihatkan bagaimana kode CSS bisa mengubah tampilan semua
element menjadi bentuk lain. Namun tentu saja untuk membuat tombol lebih baik
menggunakan tag yang memang dirancang untuk hal tersebut, yakni tag <button>.
Dalam beberapa komponen Bootstrap lain seperti button group (akan kita bahas sesaat lagi),
tag <a> sering dipakai sebagai tombol. Tujuannya untuk memanfaatkan efek link yang ada di
dalam tag <a>.
Sebaliknya, jika kita ingin menampilkan tag <button> menjadi bentuk teks, bisa menggunakan
class .btn-link seperti contoh berikut:
04.button_color_link.html
<button type="button" class="btn btn-link">Link</button>
199
Tampilan button dengan bentuk link
Sekarang tampilan tombol mirip seperti link, meskipun efek ini relatif jarang dipakai.
Outline
Outline adalah variasi lain dari warna tombol. Jika menggunakan class ini, tombol memiliki
warna background putih dan baru berubah warna begitu cursor mouse berada di atasnya.
Class outline juga menggunakan contextual classes dengan nama class sebagai berikut:
✔ .btn-outline-primary
✔ .btn-outline-secondary
✔ .btn-outline-success
✔ .btn-outline-danger
✔ .btn-outline-warning
✔ .btn-outline-info
✔ .btn-outline-light
✔ .btn-outline-dark
05.button_outline.html
1 <button type="button" class="btn btn-outline-primary">Primary</button>
2 <button type="button" class="btn btn-outline-secondary">Secondary</button>
3 <button type="button" class="btn btn-outline-success">Success</button>
4 <button type="button" class="btn btn-outline-danger">Danger</button>
5 <button type="button" class="btn btn-outline-warning">Warning</button>
6 <button type="button" class="btn btn-outline-info">Info</button>
7 <button type="button" class="btn btn-outline-light">Light</button>
8 <button type="button" class="btn btn-outline-dark">Dark</button>
200
Tampilan button dengan outline class
Efek tampilan ini bisa dipakai tergantung situasi dan design yang diinginkan. Yakni apakah
ingin menggunakan warna tombol biasa, atau menggunakan outline.
Size
Bootstrap menyediakan 3 ukuran tombol: large, regular dan small. Class .btn-lg dipakai
untuk membuat tampilan tombol large (besar). Class .btn-sm dipakai untuk membuat tampilan
tombol small (kecil). Sedangkan untuk tombol regular tidak butuh tambahan class apapun
karena sudah menjadi ukuran default.
Berikut perbandingan ketiga ukuran tombol:
06.button_size.html
1 <button type="button" class="btn btn-primary btn-lg">Large button</button>
2 <button type="button" class="btn btn-secondary btn-lg">Large button</button>
3
4 <button type="button" class="btn btn-primary">Normal button</button>
5 <button type="button" class="btn btn-secondary">Normal button</button>
6
7 <button type="button" class="btn btn-primary btn-sm">Small button</button>
8 <button type="button" class="btn btn-secondary btn-sm">Small button</button>
Tampilan button dengan 3 ukuran: large, normal (regular) dan small
201
Block button
Dalam situasi tertentu, kadang kita ingin membuat button yang melebar memenuhi parent
element. Di Bootstrap 4 ini bisa dibuat dengan tambahan class .btn-block. Akan tetapi di
Bootstrap 5 class ini sudah dihapus. Untuk membuat efek yang sama, bisa dengan cara
menambah class .d-grid ke parent element:
07.button_block.html
1 <div class="container mt-3 d-grid">
2
3 <button type="button" class="btn btn-primary"> Block level button </button>
4 <button type="button" class="btn btn-secondary mt-2">
5 Block level button </button>
6
7 </div>
Tampilan button sebagai block level element
Tambahan class .d-grid ada di baris 1, yakni ke dalam tag <div> yang menjadi parent element
dari button. Class .d-grid sendiri berfungsi untuk mengaktifkan CSS3 Grid*.
Di dalam button kedua terdapat juga tambahan class .mt-2 (margin top level 2) untuk
mengatur jarak dengan button pertama.
*Penjelasan tentang CSS3 Grid sendiri cukup panjang. Jika tertarik, materi lengkap CSS3
Grid tersedia di buku CSS Uncover Duniailkom.
Active state
Secara bawaan, Bootstrap button akan berubah warna menjadi sedikit gelap ketika cursor
mouse berada di atasnya (hover state). Efek ini bisa di-permanenkan, yakni jika kita ingin
warna tombol selalu gelap seolah-oleh cursor mouse berada di atasnya. Untuk membuat efek
ini, tersedia class .active seperti contoh berikut:
08.button_active_state.html
1 <button type="button" class="btn btn-primary active"> Active </button>
2 <button type="button" class="btn btn-primary"> Normal </button>
3
202
4 <span class="me-4"></span>
5
6 <button type="button" class="btn btn-secondary active"> Active </button>
7 <button type="button" class="btn btn-secondary"> Normal </button>
8
10
11 <button type="button" class="btn btn-info active"> Active </button>
12 <button type="button" class="btn btn-info"> Normal </button>
Tampilan button dengan penambahan class .active (tombol sisi kiri)
Perbedaan warna yang terlihat memang tidak begitu jelas, namun button dengan class
.active akan lebih gelap atau terang tergantung jenis warna yang dipakai. Selain itu efek
hover sudah tidak ada lagi karena warna itulah hasil dari efek hover di button normal.
Class .active ini tersedia untuk semua komponen Bootstrap yang memiliki 2 state: normal
dan hover, seperti button, breadcrumb dan menu navigasi. Class .active bisa disebut sebagai
class yang "mempermanenkan" efek hover ke sebuah element.
Disabled State
Disabled state adalah efek tampilan tombol yang tidak bisa di-klik (disabled). Terdapat 2 cara
untuk membuat efek disabled ini: menggunakan class .disabled, atau menambah atribut
disabled. Khusus untuk button yang dibuat dari tag <a>, hanya bisa dibuat dari class
.disabled saja dan tidak bisa dari atribut disabled.
Berikut cara pembuatan button disabled:
09.button_disabled_state.html
2 <button type="button" class="btn btn-primary disabled"> Disabled </button>
3
5
7 <button type="button" class="btn btn-primary" disabled> Disabled </button>
8
10
11 <a href="#" class="btn btn-danger">Normal</a>
12 <a href="#" class="btn btn-danger disabled">Disabled</a>
13
203
15
16 <a href="#" class="btn btn-danger">Normal</a>
17 <a href="#" class="btn btn-danger" disabled>Disabled</a>
Tampilan button dengan penambahan class .disabled dan atribut disabled
Warna tombol yang sedikit pudar adalah tanda bahwa tombol itu disabled dan tidak bisa di-
klik. Khusus untuk tombol terakhir yang saya buat dari tag <a> (baris 17), hasilnya tidak
disabled karena untuk tag <a> tidak bisa menggunakan atribut disabled, tapi harus memakai
class .disabled seperti di baris 12.
Sama seperti class .active, class .disabled ini juga bisa dipakai untuk semua komponen
Bootstrap yang memiliki efek hover.
Ketika tombol di klik, kenapa tidak ada pengaruh apa-apa?
Kode HTML dan CSS pada dasarnya bersifat pasif dan hanya dipakai membuat tampilan
(design). Untuk membuat efek interaktif, misalnya jika tombol di klik akan muncul pesan
tertentu, maka perlu kode JavaScript. Bootstrap sendiri juga banyak menggunakan
JavaScript untuk membuat berbagai efek.
Perpaduan JavaScript dan Bootstrap cukup panjang untuk dibahas. Karena alasan inilah
saya memutuskan untuk fokus membahas penggunaan Bootstrap untuk sisi design saja.
Kita tidak akan banyak berhubungan dengan kode JavaScript Bootstrap.
Mengenal Assistive Technologies
Sebagian besar contoh kode program dalam buku ini saya ambil dari panduan resmi
Bootstrap di getbootstrap.com/docs/5.2. Jika dibandingkan, kode-kode di buku ini tidak
menyertakan atribut opsional seperti role atau aria.
Sebagai contoh, untuk membuat tombol dari tag <a> dengan class .active, dokumentasi
Bootstrap menulis sebagai berikut:
<a href="#" class="btn btn-primary active" role="button" aria-pressed="true">
Button
</a>
204
Di sini terdapat atribut role="button" dan aria-pressed="true". Kedua atribut ini

termasuk ke dalam assistive technologies.
Secara sederhana, assistive technologies bisa diartikan sebagai teknologi untuk

membantu teman-teman kita yang berkebutuhan khusus. Contoh assistive technologies
dalam kehidupan sehari-hari adalah alat bantu dengar untuk tuna rungu, buku dengan
aksara braille untuk tuna netra, dsb.
Untuk membantu tuna rungu dalam mengakses internet, tersedia aplikasi web browser
khusus yang bisa "menyuarakan" website, atau disebut juga sebagai screen reader. Dalam
web browser jenis ini, setiap teks, menu, dan tombol akan disuarakan.
Masalahnya, tidak jarang sebuah tag HTML dipakai bukan untuk satu tujuan saja. Sebagai
contoh, tag <li> untuk membuat daftar atau list biasa dipakai untuk membuat menu
navigasi, dan dalam contoh kita tag <a> dipakai untuk membuat tombol, bukan link.
Oleh sebab itulah W3C selaku pembuat standar HTML dan CSS mengembangkan ARIA
(Accessible Rich Internet Applications). ARIA berisi standar khusus penulisan atribut
untuk memudahkan screen reader dalam memahami fungsi sebuah tag HTML. Ini
diperlukan terutama untuk tag yang "bertukar peran" seperti tag <a> yang dipakai untuk
membuat tombol, serta tag generik seperti <div> dan <span> yang memang tidak
memiliki makna bawaan.
ARIA berbentuk tambahan atribut dengan format role = <tujuan_penggunaan> atau

aria-<nama_penjelasan> = <tujuan_penggunaan> .
Dalam contoh tag <a> sebelumnya terdapat tambahan atribut role="button". Ini
berfungsi memberi tahu screen reader bahwa tag <a> berfungsi sebagai button (tombol),
dan bukan sebuah link. Sedangkan atribut aria-pressed="true" artinya tag <a> tersebut
sedang dalam keadaan ditekan (pressed) karena punya tambahan class .active.
Dari spesifikasi ARIA oleh W3C, terdapat ratusan jenis atribut aria. Lengkapnya bisa ke:
www.w3.org/TR/html-aria.
ARIA ini memang sangat memudahkan pengguna assistive technologies. Namun tanpa
bermaksud mengecilkan maknanya, saya memutuskan untuk tidak menulis atribut ARIA
dalam pembahasan pada buku ini. Alasannya semata-mata agar kode program kita tidak
terlalu panjang dan terkesan rumit.
Sebagaimana yang akan kita pelajari, komponen Bootstrap seperti menu navigasi bisa
terdiri dari puluhan tag HTML, lalu setiap tag bisa memiliki 2 atau 3 atribut ARIA.
Atribut ARIA semuanya diawali dengan prefix "aria", seperti aria-label, aria-haspopup,
aria-expanded, aria-describedby, aria-controls, serta atribut role. Seluruh atribut
ARIA bersifat opsional dan tidak berpengaruh apa-apa ke tampilan web.
205
Jika ingin melihat rekomendasi Bootstrap dalam penggunaan ARIA, bisa mempelajarinya
di dokumentasi resmi Bootstrap serta juga harus mempelajari spesifikasi W3C terkait
ARIA.
7.2. Button Group

Button group merupakan fitur lanjutan dari button yang telah kita pelajari sebelumnya. Button
group dipakai untuk membuat kumpulan button yang tampil secara berkelompok. Caranya,
tempatkan beberapa class .btn ke dalam parent element dengan class .btn-group.
Berikut contoh pembuatan button group:
10.button_group.html
1 <div class="btn-group">
2 <button type="button" class="btn btn-primary">Left</button>
3 <button type="button" class="btn btn-primary">Middle</button>
4 <button type="button" class="btn btn-primary">Right</button>
5 </div>
Tampilan button group
Di sini saya membuat sebuah tag <div> dengan class .btn-group sebagai parent element dari 3
buah tag <button>.
Button group ini cocok dipakai untuk membuat tampilan seperti toolbar, dimana berbagai
tombol saling berkelompok dan menempel satu sama lain. Digabung dengan utility class
Bootstrap, kita bisa membuat tampilan berikut:
11.button_group_toolbar.html
1 <div class="btn-toolbar">
2 <div class="btn-group me-2">
3 <button type="button" class="btn btn-secondary">1</button>
7 </div>
8 <div class="btn-group me-2">
9 <button type="button" class="btn btn-warning"><i>i</i></button>
10 <button type="button" class="btn btn-warning"><b>b</b></button>
11 <button type="button" class="btn btn-warning"><u>u</u></button>
206
12 </div>
14 <button type="button" class="btn btn-primary"><<</button>
15 <button type="button" class="btn btn-primary">play</button>
16 <button type="button" class="btn btn-primary">>></button>
17 </div>
18 </div>
Tampilan button group yang berbentuk toolbar
Untuk tag <div> terluar terdapat tambahan class .btn-toolbar agar kumpulan button group
tampil sebagai 1 kelompok besar. Di dalamnya terdapat 3 button group dengan berbagai variasi
warna.
Size
Sama seperti button, button group juga tersedia dalam 3 kombinasi ukuran: large, regular dan
small. Class yang dipakai juga sama, yakni .btn-lg untuk membuat tombol besar, .btn-sm
untuk membuat tombol kecil, serta tidak perlu class untuk tombol regular.
12.button_group_sizing.html
1 <div class="btn-group btn-group-lg">
2 <button type="button" class="btn btn-warning">Left</button>
3 <button type="button" class="btn btn-warning">Middle</button>
4 <button type="button" class="btn btn-warning">Right</button>
5 </div>
6 <br>
7 <div class="btn-group mt-3">
11 </div>
12 <br>
13 <div class="btn-group btn-group-sm mt-3">
17 </div>
207
Tampilan button group dengan berbagai ukuran
Berbeda dengan button, untuk mengubah ukuran button group, class .btn-lg dan .btn-sm
ditempatkan ke parent element dari tag <button>, bukan lagi ke tag <button>. Class .mt-3
dalam contoh di atas dipakai untuk membuat jarak dengan button group di atasnya.
Vertical Button Group

Vertical button group adalah variasi button group yang memanjang ke bawah (vertikal), bukan
ke samping (horizontal) sebagaimana biasanya. Untuk membuat tampilan ini, gunakan class
.btn-group-vertical ke dalam parent element tag <button> seperti contoh berikut:
13.button_group_vertical.html
1 <div class="btn-group-vertical">
2 <button type="button" class="btn btn-danger">Button 1</button>
5 </div>
Tampilan vertical button group
Nested Button Group

Nested button group adalah sebutan untuk button yang "bersarang", yakni tombol di dalam
tombol. Untuk membuat tampilan ini, tempatkan class .btn-group ke dalam .btn-group lain.
208
14.button_group_nesting.html
5 <button type="button" class="btn btn-secondary dropdown-toggle"
6 data-bs-toggle="dropdown"> Dropdown </button>
7 <div class="dropdown-menu">
8 <a class="dropdown-item" href="#">Pilihan Menu 1</a>
10 </div>
11 </div>
12 </div>
Tampilan nested button group + dropdown
Dalam contoh ini saya menggabung komponen button group dengan dropdown. Komponen
dropdown sendiri baru akan kita bahas setelah ini, jadi untuk sementara boleh diabaikan.
Nested button group berada di baris 4, dimana terdapat class .btn-group di dalam .btn-group.
Efek button bersarang ini memang baru pas saat dipadukan dengan komponen dropdown,
yang akan segera kita bahas.
7.3. Dropdown
Dropdown adalah sebutan untuk komponen Bootstrap berbentuk tombol (button) yang ketika
di klik akan menampilkan pilihan menu. Langsung saja kita bahas dengan contoh program:
15.dropdown.html
1 <div class="dropdown">
2 <button class="btn btn-secondary dropdown-toggle" type="button"
3 data-bs-toggle="dropdown">Dropdown button</button>
8 </div>
9 </div>
209
Tampilan komponen dropdown
Ketika dijalankan, dropdown berbentuk tombol biasa dengan tambahan tanda segitiga di sisi
kanan. Saat di klik, akan tampil menu memanjang ke arah bawah.
Untuk menampilkan menu dropdown, Bootstrap memutuskan bahwa menu baru bisa muncul
jika tombol di klik, bukan di hover. Keputusan ini diambil untuk menghindari menu yang
tampil secara tidak sengaja.
Mari kita bahas kode program untuk membuat dropdown. Pertama, seluruh dropdown
ditempatkan ke dalam sebuah tag <div> dengan class .dropdown (baris 1). Setelah itu element
pertama yang ditulis berupa tag <button> dengan tambahan class .dropdown-toggle (baris 2),
serta tambahan atribut data-bs-toggle="dropdown" (baris 3).
Atribut data-bs-toggle adalah atribut khusus Bootstrap untuk "memanggil" kode JavaScript
tertentu. Kita akan sering melihat atribut dengan awalan " data-bs", terutama untuk komponen
Bootstrap yang memiliki efek interaktif. Ini adalah cara Bootstrap untuk menghubungkan kode
HTML dengan JavaScript tanpa perlu menulis kode JavaScript secara langsung.
Atribut data-bs-toggle="dropdown" bisa dibaca sebagai "panggil kode JavaScript untuk

membuat menu dropdown Bootstrap".
Sebelumnya di Bootstrap 4, atribut penghubung dropdown ditulis sebagai data-toggle.

Di Bootstrap 5, semua atribut data-* memiliki tambahan prefix "bs", sehingga untuk
dropdown ditulis sebagai data-bs-toggle. Penambahan "data-bs-*" ini juga berlaku
untuk komponen Bootstrap lainnya.
Setelah tombol selesai, selanjutnya kita akan buat isi tampilan menu. Caranya, tempatkan satu
tag <div> dengan class .dropdown-menu (baris 4). Menu itu sendiri dibuat dari kumpulan tag
<a> dengan tambahan class .dropdown-item (baris 5 – 7).
Selain menggunakan tag <a>, isi menu dropdown ini juga bisa dibuat dari tag <button>:
1 ...
3 <button class="dropdown-item" type="button">Pilihan Menu 1</button>
210

6 </div>
7 ...
Dari segi tampilan, tidak ada perbedaan antara tag <a> dengan tag <button> untuk membuat
menu.
Color
Untuk mengubah warna dropdown, tambah class warna button seperti .btn-primary, .btn-
secondary, atau .btn-warning ke dalam tag <button>. Berikut contoh penggunaannya:
16.dropdown_contextual_classes.html
1 <div class="dropdown float-start me-3">
2 <button class="btn btn-primary dropdown-toggle" type="button"
4 ...
5 </div>
6
8 <button class="btn btn-warning dropdown-toggle" type="button"
10 ...
11 </div>
12
14 <button class="btn btn-danger dropdown-toggle" type="button"
16 ...
17 </div>
18
19 <div class="dropdown float-start">
20 <button class="btn btn-info dropdown-toggle" type="button"
22 ...
23 </div>
Tampilan dropdown dengan berbagai warna contextual classes
211
Di sini saya membuat 4 kombinasi warna dropdown dengan class .btn-primary, .btn-warning,
.btn-danger, dan .btn-info ke dalam tag <button>. Tambahan class .float-start dan .me-3
untuk tag <div> semata-mata agar tampilan ke-4 dropdown bisa berjejer dari kiri ke kanan.
Split Button
Split button adalah variasi gabungan button group dengan dropdown. Di sebelah kiri terdapat
tombol biasa, sedangkan di sebelah kanan hanya ada tanda segitiga menu (tanda caret). Ketika
tanda caret ini di klik, akan tampil menu sebagaimana layaknya sebuah dropdown.
Berikut kode program yang dipakai untuk membuat split button:
17.dropdown_split.html
2 <button type="button" class="btn btn-danger">Split Dropdown</button>
3 <button class="btn btn-danger dropdown-toggle dropdown-toggle-split"
4 type="button" data-bs-toggle="dropdown">
5 <span class="visually-hidden">Toggle Dropdown</span>
6 </button>
11 </div>
12 </div>
Tampilan split button
Untuk membuat split button, tempatkan semua kode ke dalam tag <div> dengan class .btn-
group (baris 1). Lalu buat sebuah button biasa yang dalam contoh ini berisi class .btn dan
.btn-danger dengan teks "Split Dropdown" (baris 2), sehingga tombol akan berwarna merah.
Setelah itu buat button untuk dropdown (baris 3 – 6). Selain menggunakan class .btn, .btn-
danger dan .dropdown-toggle, tambahkan juga class .dropdown-toggle-split agar Bootstrap
men-style karakter segitiga (caret) sebagai split button.
Untuk teks button dropdown ini, isinya berupa tag <span class="visually-hidden">Toggle
212
Dropdown</span> (baris 5). Class .visually-hidden adalah class khusus Bootstrap untuk
menyembunyikan teks dan hanya tampil untuk screen reader. Artinya teks "Toggle Dropdown"
sekedar alat bantu untuk screen reader. Dalam web browser biasa, yang tampil hanyalah
karakter segitiga (caret).
Selanjutnya kita tinggal membuat isi menu sebagaimana dropdown biasa (baris 7 – 11).
Size
Masih sama seperti button dan button group, dropdown juga memiliki 3 ukuran tombol: large,
regular, dan small. Class yang digunakan juga sama, yakni .btn-lg dan .btn-sm. Khusus untuk
split button, class ini harus di tempatkan ke dalam kedua tombol.
18.dropdown_size.html
1 <div class="dropdown float-start ms-3">
2 <button class="btn btn-primary dropdown-toggle btn-lg" type="button"
3 data-bs-toggle="dropdown">Dropdown Big</button>
5 ...
6 </div>
7
8 <div class="dropdown float-start ms-3">
10 data-bs-toggle="dropdown">Dropdown Regular</button>
12 ...
13 </div>
14 </div>
15
16 <div class="btn-group float-start">
17 <button type="button" class="btn btn-info btn-sm">
18 Split Dropdown Small
19 </button>
20 <button class="btn btn-info dropdown-toggle dropdown-toggle-split btn-sm"
23 </button>
25 ...
26 </div>
27 </div>
Dalam contoh ini saya membuat 2 buah dropdown dan 1 split button. Perhatikan untuk split
button, class .btn-sm ditulis di dua tempat yakni baris 17 dan 20, ini karena split button tidak
lain perpaduan dari 2 buah button.
213
Berbagai ukuran dropdown
Directions
Bootstrap juga menyediakan class khusus untuk mengubah arah menu dropdown. Secara
bawaan, menu dropdown tampil ke arah bawah, tapi kita juga bisa mengubahnya untuk tampil
ke atas, kiri (start) atau kanan (end). Caranya, tambah class .dropup, .dropstart, dan .dropend
ke dalam tag <div> yang berisi tombol dropdown.
Berikut contoh tampilannya:
19.dropdown_dropup_dropleft_dropright.html
1 <div class="dropdown dropstart mx-3 float-start">
2 ...
3 </div>
4
5 <div class="dropdown dropup mx-3 float-start">
6 ...
7 </div>
8
9 <div class="dropdown dropend float-start">
10 ...
11 </div>
Tampilan dropdown dengan menu di sisi kiri, atas dan kanan
214
Agar menu tampil di sebelah kiri, tambah class .dropstart, agar menu tampil di sebelah atas,
tambah class .dropup, dan agar menu tampil di sebelah kanan, tambahkan class .dropend.
Dalam contoh di atas saya menggunakan class .mx-3 dan .float-start semata-mata agar
ketiga dropdown tampil secara berdampingan dan memiliki sedikit jarak (margin). Class .mx-3
dan .float-start merupakan utility class Bootstrap yang pernah kita bahas sebelumnya.
Active and Disabled

Untuk membuat efek active dan disabled, tempatkan class .active dan .disabled ke dalam
dropdown item. Berikut contoh penggunaannya:
20.dropdown_menu_item_active_disabled.html
6 <a class="dropdown-item active" href="#">Pilihan Menu 2</a>
7 <a class="dropdown-item disabled" href="#">Pilihan Menu 3</a>
8 </div>
9 </div>
Tampilan dropdown dengan menu item .active dan .disabled
Sama seperti button biasa, class .active dipakai untuk membuat efek "terpilih". Sedangkan
class .disabled dipakai untuk membuat efek menu tidak aktif.
Dark Dropdowns
Bootstrap 5 membawa fitur pewarnaan gelap untuk menu dropdown. Caranya, tambah class
.dropdown-menu-dark ke dalam element yang memiliki class .dropdown-menu:
215
21.dropdown_menu_dark.html
4 <div class="dropdown-menu dropdown-menu-dark">
8 </div>
9 </div>
Gambar: Tampilan dropdown dengan warna tema hitam
Pilihan warna ini cocok untuk website yang memiliki tema gelap.
Menu Alignment
Secara default, dropdown item tampil dengan rata kiri. Untuk mengubahnya menjadi rata
kanan, tambah class .dropdown-menu-end seperti contoh berikut:
22.dropdown_menu_alignment.html
4 <div class="dropdown-menu dropdown-menu-end">
5 <a class="dropdown-item" href="#">Pilihan Menu </a>
6 <a class="dropdown-item" href="#">Pilihan Menu Panjang </a>
7 <a class="dropdown-item" href="#">Pilihan Menu Panjang Sekali</a>
8 </div>
9 </div>
Dengan tambahan class .dropdown-menu-end di baris 4, dropdown item menjadi rata kanan.
Namun jika ruang di sebelah kiri dropdown tidak cukup, dropdown item ini akan kembali ke
posisi rata kiri.
216
Tampilan dropdown dengan dropdown item rata kanan
Menu Header and Menu Divider

Menu header dan menu divider adalah tambahan item untuk membuat judul dan pembatas.
Langsung saja kita lihat tampilan dari menu header dan divider ini:
23.dropdown_menu_header_divider.html
2 <button class="btn btn-danger dropdown-toggle" type="button"
5 <h6 class="dropdown-header">Ini adalah judul menu 1</h6>
6 <a class="dropdown-item" href="#">Pilihan Menu 1.1</a>
9 <div class="dropdown-divider"></div>
10 <h6 class="dropdown-header">Ini adalah judul menu 2</h6>
12 </div>
13 </div>
Tampilan item dropdown dengan header dan divider
217
Tag <h6> dengan class .dropdown-header di baris 5 dan 10 adalah judul atau header dari
dropdown menu. Header menu ini tidak bisa di klik dan berguna untuk membuat penjelasan
judul. Tag <div> dengan class .dropdown-divider di baris 9 dipakai untuk membuat garis
pembatas antara satu dropdown item dengan dropdown item lainnya.
Baik header dan divider bisa dipakai untuk membuat tampilan item dropdown agar lebih rapi,
terutama untuk pilihan menu yang cukup banyak. Header sendiri hanya berfungsi sebagai
pemberi keterangan dan tidak bisa dipilih.
Alternatif lain untuk membuat menu yang tidak bisa dipilih adalah dari tag <span> dengan
class .dropdown-item-text, seperti contoh berikut:
24.dropdown_menu_item-text.html
2 <button class="btn btn-info dropdown-toggle" type="button"
5 <h6 class="dropdown-header">Header tidak bisa dipilih</h6>
8 <span class="dropdown-item-text">Item ini juga tidak bisa dipilih</span>
9 </div>
10 </div>
Tampilan item dropdown dengan class .dropdown-item-text
Dropdown item terakhir hanya berupa teks biasa dan tidak bisa dipilih serta tidak memiliki
efek hover. Ini dibuat dengan tag <span> dan class .dropdown-item-text seperti di baris ke 8.
Menu Offset
Untuk keperluan khusus, kita bisa memindahkan atau membuat jarak antara tombol dengan
item dropdown. Caranya, tambah atribut data-bs-offset seperti contoh berikut:
25.dropdown_offset.html
218
2 <button class="btn btn-primary dropdown-toggle" type="button"

3 data-bs-toggle="dropdown" data-bs-offset="30,30">Dropdown button</button>
8 </div>
9 </div>
Tampilan item dropdown dengan atribut data-offset
Dalam contoh ini saya menambahkan atribut data-bs-offset="30,30" di baris ke 3. Hasilnya,

antara tombol dropdown dan menu item memiliki jarak 30 pixel ke kanan dan 30 pixel ke
bawah. Inilah efek dari penambahan atribut data-offset.
Efek offset ini sepertinya jarang terpakai, kecuali untuk membuat efek-efek yang tidak biasa.
7.4. Pagination
Pagination adalah komponen Bootstrap berupa kumpulan tombol angka yang saling
bersambung. Pagination ini sering terdapat di bagian bawah forum atau blog sebagai sarana
untuk pindah dari satu halaman ke halaman lain.
Berikut kode dasar pembuatan komponen pagination Bootstrap:
26.pagination.html
1 <ul class="pagination">
2 <li class="page-item"><a class="page-link" href="#">Previous</a></li>
3 <li class="page-item"><a class="page-link" href="#">1</a></li>
6 <li class="page-item"><a class="page-link" href="#">Next</a></li>
7 </ul>
219
Tampilan komponen pagination Bootstrap
Bootstrap menggunakan struktur list untuk membuat pagination. Tag <ul> ditambahkan class
pagination (baris 1), kemudian diikuti beberapa tag <li> dengan class .page-item (baris 2-6).
Tag <li> ini kemudian berisi link dari tag <a> dengan class .page-link.
Jika ingin tampilan lain, bisa mengganti tombol "Previous" dan "Next" dengan tanda panah "<<"
dan ">>". Caranya, gunakan HTML entities « dan » seperti contoh berikut:
27.pagination_icon.html
2 <li class="page-item"><a class="page-link" href="#">«</a></li>
6 <li class="page-item"><a class="page-link" href="#">»</a></li>
7 </ul>
Tampilan pagination dengan tombol panah << dan >>
Dalam dokumentasi Bootstrap, pagination disarankan untuk berada di dalam tag <nav>.
Namun ini tidak wajib:
1 <nav>
3 <li class="page-item"><a class="page-link" href="#">«</a></li>
4 ...
5 <li class="page-item"><a class="page-link" href="#">»</a></li>
6 </ul>
7 </nav>
Size
Pagination hadir dengan 3 ukuran, yakni (seperti yang bisa ditebak): large, regular dan small.
Untuk membuat ukuran large, gunakan class pagination-lg, dan untuk ukuran small gunakan
220
class .pagination-sm. Tanpa kedua class ini, pagination tampil dengan ukuran regular.
Berikut perbandingan dari ketiga ukuran pagination:
28.pagination_sizing.html
1 <ul class="pagination pagination-lg">
2 ...
3 </ul>
4
6 ...
7 </ul>
8
9 <ul class="pagination pagination-sm">
10 ...
11 </ul>
Tampilan pagination dengan tiga ukuran: large, regular dan small
Active and Disabled

Efek active dan disabled cocok digunakan dalam pagination. Class .active bisa dipakai untuk
menandai user sedang berada di halaman tersebut. Sedangkan class .disabled bisa dipakai
untuk menandai user ada di halaman terakhir sehingga tombol "Next" tidak bisa di klik lagi.
Berikut contoh penggunaan class .active dan .disabled pagination:
29.pagination_active_and_disabled.html
2 <li class="page-item"><a class="page-link" href="#">Previous</a></li>
5 <li class="page-item active"><a class="page-link" href="#">3</a></li>
6 <li class="page-item disabled"><a class="page-link" href="#">Next</a></li>
7 </ul>
221
Tampilan pagination dengan class .active dan .disabled
Class .active di baris ke 5 mengubah tombol dengan teks putih dan background biru.
Sedangkan class .disabled di baris ke 6 akan membuat tombol "Next" tidak bisa di klik.
Alignment
Secara default pagination berada di sisi kiri halaman. Kita bisa tambah class .justify-
content-center agar pindah ke tengah halaman, atau class .justify-content-end untuk
mengaturnya tampil di sisi kanan halaman.
Berikut contoh pengaturan alignment pagination:
30.pagination_alignment.html
1 <ul class="pagination justify-content-center">
2 ...
3 </ul>
4
5 <ul class="pagination justify-content-end">
6 ...
7 </ul>
Mengatur tampilan alignment pagination
Class .justify-content-center dan .justify-content-end sebenarnya masuk dalam class

Bootstrap tentang flexbox. Lebih jauh mengenai flexbox akan kita bahas dalam bab tersendiri.
7.5. Badges
Badges adalah komponen Bootstrap berbentuk label dengan tampilan mirip tombol. Badges
bisa dibuat dari tag <span> maupun inline style element lain.
222
Untuk membuat badges, tambahkan class .badge ke sebuah tag <span>, kemudian warnai
dengan class .bg-<contextual_class> seperti .bg-primary, .bg-secondary, .bg-warning, dst.
Berikut contoh pembuatan badges Bootstrap:
31.badges.html
1 <span class="badge bg-primary">Primary</span>
2 <span class="badge bg-secondary">Secondary</span>
3 <span class="badge bg-success">Success</span>
4 <span class="badge bg-danger">Danger</span>
5 <span class="badge bg-warning">Warning</span>
6 <span class="badge bg-info">Info</span>
7 <span class="badge bg-light text-dark">Light</span>
8 <span class="badge bg-dark">Dark</span>
Tampilan komponen badges Bootstrap
Karena dibuat dari tag <span>, maka secara default badges terurut dari kiri ke kanan
sebagaimana inline level element. Khusus untuk .bg-light, saya tambah class .text-dark agar
warna teks kontras dengan warna background abu-abu (baris 7).
Untuk membuat badges dengan sudut membulat, tambahkan class .rounded-pill seperti
contoh berikut:
32.badges_pill.html
1 <span class="badge rounded-pill bg-primary">Primary</span>
2 ...
3 <span class="badge rounded-pill bg-dark">Dark</span>
Tampilan badges dengan tambahan class .badge-pill
Penggunaan badges biasanya digabung dengan komponen Bootstrap lain seperti button dan
heading. Berikut contohnya:
223
33.badges_button_heading.html
1 <button type="button" class="btn btn-primary">
2 Inbox <span class="badge bg-light text-dark">4</span>
3 </button>
4
5 <button type="button" class="btn btn-warning btn-lg">
6 Error <span class="badge bg-light text-dark">4</span>
7 </button>
8
9 <h1>Bootstrap Uncover <span class="badge bg-info">new</span></h1>
10 <h3>Duniailkom <span class="badge bg-secondary">recommended!</span></h3>
Tampilan badges yang dibangun dengan button dan heading
Saya menginput badges ke dalam button dan heading. Seperti yang terlihat, tampilan ini cocok
untuk merancang toolbar halaman admin, dimana badges bisa dipakai menandakan jumlah
email yang belum dibaca, atau membuat efek tambahan di bagian heading.
Ukuran badges akan mengikuti ukuran parent element. Terlihat button dengan class .btn-lg
memiliki badges yang lebih besar daripada tombol biasa. Begitu juga dengan badges dalam tag
<h1> yang tampil lebih besar daripada badges pada tag <h3>.
7.6. List Group

List group adalah komponen Bootstrap berbentuk list yang bisa di-style. Karena ini adalah list,
maka biasa dibuat dari kumpulan tag <li> di dalam tag <ul> atau <ol>.
Berikut struktur dasar list group Bootstrap:
34.list_group.html
1 <ul class="list-group">
2 <li class="list-group-item">List Group Item 1</li>
6 </ul>
224
Tampilan komponen list group Bootstrap
Untuk membuat list group, tambah class .list-group ke dalam tag <ul> maupun tag <ol>
(baris 1). Kemudian tambah class .list-group-item ke setiap tag <li> (baris 2-5).
Karena tag <li> merupakan block level element, maka list group akan memanjang memenuhi
perent element (melebar ke samping). Jika kita ingin membatasi lebar list group, bisa
menggunakan property width CSS atau tempatkan list group ke dalam Bootstrap grid.
Active dan Disabled

Untuk membuat efek list yang sedang terpilih, tambahkan class .active ke dalam list. Dan
untuk membuat efek list yang tidak bisa dipilih, tambahkan class .disabled. Berikut contoh
penggunaan kedua class ini:
35.list_group_active_disabled.html
2 <li class="list-group-item active">List Group Item 1</li>
5 <li class="list-group-item disabled">List Group Item 4</li>
6 </ul>
Tampilan komponen list group Bootstrap dengan class .active dan .disabled
225
Dengan penambahan class .active di baris 2, warna background list menjadi biru. Sedangkan
dengan penambahan class .disabled di baris 5, warna teks menjadi abu-abu. Efek ini akan
bervariasi tergantung warna list yang dipakai.
Color
Untuk mengubah warna dari list group, tersedia contextual class dengan format list-group-
item-<kode warna>. Misalnya kita ingin menggunakan contextual class primary, maka classnya
menjadi .list-group-item-primary. Untuk contextual class secondary, maka classnya menjadi
.list-group-item-secondary, dst.
Berikut tampilan list group dengan berbagai warna:
36.list_group_contextual_class.html
2 <li class="list-group-item">
3 List Group Item - Default
4 </li>
5 <li class="list-group-item list-group-item-primary">
6 List Group Item - Primary
7 </li>
8 <li class="list-group-item list-group-item-secondary">
9 List Group Item - Secondary
10 </li>
11 <li class="list-group-item list-group-item-success">
12 List Group Item - Success
13 </li>
14 <li class="list-group-item list-group-item-danger">
15 List Group Item - Danger
16 </li>
17 <li class="list-group-item list-group-item-warning">
18 List Group Item - Warning
19 </li>
20 <li class="list-group-item list-group-item-info">
21 List Group Item - Info
22 </li>
23 <li class="list-group-item list-group-item-light">
24 List Group Item - Light
25 </li>
26 <li class="list-group-item list-group-item-dark">
27 List Group Item - Dark
28 </li>
29 </ul>
226
Tampilan komponen list group dengan berbagai contextual class
Untuk mengubah warna list group, kita perlu menggabung class .list-group-item dengan
contextual class list-group-item-<kode warna> ke dalam tag <li>.
Button dan Link

Meskipun bernama list group, tapi juga bisa dipakai membuat tampilan list dari tag <button>
dan <a>. Berikut contohnya:
37.list_group_button_a.html
1 <div class="list-group">
2 <button type="button" class="list-group-item active">
3 List Group Item 1
4 </button>
5 <button type="button" class="list-group-item">
6 List Group Item 2
7 </button>
8 <button type="button" class="list-group-item">
9 List Group Item 3
10 </button>
11 <button type="button" class="list-group-item disabled">
12 List Group Item 4
13 </button>
14 </div>
15
16 <div class="mt-3"></div>
17
18 <div class="list-group">
19 <a href="#" class="list-group-item active">List Group Item 1</a>
20 <a href="#" class="list-group-item">List Group Item 2</a>
227
21 <a href="#" class="list-group-item">List Group Item 3</a>

22 <a href="#" class="list-group-item disabled">List Group Item 4</a>
23 </div>
Tampilan komponen list group yang dibuat dari <button> dan <a>
Dari sisi kode program, class yang digunakan masih tetap sama, yakni .list-group untuk
parent element, dan class .list-group-item untuk setiap list.
Namun dari segi tampilan tampak sedikit perbedaan. List group yang dibuat dari tag <button>
akan tampil dengan teks rata tengah. Sedangkan list group yang dibuat dari tag <a> teksnya
bisa di klik (berfungsi sebagai link).
Hover Effect
Terdapat tambahan class .list-group-item-action yang bisa dipakai untuk membuat efek
hover ke dalam list group. Berikut tampilan yang dimaksud:
38.list_group_hover_effect.html
2 <li class="list-group-item list-group-item-action">List Group Item 1</li>
6 </ul>
228
Tampilan komponen list group dengan tambahan .list-group-item-action
Sekarang begitu cursor mouse berada di atas list, warna background akan berubah menjadi
sedikit abu-abu, dan jika di klik warna abu-abu akan makin pekat.
Efek hover ini juga berlaku untuk list dengan berbagai warna:
39.list_group_contextual_class_item_action.html
2 <li class="list-group-item list-group-item-action">
3 List Group Item - Default
4 </li>
5 <li class="list-group-item list-group-item-primary list-group-item-action">
6 List Group Item - Primary
7 </li>
8 ...
9 <li class="list-group-item list-group-item-dark list-group-item-action">
10 List Group Item - Dark
11 </li>
12 </ul>
Tampilan komponen list group dengan tambahan .list-group-item-action dan efek warna
Dengan tambahan class .list-group-item-action, setiap list akan berwarna lebih pekat
begitu cursor mouse berada di atasnya.
229
Flush
Dalam situasi tertentu, kadang kita ingin membuat list group tanpa border. Bootstrap
menyediakan class .list-group-flush untuk keperluan ini:
40.list_group_flush.html
1 <ul class="list-group list-group-flush">
6 </ul>
Tampilan komponen list group tanpa border
Salah satu situasi .list-group-flush diperlukan adalah ketika list group digabung dengan
komponen Bootstrap lain, seperti Card.
List Group dan Badges

Sama seperti button, list group juga bisa ditambah dengan komponen badges. Berikut hasilnya:
41.list_group_badges.html
3 List Group Item 1 <span class="badge bg-primary rounded-pill">14</span>
4 </li>
7 </li>
10 </li>
13 </li>
14 </ul>
230
Tampilan komponen list group dengan badges
Dalam kode program di atas, saya menambahkan komponen badges di akhir setiap list item.
Tampilan seperti ini cocok dipakai untuk membuat informasi mengenai jumlah artikel, jumlah
pesan yang belum dijawab, dsb. Di tambah dengan efek warna atau contextual class Bootstrap,
hasilnya bisa lebih menarik lagi.
---
Dalam bab ini kita telah membahas 6 komponen Bootstrap yang berhubungan atau memiliki
tampilan berbentuk tombol, yakni button, button group, dropdown, pagination, badges dan
list group. Bab ini merupakan bagian pertama dari 4 bab yang akan membahas komponen
Bootstrap.
Berikutnya kita akan masuk ke komponen Bootstrap yang berhubungan dengan menu
navigasi.
------------------------------------------------------------------
=====================================================================
231
Navigation Related Component
8. Navigation Related Component
Kali ini kita akan lanjut membahas komponen Bootstrap yang berhubungan dengan navigation
atau menu navigasi website. Komponen tersebut adalah:
✔ Breadcrumb
✔ Navs
✔ Navbar
✔ Scrollspy
8.1. Breadcrumb
Breadcrumb adalah istilah untuk menyebut teks yang menandakan posisi halaman saat ini dari
keseluruhan struktur website.
Langsung saja kita lihat contoh tampilan breadcrumb:
Tampilan breadcrumb bawaan Bootstrap
Biasanya breadcrumb berada di sisi atas atau bawah halaman (atau keduanya). Dalam tampilan
di atas, bisa disimpulkan bahwa halaman saat ini berada di dalam struktur Data, yang
merupakan bagian dari Library. Kemudian Library ini juga berada di bawah struktur Home.
Dengan men-klik link breadcrumb, kita bisa pindah ke halaman tersebut.
Berikut kode program untuk membuat breadcrumb menggunakan Bootstrap:
01.breadcrumb.html
1 <ol class="breadcrumb">
2 <li class="breadcrumb-item"><a href="#">Home</a></li>
3 <li class="breadcrumb-item"><a href="#">Library</a></li>
4 <li class="breadcrumb-item active">Data</li>
5 </ol>
Cukup simple. Caranya, buat tag <ol> dengan class .breadcrumb yang berisi beberapa tag <li>.
232
Untuk setiap tag <li>, tambahkan class .breadcrumb-item.
Agar teks breadcrumb bisa berfungsi sebagai link, tempatkan tag <a> ke dalam semua tag <li>,
kecuali teks terakhir yang biasanya adalah halaman saat ini (teks paling kanan). Class .active
dipakai agar tampilan teks berbeda dengan teks breadcrumb yang berfungsi sebagai link.
Meskipun tidak wajib, dokumentasi bootstrap menempatkan breadcrumb ke dalam tag <nav>,
02.breadcrumb_nav.html
1 <nav aria-label="breadcrumb">
2 <ol class="breadcrumb">
3 <li class="breadcrumb-item"><a href="#">Home</a></li>
4 <li class="breadcrumb-item"><a href="#">Library</a></li>
5 <li class="breadcrumb-item active">Data</li>
6 </ol>
7 </nav>
Di dalam tag <nav> terdapat atribut aria-label="breadcrumb" yang merupakan bagian dari
atribut opsional ARIA. Fungsinya untuk memberitahu screen reader bahwa struktur ini
merupakan sebuah breadcrumb.
8.2. Navs
Nav adalah komponen Bootstrap yang menjadi struktur dasar menu navigasi. Menu navigasi
sendiri nantinya dibuat menggunakan komponen Navbar yang akan kita bahas terpisah. Boleh
dibilang bahwa Nav adalah versi minimalis dari Navbar.
Berikut struktur dasar penulisan komponen nav di dalam Bootstrap:
03.base_nav.html
1 <ul class="nav">
2 <li class="nav-item">
3 <a class="nav-link active" href="#">Active</a>
4 </li>
6 <a class="nav-link" href="#">Link</a>
7 </li>
10 </li>
12 <a class="nav-link disabled" href="#">Disabled</a>
13 </li>
14 </ul>
233
Tampilan komponen nav Bootstrap
Struktur nav Bootstrap dibuat dari unordered list dengan tambahan class .nav ke dalam tag
<ul>, class .nav-item ke setiap tag <li>, serta class .nav-link ke setiap tag <a>.
Selain itu saya juga menambah class .active dan .disabled ke dalam tag <a>. Class .active
dipakai untuk menandakan menu yang sedang terpilih saat ini. Dalam struktur dasar nav
memang tidak terlihat perubahan apapun dari penambahan class .active ini (baris 3).
Sedangkan class .disabled dipakai untuk membuat efek menu yang tidak aktif (baris 12). Menu
disabled ditampilkan dengan warna teks abu-abu.
Bootstrap menyediakan cara penulisan alternatif dari nav, yakni tanpa unordered list tapi
cukup tag <a> saja:
04.base_nav_a.html
1 <nav class="nav">
6 </nav>
Hasilnya tetap sama seperti tampilan dengan tag <ul> dan <li>. Kita bebas ingin membuat nav
dengan atau tanpa unordered list. Namun karena kebiasaan mayoritas web designer membuat
menu navigasi dengan unordered list, maka sebaiknya tetap gunakan tag <ul> dan <li>
meskipun Bootstrap tidak mengharuskan hal ini.
Nav Pills dan Nav Tabs

Terdapat 2 variasi style untuk nav, yakni pills dan tabs. Untuk membuat keduanya, cukup
tambah class .nav-pills atau .nav-tabs ke dalam tag <ul>:
05.nav_pills_tabs.html
1 <ul class="nav nav-pills">
4 </li>
5 ...
6 ...
7 </ul>
234
8
10
11 <ul class="nav nav-tabs">
14 </li>
15 ...
16 ...
17 </ul>
Tampilan komponen nav pills (atas) dan nav tabs (bawah)
Untuk menghemat tempat, saya tidak menampilkan semua kode HTML karena sama persis
dengan struktur dasar sebelumnya. Perbedaan hanya di tambahan class .nav-pills di baris 1
untuk membuat nav pills, dan penambahan class .nav-tabs di baris 11 untuk membuat nav
tabs.
Dengan tambahan kedua style ini, link dengan class .active sudah tampil berbeda dengan link
lain. Dalam contoh di atas, link pertama (paling kiri) tampil dengan tombol biru untuk nav pills
dan efek tab untuk nav tabs. Jika class .active dipindah ke link lain, maka efek tersebut juga
akan mengikuti.
Nav Fill dan Nav Justified

Secara default, menu nav tampil sesuai panjang teks. Selain itu terdapat class .nav-fill dan
.nav-justified yang bisa dipakai untuk mengubah lebar menu nav. Kedua class ini
ditempatkan ke dalam tag <ul>.
06.nav_fill_justified.html
1 <div class="container mt-3">
2
3 <ul class="nav nav-pills nav-fill">
6 </li>
8 <a class="nav-link active" href="#">Link Menu 1 Panjang</a>
235
9 </li>
10 ...
11 ...
12 </ul>
13
15
16 <ul class="nav nav-pills nav-justified">
19 </li>
21 <a class="nav-link active" href="#">Link Menu 1 Panjang</a>
22 </li>
23 ...
24 ...
25 </ul>
26
27 </div>
Tampilan komponen nav fill (atas) dan nav justified (bawah)
Efek dari penggunaan class .nav-fill dan .nav-justified, menu nav akan melebar
memenuhi parent element. Dalam contoh di atas, parent element dari tag <nav> adalah tag
<div class="container"> , maka menu nav akan melebar sesuai lebar container ini.
Bedanya, untuk class .nav-fill lebar setiap menu dibagi secara proporsional. Jika terdapat
teks yang cukup panjang, maka menu itu juga menjadi lebih panjang daripada menu lain.
Sedangkan untuk class .nav-justified, setiap menu mendapat ukuran yang sama besar, tidak
peduli panjang teks yang dipakai untuk membuat menu tersebut.
Perbedaan ini lebih terlihat jika jendela web browser diperkecil:
Menu nav justified terpaksa ditampilkan dalam 2 baris (bawah)
236
Menu nav bagian bawah dengan class .nav-justified butuh 2 baris karena lebarnya terlalu
kecil untuk menampung teks "Link Menu 1 Panjang". Sedangkan menu bagian atas dengan
class .nav-fill tetap bisa tampil dalam 1 baris karena lebar setiap menu diatur proporsional.
Class .nav-fill atau .nav-justified juga bisa diterapkan ke dalam nav tabs:
07.nav_fill_justified_tabs.html
1 <ul class="nav nav-tabs nav-fill">
2 ...
3 </ul>
4
6
7 <ul class="nav nav-tabs nav-justified">
8 ...
9 </ul>
Tampilan nav tabs dengan class .nav-fill atau .nav-justified
Efek yang sama juga berlalu di sini. Menu item untuk tab dengan class .nav-fill diatur secara
proporsional, sedangkan untuk .nav-justified lebar menu item dibagi sama rata.
Nav Alignment
Komponen nav dibuat menggunakan struktur CSS flexbox sehingga kita bisa menggunakan
class flexbox Bootstrap untuk mengatur rata teks tampilan nav.
Sebagai contoh, agar tampilan menu nav berada di tengah parent element, tambahkan class
.justify-content-center ke dalam tag <ul>. Atau jika ingin menu nav tampil di sisi kanan
parent element, tambahkan class .justify-content-end ke dalam tag <ul>. Berikut contoh
penerapannya:
08.nav_aligment.html
1 <ul class="nav nav-pills justify-content-center">
2 ...
3 </ul>
4
6
237
7 <ul class="nav nav-pills justify-content-end">

8 ...
9 </ul>
Tampilan nav dengan class .justify-content-center (atas) dan .justify-content-end (bawah)
Class .flex-column juga bisa dipakai untuk mengubah tampilan nav dari horizontal menjadi
vertikal:
09.nav_vertical.html
1 <ul class="nav nav-pills flex-column">
4 </li>
6 <a class="nav-link" href="#">Link Menu 1</a>
7 </li>
9 <a class="nav-link" href="#">Link Menu 2</a>
10 </li>
13 </li>
14 </ul>
Tampilan nav secara vertical dengan class .flex-column
Lebih lanjut tentang class flexbox Bootstrap akan kita bahas dalam bab tersendiri.
238
Nav Dropdown
Nav dropdown adalah perpaduan dari komponen nav dan dropdown. Di sini link menu nav
diganti menjadi tombol menu dropdown. Berikut contoh penerapannya:
10.nav_dropdown.html
4 </li>
5 <li class="nav-item dropdown">
6 <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
7 Dropdown button
8 </a>
13 </div>
14 </li>
17 </li>
20 </li>
21 </ul>
Tampilan nav dropdown
Kali ini saya mengganti list menu kedua dengan struktur dropdown (baris 5 – 14). Jika pada bab
sebelumnya kita memakai tag <div class="dropdown"> sebagai container dropdown, maka
kali ini menggunakan <li class="nav-item dropdown"> .
Tombol dropdown juga dibuat dari tag <a>, bukan tag <button> seperti dropdown button,
namun class yang dipakai masih tetap sama, yakni .dropdown-toggle dan atribut data-bs-
toggle="dropdown".
Secara default menu dropdown Bootstrap terbuka dengan cara di-klik, bukan di hover. Ini
239
adalah keputusan design yang dibuat oleh tim Bootstrap.
Dynamic Tabbed Interfaces

Class .nav-pills cocok dipakai untuk membuat menu navigasi karena tampilan menu item
yang berbentuk tombol (button). Namun nav dengan class .nav-tabs juga bisa dipakai untuk
membuat apa yang disebut Bootstrap sebagai dynamic tabbed interfaces.
Fitur dynamic tabbed interfaces sebenarnya butuh kode JavaScript, namun Bootstrap secara
cerdik mengkonversinya menjadi atribut-atribut HTML. Dengan demikian kita tidak perlu
menulis kode JavaScript apapun.
Dynamic tabbed interfaces terdiri dari 2 bagian: menu nav dengan class .nav-tabs serta
bagian konten dengan class .tab-content. Kedua bagian ini nantinya dihubungkan dengan
atribut id.
Baik, langsung saja kita masuk ke contoh prakteknya:
11.dynamic_tabbed_interfaces.html
1 <ul class="nav nav-tabs">
3 <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
4 </li>
6 <a class="nav-link" data-bs-toggle="tab" href="#profile">Profile</a>
7 </li>
9 <a class="nav-link" data-bs-toggle="tab" href="#contact">Contact</a>
10 </li>
11 </ul>
12
13 <div class="tab-content">
14 <div class="tab-pane fade show active" id="home">
15 <p>Lorem ipsum dolor sit amet...</p>
16 </div>
17 <div class="tab-pane fade" id="profile">
18 <p>Sed ut perspiciatis...</p>
19 </div>
20 <div class="tab-pane fade" id="contact">
21 <p>At vero eos et accusamus...</p>
22 </div>
23 </div>
240
Tampilan dynamic tabbed interfaces Bootstrap
Saya yakin anda sudah pernah berinteraksi dengan komponen tab seperti ini. Ketika menu
Home di klik, akan tampil teks A di bagian bawah, begitu di klik menu Profile, teks A akan
berganti menjadi teks B, dst.
Untuk membuatnya, rancang struktur menu nav dengan class .nav-tabs agar menu tampil
sebagai tab (baris 1).
Isi dari nav itu sendiri sama seperti menu nav yang sudah kita buat sebelumnya, yakni dengan
class .nav-item untuk tag <li> serta class .nav-link untuk tag <a>. Hanya saja kali ini
terdapat tambahan atribut data-bs-toggle="tab" ke setiap tag <a>. Semua kode untuk
membuat struktur nav berada di baris 1 – 11.
Perintah dari baris 13 – 23 dipakai untuk membuat konten setiap tab, inilah bagian yang tampil
begitu menu di-klik. Struktur konten terdiri dari tag <div> dengan class .tab-content sebagai
container, yang di dalamnya terdiri dari beberapa tag <div> dengan class .tab-pane.
Bagaimana caranya agar jika kita klik tombol Home, yang tampil adalah konten yang sudah kita
siapkan? Inilah fungsi dari atribut id dari setiap class .tab-pane. Nilai atribut id ini harus
sama dengan nilai atribut href dari tag <a>.
Sebagai contoh, menu Home memiliki atribut href="#home" (baris 3). Ketika menu ini di klik,
yang akan tampil adalah tag <div> dengan atribut id="home" (baris 14). Begitu juga dengan
menu lain, misalnya jika di-klik menu Profile, maka yang akan tampil adalah bagian teks yang
memiliki atribut id="profile" (baris 17), ini karena tab Profile memiliki atribut href=
"#profile" di baris 6.
Potongan kode berikut memperlihatkan hubungan kedua atribut ini:
1 ...
2 <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
3 <a class="nav-link" data-bs-toggle="tab" href="#profile">Profile</a>
5 ...
6 ...
241

10 ...
Jika anda pernah belajar HTML, penulisan atribut href dengan tanda pagar seperti #home,
#profile atau #contact disebut juga sebagai internal link karena berfungsi untuk pindah ke
bagian lain pada halaman yang sama.
Selanjutnya untuk membuat efek pertukaran teks yang halus, setiap tag <div> di dalam class
.tab-content ditambah lagi dengan class .fade. Khusus untuk tag <div> yang tampil begitu
halaman di load terdapat tambahan class .show dan .active (baris 14 di kode sebelumnya).
Apabila kita ingin tab yang tampil pertama kali adalah tab Profile, maka penulisannya menjadi
sebagai berikut:
1 ...
2 <a class="nav-link" data-bs-toggle="tab" href="#home">Home</a>
3 <a class="nav-link active" data-bs-toggle="tab" href="#profile">Profile</a>
5 ...
7 <div class="tab-pane fade" id="home">
8 <div class="tab-pane fade show active" id="profile">
10 </div>
Alternatif tampilan lain juga bisa menggunakan class .nav-pills:
12.dynamic_tabbed_interface_pills.html
3 <a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a>
4 </li>
6 <a class="nav-link" data-bs-toggle="pill" href="#profile">Profile</a>
7 </li>
9 <a class="nav-link" data-bs-toggle="pill" href="#contact">Contact</a>
10 </li>
11 </ul>
15 </div>
18 </div>
21 </div>
22 </div>
242
Tampilan dynamic tabbed interfaces Bootstrap dengan class .nav-pills
Perbedaan dari sebelumnya ada di baris 1, dimana kali ini saya menggunakan class .nav-pills.
Kemudian setiap tag <a> sekarang memakai atribut data-bs-toggle="pill". Selain kedua
perubahan ini, kode kita sama persis dengan sebelumnya.
Menggunakan grid sistem dan beberapa class .flex-column, kita bisa membuat dynamic
tabbed interfaces yang tampil vertikal:
13.nav_tab_pills_vertical.html
2 <div class="row">
3
5 <ul class="nav flex-column nav-pills">
7 <a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a>
8 </li>
10 <a class="nav-link" data-bs-toggle="pill" href="file">Profile</a>
11 </li>
13 <a class="nav-link" data-bs-toggle="pill" href="tact">Contact</a>
14 </li>
15 </ul>
16 </div>
17
22 </div>
25 </div>
28 </div>
29 </div>
30 </div>
243
31
32 </div>
33 </div>
Tampilan dynamic tabbed interfaces secara vertikal
Di sini saya memakai grid sistem untuk membuat tampilan 2 kolom. Kolom pertama berukuran
3 segmen (dari class .col-3) utuk tombol .nav-pills, dan kolom kedua berukuran 9 segmen
(dari class .col-9) untuk menampilkan konten class .tab-content.
Selain penggunaan grid, satu-satunya perubahan dari kode sebelumnya ada di tambahan class
.flex-column pada baris 5. Hasilnya, begitu tombol di sebelah kiri di klik, tampilan konten di
sebelah kanan akan berubah.
Komponen dynamic tabbed interfaces ini bisa sangat rumit jika dibuat dari nol karena harus
memadukan HTML, CSS dan JavaScript.
8.3. Navbar
Navbar adalah komponen Bootstrap untuk membuat menu navigasi. Boleh dibilang bahwa
navbar adalah "versi upgrade" dari komponen nav yang baru saja kita pelajari. Navbar memiliki
banyak sub-komponen yang bisa ditambah sesuai kebutuhan. Struktur dasar navbar sendiri
sangat mirip seperti nav:
14.navbar_menu.html
2
3 <nav class="navbar navbar-expand">
5 <ul class="navbar-nav">
7 <a class="nav-link active" href="#">Home</a>
8 </li>
10 <a class="nav-link" href="#">Features</a>
11 </li>
244
13 <a class="nav-link" href="#">Pricing</a>

14 </li>
17 </li>
18 </ul>
19 </div>
20 </nav>
21
22 </div>
Tampilan struktur dasar komponen navbar Bootstrap
Tag <nav> berfungsi sebagai penampung dari semua kode HTML untuk membuat navbar. Tag
ini menggunakan class .navbar dan .navbar-expand (baris 3).
Setelah itu di baris 4 terdapat tag .container-fluid. Perhatikan bahwa container ini berada di
dalam navbar dan berbeda dengan class .container yang ada di baris 1. Ini merupakan
struktur baru di Bootstrap 5. Isi navbar dibuat dari unordered list tag <ul> dengan class
.navbar-nav di baris 5.
Sisa kode program dari baris 6 sampai 17 sama persis seperti komponen nav, yakni perpaduan
tag <li> dengan class .nav-item serta tag <a> dengan class .nav-link. Class .active dan
.disabled juga bisa ditulis untuk membuat efek lanjutan kepada menu link.
Juga sama seperti nav, Bootstrap membolehkan kita membuat navbar dengan tag <a> saja
tanpa unordered list:
15.navbar_menu_a.html
3 <div class="navbar-nav">
4 <a class="nav-item nav-link active" href="#">Home</a>
5 <a class="nav-item nav-link" href="#">Features</a>
6 <a class="nav-item nav-link" href="#">Pricing</a>
7 <a class="nav-item nav-link disabled" href="#">Disabled</a>
8 </div>
9 </div>
10 </nav>
Kodenya menjadi lebih singkat karena tidak perlu tag <ul> dan <li>. Class .nav-item dan
.nav-link yang sebelumnya terpisah sekarang digabung ke dalam tag <a>.
245
Namun karena alasan yang sama seperti pada pembahasan komponen nav, saya tetap
menggunakan unordered list untuk membuat navbar, karena struktur tersebut masih jadi
standar tidak baku untuk membuat menu navigasi di HTML.
Navbar Color
Modifikasi pertama yang akan kita bahas adalah mengubah warna navbar. Untuk mengubah
warna teks, tersedia class .navbar-light dan .navbar-dark.
Penamaannya agak unik, class .navbar-light akan menghasilkan warna teks hitam yang
cocok untuk background terang (light), sedangkan class .navbar-dark akan menghasilkan
warna teks putih yang cocok untuk background gelap (dark). Jadi jika kita ingin teks putih,
gunakan class .navbar-dark, dan untuk teks hitam pakai class .navbar-light.
Kemudian untuk mengubah warna background dari navbar, gunakan utility class Bootstrap
seperti .bg-primary, .bg-secondary atau .bg-info.
Kedua jenis class warna ini (teks color dan background color) ditulis ke dalam tag <nav>
16.navbar_color.html
1 <nav class="navbar navbar-expand navbar-light bg-light">
2 ...
3 </nav>
4
5 <nav class="navbar navbar-expand navbar-dark bg-dark">
6 ...
7 </nav>
8
9 <nav class="navbar navbar-expand navbar-dark bg-primary">
10 ...
11 </nav>
12
13 <nav class="navbar navbar-expand navbar-dark bg-info">
14 ...
15 </nav>
Dalam contoh ini terdapat 4 variasi warna navbar. Untuk menu pertama (paling atas) berasal
dari kombinasi class .navbar-light dan .bg-light (baris 1). Hasilnya, navbar memiliki teks
hitam dengan warna background abu-abu.
Untuk navbar kedua, terdapat class .navbar-dark dan .bg-dark (baris 7). Hasilnya, navbar
memiliki teks putih dengan warna background hitam. Hal yang sama juga berlaku untuk
navbar ketiga dan keempat dengan penggunaan warna yang berbeda.
246
Tampilan navbar dengan 4 jenis variasi warna
Navbar Brand
Navbar brand adalah tambahan "merk" atau brand ke dalam navbar. Umumnya brand ini
berbentuk nama atau logo website. Caranya, tempatkan sebuah inline element seperti tag <a>
atau <span> ke dalam struktur navbar dengan class .navbar-brand.
Berikut contoh penggunaan dari navbar brand:
17.navbar_brand.html
3 <a class="navbar-brand" href="#">Duniailkom</a>
5 ...
6 </ul>
7 </div>
8 </nav>
9
11
14 <span class="navbar-brand mb-0 h1">Duniailkom</span>
16 ...
17 </ul>
18 </div>
19 </nav>
247
Tampilan navbar dengan tambahan navbar brand
Pada menu pertama, saya menggunakan tag <a> untuk membuat navbar brand (baris 3).
Hasilnya di sebelah kiri navbar terdapat teks "Duniailkom". Karena teks ini ada di dalam tag
<a>, maka bisa di klik dan berfungsi sebagai link.
Untuk menu kedua, navbar brand dibuat dari tag <span> (baris 14). Dari segi tampilan tidak ada
perbedaan antara navbar brand yang dibuat dari tag <a> dan <span>. Namun tag <span> akan
berfungsi seperti teks biasa yang tidak bisa di klik.
Dengan penambahan brand, menu navigasi akan terdorong ke arah kanan. Jika ingin menu ini
tetap di sisi kiri (berada setelah brand), tambah class .me-auto ke dalam tag <ul>. Class .me-
auto merupakan utilily class Bootstrap untuk membuat margin-left: auto:
17a.navbar_brand_left.html
4 <ul class="navbar-nav me-auto">
5 ...
6 </ul>
7 </div>
8 </nav>
9
11
14 <span class="navbar-brand mb-0 h1">Duniailkom</span>
15 <ul class="navbar-nav me-auto">
16 ...
17 </ul>
18 </div>
19 </nav>
248
Mengatur navbar di sisi kiri (setelah brand)
Alternatif lain yakni menempatkan gambar sebagai navbar brand:
18.navbar_brand_img.html
3 <a class="navbar-brand" href="#">
4 <img src="img/bootstrap-logo.svg" width="30" height="30">
5 </a>
7 ...
8 </ul>
9 </div>
10 </nav>
11
13
17 <img src="img/bootstrap-logo.svg" width="30" height="30"
18 class="d-inline-block align-top"> Bootstrap
19 </a>
21 ...
22 </ul>
23 </div>
24 </nav>
Tampilan navbar brand dengan gambar
Di sini saya meminjam logo Bootstrap yang ditempatkan ke dalam navbar brand. Cara
249
penulisannya hampir sama dengan navbar brand teks, yakni tetap menggunakan class
.navbar-brand. Hanya saja sekarang di dalam link tag <a> terdapat tag <img> untuk
memasukkan gambar.
Pada menu pertama navbar brand hanya memakai gambar saja, sedangkan pada menu kedua
selain gambar juga terdapat teks "Bootstrap". Utility class .d-inline-block dan .align-top di
dalam tag <img> berfungsi untuk mengatur posisi teks agar sejajar dengan gambar.
Navbar Text
Navbar text adalah variasi lain dari navbar brand. Fungsinya sama-sama untuk menampilkan
teks ke dalam navbar hanya saja kali ini kita memakai class .navbar-text seperti berikut:
19.navbar_text.html
1 <nav class="navbar navbar-expand navbar-dark bg-secondary">
3 <span class="navbar-text">
4 Duniailkom
5 </span>
7 ...
8 </ul>
9 </div>
10 </nav>
Tampilan navbar text
Perbedaan tampilan navbar brand dengan navbar teks hanya di ukuran dan warna font. Untuk
navbar teks, ukuran fontnya lebih kecil dan tidak berwarna terang seperti tampilan di atas.
Navbar Dropdown
Seperti yang bisa di tebak, navbar dropdown adalah perpaduan navbar dengan tombol
dropdown. Caranya juga sama seperti di pembahasan dalam komponen nav, yakni ganti isi
satu menu item dengan menu dropdown.
Berikut contoh kode programnya:
20.navbar_menu_dropdown.html
250
5 <a class="nav-link active" href="#">Home</a>
6 </li>
8 <a class="nav-link" href="#">Features</a>
9 </li>
11 <a class="nav-link" href="#">Pricing</a>
12 </li>
14 <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
15 Dropdown link
16 </a>
21 </div>
22 </li>
23 </ul>
24 </div>
25 </nav>
Tampilan navbar dropdown
Di sini saya mengganti salah satu menu navbar dengan dropdown (baris 13 – 22). Class yang
dipakai sama seperti membuat tombol dropdown yang sudah pernah kita bahas.
Navbar Search Form

Fitur lain yang sering ada di dalam navbar adalah form pencarian. Berikut kode yang
diperlukan:
21.navbar_form_search.html
4 ...
5 </ul>
6 <form class="d-flex">
7 <input class="form-control me-2" type="search" placeholder="Search">
251
8 <button class="btn btn-outline-success" type="submit">Search</button>

9 </form>
10 </div>
11 </nav>
Tampilan navbar dengan form pencarian
Untuk form pencarian, saya membuat sebuah tag <form> dengan class .d-flex (baris 6-9).
Class .d-flex dipakai agar inputan form dan tombol tampil sejajar.
Di dalam tag <form>, terdapat tag <input> dengan class .form-control. Class .form-control
dipakai untuk mempercantik tampilan form sesuai style Bootstrap. Lebih jauh tentang class
untuk pembuatan form akan kita bahas dalam bab tersendiri.
Kemudian class .me-2 adalah utility class untuk membuat margin right level 2 agar terdapat
spasi antara inputan form dengan tombol search di sebelah kanan.
Tombol search sendiri dibuat dari tag <button> dengan class .btn dan .btn-outline-success.
Komponen button ini sudah kita bahas dalam bab sebelumnya.
Secara default, form search tampil di sisi kanan. Jika kita ingin tampilan form ini menyambung
dengan menu navbar yang sudah ada, tambahkan class .me-auto ke dalam tag <form> seperti
contoh berikut:
22.navbar_form_search_left.html
4 ...
5 </ul>
6 <form class="d-flex me-auto">
8 <button class="btn btn-outline-success" type="submit">Search</button>
9 </form>
10 </nav>
11 </div>
Tampilan navbar dengan form pencarian di sisi kanan
252
Penggunaan class .me-auto akan mendorong tombol search pencarian ke sisi kiri navbar.
Navbar Responsive
Navbar yang sudah kita buat selama ini sebenarnya sudah responsive, dimana lebar navbar
akan menyesuaikan diri sesuai lebar web browser / lebar layar. Namun kondisi ini masih
kurang ideal terutama untuk menu yang cukup panjang seperti tampilan berikut:
Tampilan navbar ketika lebar web browser diperkecil
Ketika lebar web browser diperkecil untuk simulasi tampilan di perangkat mobile, teks di
dalam menu terpaksa pindah ke baris baru karena sudah tidak muat lagi. Selain itu muncul
scrollbar yang menandakan lebar website sudah lebih besar dari lebar web browser.
Jika anda sering membuka website dari smartphone, tentu sudah bisa menebak alternatif
menu navigasi yang lebih baik, yakni "hamburger menu".
Hamburger menu adalah istilah untuk menyebut menu navigasi yang tampil ketika kita men-
klik tiga garis horizontal kecil di bagian atas sebuah website. Karena tombol ini mirip seperti
icon hamburger, maka sering disebut dengan hamburger menu. Menggunakan Bootstrap, ini
sangat mudah dibuat:
24.navbar_hamburger_menu.html
1 <nav class="navbar navbar-expand-sm navbar-light bg-light">
3 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
4 data-bs-target="#navbarNav">
5 <span class="navbar-toggler-icon"></span>
6 </button>
7 <div class="collapse navbar-collapse" id="navbarNav">
9 ...
10 </ul>
11 </div>
253
12 </div>
13 </nav>
Tampilan navbar dengan hamburger menu
Sekarang ketika ukuran jendela web browser sampai ke breakpoint extra-small, menu navigasi
hilang dan berganti menjadi icon "hamburger" di kiri navbar. Begitu di klik, menu navigasi
muncul secara vertikal ke bawah.
Untuk membuat menu hamburger di navbar, kita butuh tambahan beberapa kode HTML.
Pertama, di tag <nav> sekarang terdapat class .navbar-expand-sm (baris 1), sebelumnya kita
hanya butuh .navbar-expand saja. Tambahan suffix atau akhiran "sm" berarti ketika masuk ke
breakpoint extra-small, sembunyikan menu navigasi horizontal. Tergantung kebutuhan, kita
bisa pakai breakpoint lain seperti .navbar-expand-md atau .navbar-expand-lg.
Selanjutnya di baris 3 – 6 adalah kode untuk membuat hamburger button, yakni tombol
dengan icon hamburger. Ini dibuat dari tag <button> dengan class .navbar-toggler, serta
atribut data-bs-toggle="collapse" dan data-bs-target="#navbarNav". Lalu diikuti sebuah
tag <span> kosong dengan class .navbar-toggler-icon.
Terakhir, tag <ul> yang biasa dipakai untuk membuat isi menu ditempatkan ke dalam tag
<div> dengan class .collapse dan .navbar-collapse serta atribut id="navbarNav"(baris 7).
Nilai atribut id akan berpasangan dengan nilai atribut data-bs-target di tag <button>.
Jika diperhatikan, dalam tag <button> saya menulis atribut data-bs-target="#navbarNav"

(baris 3) maka di tag <div> juga harus membuat id="navbarNav" (baris 6). Inilah cara
menghubungkan tombol hamburger dengan isian menu. Seandainya di halaman yang sama
terdapat 2 buah hamburger menu, maka setiap menu harus menggunakan pasangan atribut id
254
dan data-bs-target yang berbeda, misalnya data-bs-target="#navbarNavBaru" dan

id="navbarNavBaru".
Jika kita tambahkan navbar brand, tombol hamburger ini akan pindah ke sisi kanan:
24a.navbar_hamburger_menu_brand.html
7 </button>
9 ...
10 </div>
11 </div>
12 </nav>
Icon hamburger pindah ke sisi kanan karena penambahan navbar brand
Bagaimana jika kita tetap ingin tombol hamburger ada di sisi kiri meskipun dengan navbar
brand? Caranya, letakkan tag <a class="navbar-brand"> setelah <button class="navbar-
toggler">:
24b.navbar_hamburger_menu_brand.html
6 </button>
9 ...
10 </div>
11 </div>
12 </nav>
255
Icon hamburger tetap di siki kanan
Di sini saya memindahkan penulisan navbar brand ke baris 7, yakni setelah pembuatan
hamburger button. Hasilnya, tombol hamburger tetap berada di kiri dan navbar brand di sisi
kanan. Tapi begitu masuk ke breakpoint medium atau di atasnya, navbar brand kembali berada
di sebelah kiri.
Navbar Placement
Untuk membuat efek yang lebih menarik, kita bisa mengatur penempatan posisi navbar.
Meskipun tidak ditulis, seluruh navbar yang di bahas saya tempatkan ke dalam tag <div
class="container mt-3"> , seperti kode berikut:

2
4 ...
5 </nav>
6
7 </div>
Hasilnya, navbar memiliki margin di sisi kiri dan kanan karena berada di dalam container. Ini
cocok untuk jenis boxed layout, dimana lebar website tidak menyentuh sisi kiri dan kanan
jendela web browser.
Selain itu ada juga jenis full-width layout, dimana lebar website menyentuh sisi kiri dan kanan
jendela web browser. Untuk membuat menu seperti ini, tempatkan navbar di luar container,
yakni langsung di bawah tag <body>.
Berikut perbedaan tampilan navbar full-width dengan boxed:
25.navbar_full_width.html
1 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
3 ...
4 </div>
5 </nav>
6
8 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
10 ...
256
11 </div>
12 </nav>
13 </div>
Tampilan full-width navbar (atas) dan boxed navbar (bawah)
Dalam kode ini saya membuat 2 buah navbar. Navbar pertama (atas) berada di luar tag <div
class="container>, hasilnya navbar melebar menutupi seluruh lebar web browser untuk
membuat efek full-width layout. Sedangkan navbar kedua (bawah) berada di dalam <div
class="container>, hasilnya terdapat margin di sisi kiri dan kanan untuk membuat efek boxed
layout.
Modifikasi lain terkait penempatan navbar adalah efek fixed dan sticky positioning. Ini
berkaitan dengan utility class Bootstrap: position. Terdapat 4 variasi penempatan menu:
✔ Normal: tanpa penambahan class apapun (default)
✔ Fixed to the top: dengan penambahan class .fixed-top ke dalam tag <nav>
✔ Fixed to the bottom: dengan penambahan class .fixed-bottom ke dalam tag <nav>
✔ Stickied to the top: dengan penambahan class .sticky-top ke dalam tag <nav>
Dalam kondisi normal, menu navbar berada di posisi kode HTML ditulis, maksudnya begitu
kita men-scroll web browser ke bawah, menu navbar akan berganti dengan element lain.
Jika ditambahkan class .fixed-top, maka menu akan menempel ke sisi atas web browser.
Begitu halaman web di scroll ke bawah, menu ini akan selalu berada di sisi atas web browser.
26.navbar_fixed_top.html
1 <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
2 ...
3 </nav>
4
5 <p style="margin-top:200px">Lorem ipsum dolor sit amet...</p>
6 <p style="margin-top:200px">Sed ut perspiciatis... </p>
7 <p style="margin-top:200px; margin-bottom:500px">At vero eos et acc et...</p>
257
Tampilan menu navbar dengan class .fixed-top
Kebalikannya, jika ditambahkan class .fixed-bottom, maka menu navbar akan selalu
menempel di sisi bawah web browser.
27.navbar_fixed_bottom.html
1 <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-bottom">
2 ...
3 </nav>
4
Tampilan menu navbar dengan class .fixed-bottom
Terakhir, jika ditambahkan class .sticky-top, menu akan menempel ke sisi atas web browser
begitu posisinya terlewati oleh bagian atas web browser. Efek ini baru terlihat jelas jika
menjalankan langsung kode program berikut:
28.navbar_sticky_top.html
2 <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
3 ...
4 </nav>
258
Tampilan menu navbar dengan class .sticky-top
Navbar Complete
Menutup pembahasan kita tentang navbar, saya ingin menampilkan menu navbar lengkap
yang terdiri dari brand image, navbar dropdown, hamburger menu, serta search form. Semua
ini ditempatkan ke dalam 1 navbar sebagai berikut:
29.navbar_complete.html
1 <nav class="navbar navbar-expand-md navbar-dark bg-info">
4 <img src="img/bootstrap-logo.svg" width="30" height="30"
5 class="d-inline-block align-top"> Bootstrap
6 </a>
10 </button>
14 <a class="nav-link active" href="#">Menu 1</a>
15 </li>
17 <a class="nav-link dropdown-toggle" href="#"
18 data-bs-toggle="dropdown"> Menu 2 </a>
23 </div>
24 </li>
26 <a class="nav-link disabled" href="#">Menu 3</a>
27 </li>
28 </ul>
259
29 <form class="d-flex ms-auto mt-2 mt-md-0">

31 <button class="btn btn-light" type="submit">Search</button>
32 </form>
33 </div>
34 </div>
35 </nav>
Tampilan menu navbar complete
Meskipun kodenya lumayan panjang, tapi ini jauh lebih mudah dibandingkan harus dibuat
secara manual. Untuk tampilan ini, perlu kode HTML, CSS dan JavaScript yang cukup
kompleks.
8.4. Scrollspy
Scrollspy adalah komponen Bootstrap yang bisa meng-update menu navigasi tergantung
posisi scroll. Pengertian scrollspy memang susah ditulis tapi saya yakin anda sudah sering
melihat komponen ini. Scrollspy banyak dipakai pada website yang terdiri dari satu halaman
atau single page website.
Untuk membuat scrollspy, kita perlu menyiapkan menu navigasi atau list group serta
tambahan atribut tertentu. Berikut contoh pembuatan komponen scrollspy Bootstrap:
30.scrollspy.html
1 <body data-bs-spy="scroll" data-bs-target="#navbar1" data-bs-offset="50">
2
3 <nav class="navbar navbar-expand bg-light sticky-top" id="navbar1">
260
5 <ul class="navbar-nav nav-pills">

7 <a class="nav-link" href="#judul1">Judul 1</a>
8 </li>
11 </li>
14 </li>
17 </li>
18 </ul>
19 </div>
20 </nav>
21
22 <div class="container mt-3" style="margin-bottom: 500px;">
23
24 <h2 id="judul1" class="pt-5">Judul 1</h2>
25 <p>Eius, temporibus? Dignissimos voluptate a ...</p>
26 <p>...
27
29 <p>Quisquam maiores amet ut id placeat...</p>
30 <p>...
31
33 <p>Adipisci, necessitatibus ...</p>
34 <p>...
35
38 <p>...
39
40 </div>
41
43 </body>
Agar bisa melihat tampilan dan efek dari scrollspy, mau tidak mau harus jalankan langsung file
di atas.
Pada saat halaman web di scroll ke bawah, tab pills di menu navigasi akan pindah tergantung
teks yang tampil saat itu. Jika di scroll sampai ke Judul 2, menu navigasi yang berwarna biru
akan pindah ke Judul 2. Ketika di scroll sampai ke Judul 3, menu navigasi akan pindah ke
Judul 3, dst.
261
Tampilan komponen Scrollspy Bootstrap
Butuh beberapa syarat untuk membuat efek scrollspy. Pertama, menu navigasi harus memiliki
sebuah atribut id. Dalam contoh di atas, saya membuat atribut id="navbar1" di baris 3.
Kedua, kita harus tentukan bagian web yang akan di "spy", yakni bagian yang terus di pantau
saat scroll terjadi. Besar kemungkinan bagian ini adalah isi seluruh halaman web sehingga yang
akan di-spy adalah tag <body>. Oleh karena itu di dalam tag <body> saya menulis 3 atribut,
yakni data-bs-spy="scroll", data-bs-target="#navbar1" dan data-bs-offset="50" (baris 1).
Atribut data-bs-spy="scroll" adalah atribut utama yang memberitahu web browser kalau
kita ingin menggunakan komponen scrollspy Bootstrap.
Atribut data-bs-target="#navbar1" dipakai untuk menghubungkan data yang akan di spy

dengan menu navigasi. Nilai atribut ini harus berpasangan dengan atribut id di menu navigasi.
Menu navigasi saya set sebagai sticky-top sehingga akan menutupi sedikit bagian atas web
browser. Oleh karena itu perlu tambahan class class="pt-5" di setiap tag <h1> agar teks judul
tidak tersembunyi di belakang menu.
Atribut data-bs-offset="50" bersifat opsional. Nilai 50 berarti saya ingin "mendorong" posisi
scroll sekitar 50 pixel ke bawah. Normalnya, menu baru akan berpindah tepat saat sisi atas
web browser bersentuhan dengan element <h1>. Akan tetapi sekarang proses pemindahan itu
terjadi 50 pixel lebih cepat. Untuk lebih jelas, silahkan hapus atribut ini dan lihat
perbedaannya saat teks di scroll.
Syarat ketiga untuk membuat scrollspy adalah, atribut href di setiap menu item navigasi harus
berpasangan dengan nilai atribut id di setiap judul teks (atau komponen halaman lain). Sebagai
262
contoh, menu ke-4 berisi atribut href="#judul4" (baris 16) yang berpasangan dengan atribut
id="judul4" (baris 36).
Patokan inilah yang akan dipantau (di-spy) oleh Bootstrap. Jika proses scroll sampai pada
posisi element id="judul4", maka menu navigasi akan bergeser ke item yang memiliki atribut
href="#judul4". Begitu juga sebaliknya, jika menu navigasi di klik, halaman akan di scroll ke
teks yang sesuai.
Lebih jauh lagi, scrollspy juga bisa dipakai untuk submenu (menu dropdown):
31.scrollspy_submenu.html
1 <body data-bs-spy="scroll" data-bs-target="#navbar1" data-bs-offset="50">
2
3 <nav class="navbar navbar-expand navbar-dark bg-dark sticky-top" id="navbar1">
8 </li>
11 </li>
13 <a class="nav-link dropdown-toggle" href="#judul3"
14 data-bs-toggle="dropdown">Judul 3</a>
16 <a class="dropdown-item" href="#judul3-1">Judul 3-1</a>
17 <a class="dropdown-item" href="#judul3-2">Judul 3-2</a>
18 </div>
19 </li>
22 </li>
23 </ul>
24 </div>
25 </nav>
26
27 <div class="container mt-3" style="margin-bottom: 500px;">
28
30 <p>Eius, temporibus? Dignissimos voluptate a recusandae!...</p>
31
33 <p>Quisquam maiores amet ut id placeat reiciendis eos...</p>
34
36 <p>Adipisci, necessitatibus voluptatum minus quidem, nihil...</p>
37 <h3 id="judul3-1" class="pt-5">Judul 3-1</h2>
38 <p>Veniam, odit quia, ea similique adipisci ipsam iure...</p>
39 <h3 id="judul3-2" class="pt-5">Judul 3-2</h2>
40 <p>Qui aliquam fuga, repudiandae laboriosam libero aspernatur...</p>
41
263

43 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
44 </div>
45
47 </body>
Tampilan komponen Scrollspy Bootstrap dengan submenu
Secara umum tidak banyak perbedaan. Saya hanya menambah menu dropdown di baris 12 – 19
dan teks di baris 37 - 40 Perhatikan kedua menu dropdown ini juga memiliki atribut href=
"#judul3-1" (baris 16) dan href="#judul3-2" (baris 17) yang berpasangan dengan atribut
id="judul3-1" (baris 37) dan id="judul3-2" (baris 39).
Selain men-spy seluruh dokumen, kita juga bisa men-spy element tertentu saja. Caranya,
pindahkan atribut scrollspy dari tag <body> ke dalam element tersebut, kemudian ubah
settingan kode CSS agar memiliki tinggi terbatas dan tampil scroll vertical. Berikut contoh
penggunaannya:
32.scrollspy_vertical_navbar.html
2
3 <div class="row">
5 <div id="contohList1" class="list-group">
6 <a class="list-group-item list-group-item-action" href="#judul1">Judul 1</a>
10 </div>
11 </div>
12
13 <div class="col-9" data-bs-spy="scroll" data-bs-target="#contohList1"
264
14 data-bs-offset="50" style="height: 400px; overflow:scroll;">

15 <h2 id="judul1">Judul 1</h2>
16 <p>Eius, temporibus? Dignissimos voluptate a recusandae! Reprehenderit,...</p>
17
19 <p>Quisquam maiores amet ut id placeat reiciendis eos deleniti...</p>
20
22 <p>Adipisci, necessitatibus voluptatum minus quidem, nihil magnam...</p>
23
26 </div>
27
28 </div>
29
30 </div>
Tampilan komponen Scrollspy Bootstrap dengan menu vertikal
Saya mengganti menu navigasi dengan komponen list group. Selain itu juga terdapat struktur
grid Bootstrap untuk membagi tampilan halaman menjadi 2 bagian, bagian kiri sebesar 3
segmen untuk list group, serta bagian kanan sebesar 9 segmen untuk teks.
Syarat pembuatan scrollspy sebelumnya juga berlaku. Pertama, komponen list group harus
memiliki atribut id yang dalam contoh di atas saya tulis sebagai id="contohList1" (baris 5).
Element yang akan di-spy sekarang berganti ke komponen div, sehingga di sinilah atribut
data-bs-spy="scroll" dan data-bs-target="#contohList1" ditulis (baris 13). Syarat lain kita
harus membatasi tinggi element dan menampilkan garis scroll vertikal. Inilah fungsi kode CSS
style="height: 400px; overflow:scroll;" (baris 14).
Dan juga sama seperti contoh sebelumnya, nilai setiap atribut href di list group harus
265
berpasangan dengan nilai atribut id teks.
Komponen scrollspy sangat menarik dan cocok untuk membuat template website yang hanya
terdiri dari 1 halaman saja (one page website). Template seperti ini banyak dipakai pada website
landing page.
---
Dalam bab ini kita telah membahas komponen Bootstrap yang berkaitan dengan menu
navigasi, yakni breadcrumb, nav, navbar, dan scrollspy. Komponen navbar merupakan salah
satu komponen paling penting dan akan selalu terpakai di setiap perancangan layout.
Berikutnya kita akan masuk ke komponen Bootstrap yang berhubungan dengan display atau
tampilan.
------------------------------------------------------------------
=====================================================================
266
Display Related Component
9. Display Related Component
Dalam bab ini kita akan membahas komponen Bootstrap yang berhubungan dengan display
atau tampilan. Bisa juga dibilang bahwa bab ini berisi sisa komponen Bootstrap yang belum
kita pelajari dalam 2 bab sebelum ini (button dan navigation related component).
Terdapat 13 komponen yang akan kita bahas:

✔ Card
✔ Carousel
✔ Jumbotron
✔ Collapse
✔ Accordion
✔ Alert
✔ Modal
✔ Popover
✔ Tootips
✔ Progress
✔ Spinners
✔ Toast
✔ Offcanvas
9.1. Card
Card adalah komponen Bootstrap untuk membuat berbagai fitur tampilan. Card diperkenalkan
di Bootstrap 4, dan berasal dari gabungan komponen panel, well, dan thumbnail di Bootstrap
3. Karena berasal dari gabungan 3 komponen, maka tidak heran card menjadi salah satu
komponen Bootstrap terpanjang yang akan kita bahas dalam bab ini.
Berikut struktur dasar card Bootstrap:
01.card_basic.html
1 <div class="card">
2 <div class="card-body">
3 Lorem ipsum dolor, sit amet consectetur adipisicing elit.
4 Facilis, autem. Fugiat ipsum, explicabo earum nesciunt officia
5 nulla expedita. Reiciendis ad ipsam obcaecati nulla.
267
6 </div>
7 </div>
Tampilan dasar dari card Bootstrap
Dalam bentuknya yang paling sederhana, card tampil berbentuk teks di dalam sebuah kotak.
Seluruh struktur card ditulis dalam tag <div> dengan class .card. Pada kode di atas, hanya
terdapat 1 isi card, yakni tag <div> dengan class .card-body. Sesuai dengan namanya, class
.card-body dipakai untuk membuat teks di dalam "badan" card.
Selain itu terdapat juga class .card-header dan .card-footer untuk membuat bagian awal dan
akhir card. Berikut struktur penulisannya:
02.card_header_footer.html
2 <div class="card-header">Card Header</div>
7 </div>
8 <div class="card-footer">Card Footer</div>
9 </div>
Tampilan card Bootstrap dengan header dan footer
268
Agar lebih menarik, kita bisa membuat card header dari tag heading seperti <h2> yang
ditambah dengan berbagai utility class Bootstrap:
03.card_header_footer_utility.html
1 <div class="card text-center">
2 <h2 class="card-header">Quote of the day</h2>
5 <p>Kurang cerdas dapat diperbaiki dengan belajar,
6 kurang cakap dapat dihilangkan dengan pengalaman.
7 Namun tidak jujur sulit diperbaiki.</p>
8 <footer class="blockquote-footer mt-3">
9 <cite title="Source Title">Mohammad Hatta</cite>
10 </footer>
11 </div>
12 <div class="card-footer text-muted">2 minutes ago</div>
13 </div>
Tampilan card Bootstrap dengan blockquote
Dalam kode ini saya membuat card header dari tag <h2> (baris 2), hasilnya teks di dalam header
tampil dengan huruf besar.
Isi card body berupa tag <blockquote> yang dipakai untuk membuat kutipan (baris 4-10). Tag
<blockquote> sendiri sudah pernah kita bahas dalam bab content Bootstrap.
Di bagian card footer saya menambah class .text-muted untuk membuat teks dengan warna
abu-abu (baris 12). Seluruh teks dalam card tampil dengan rata tengah hasil dari penggunaan
utility class .text-center di baris 1.
Card Content
Untuk membuat struktur card body agar lebih rapi, tersedia 4 class tambahan: .card-title,
.card-subtitle, .card-text dan .card-link. Berikut contoh penggunaannya:
269
04.card_body_text.html
2 <h2 class="card-header">Card Header</h2>
4 <h5 class="card-title">Card title</h5>
5 <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
6 <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing
7 elit. Facilis, autem. Fugiat ipsum, explicabo earum nesciunt officia
8 nulla expedita. Reiciendis ad ipsam obcaecati nulla.</p>
9 <p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit
10 voluptatem accusantium doloremque laudantium, totam rem aperiam,
11 eaque ipsa quae ab illo inventore.</p>
12 <a href="#" class="card-link">Card link</a>
13 <a href="#" class="card-link">Another link</a>
14 </div>
15 <div class="card-footer text-muted">2 minutes ago</div>
16 </div>
Tampilan card Bootstrap dengan berbagai class
Kali ini terdapat class .card-title di baris 4, class .card-subtitle di baris 5, class .card-text
di baris 6 dan 9, serta class .card-link di baris 12 dan 13. Semua class tidak berpengaruh
banyak ke tampilan teks, tapi hanya mengubah sedikit margin agar hasilnya lebih pas.
Lebih jauh lagi kita bisa menggabung berbagai komponen Bootstrap ke dalam card:
05.card_body_text_2.html
3 <h5 class="card-title">Card Title</h5>
5 elit. Facilis, autem. Fugiat ipsum, explicabo earum nesciunt officia
270
7 </div>
8 <ul class="list-group list-group-flush">
9 <li class="list-group-item">Cras justo odio</li>
10 <li class="list-group-item">Dapibus ac facilisis in</li>
11 <li class="list-group-item">Vestibulum at eros</li>
12 </ul>
13 <div class="card-body text-end">
14 <a href="#" class="btn btn-primary">Learn More</a>
15 </div>
16 </div>
Tampilan card Bootstrap dengan komponen list group dan button
Dalam card terdapat komponen list group di baris 8 – 12, serta komponen button di baris 14.
Perhatikan bahwa list group ini berada di luar class .card-body, namun untuk membuat efek
yang "menyatu", perlu class .list-group-flush. Jika anda masih ingat, class .list-group-
flush dipakai untuk membuat list group tanpa bingkai (tanpa border).
Class .card-body sendiri ada di 2 tempat, baris 2 - 7 dan baris 13 - 15. Meskipun terpisah,
Bootstrap men-style keduanya dengan baik agar menjadi satu kesatuan. Dengan demikian kita
bisa memisah bagian-bagian card dengan beberapa class .card-body apabila diperlukan.
Card Width
Jika di perhatikan, card tampil sebagai block level element yang melebar memenuhi parent
element. Kita bisa membatasi lebar card menggunakan property width CSS, utility class
Bootstrap, atau memasukkannya ke dalam grid.
Berikut contoh pembatasan card dari property width CSS dan utility class Bootstrap:
06.card_width_utility.html
1 <div class="card" style="width: 80%;">
271
3 ...
4 </div>
5 </div>
6
8
9 <div class="card w-50">
11 ...
12 </div>
13 </div>
Tampilan card Bootstrap dengan lebar 20 rem (atas) dan class .w-50 (bawah)
Dalam contoh ini saya membuat 2 buah card. Card pertama (atas) di set dengan lebar 80%
menggunakan kode CSS inline style="width:80%;". Sedangkan card kedua (bawah) di set dari
utility class Bootstrap .w-50, yang artinya lebar card sama dengan 50% lebar parent element.
Alternatif lain untuk mengatur lebar card adalah dengan menempatkannya ke dalam grid:
07.card_grid.html
1 <div class="row">
2 <div class="col-sm-8">
5 ...
6 </div>
7 </div>
8 </div>
12 ...
13 </div>
272
14 </div>
15 </div>
16 </div>
Tampilan card Bootstrap dengan lebar 8 segmen (kiri) dan 4 segmen (kanan)
Card sebelah kanan berada dalam class .col-sm-8, sehingga mengambil tempat 8 segmen.
Sedangkan card sebelah kiri berada dalam class .col-sm-4, sehingga mengambil tempat
sebesar 4 segmen.
Card Image
Card mendukung penambahan gambar, dan ini membuat tampilannya jadi sangat menarik:
08.card_img.html
1 <div class="card" style="width: 20rem;">
2 <img class="card-img-top" src="img/card_img1.jpg">
6 elit. Facilis, autem.</p>
7 <p class="card-text">
8 <small class="text-muted">Last updated 3 mins ago</small>
9 </p>
10 </div>
11 </div>
273
Tampilan card Bootstrap dengan class .card-img-top
Dalam contoh di atas saya menempatkan satu tag <img> dengan class .card-img-top di baris 2,
yakni tepat sebelum card body. Hasilnya, gambar tampil di bagian atas card.
Dan seperti yang bisa di tebak, terdapat juga class .card-img-bottom:
09.card_img_bottom.html
1 <div class="card" style="width: 20rem;">
7 <small class="text-muted">Last updated 3 mins ago</small>
8 </p>
9 </div>
10 <img class="card-img-bottom" src="img/card_img2.jpg">
11 </div>
274
Tampilan card Bootstrap dengan class .card-img-bottom
Penambahan gambar ke dalam card sangat cocok untuk membuat potongan artikel di halaman
utama website seperti halaman home. Efek lain dari penggunaan gambar ke dalam card adalah
membuat image overlay:
10.card_image_overlay.html
1 <div class="card text-light" style="width: 20rem;">
2 <img class="card-img" src="img/card_img3.jpg">
3 <div class="card-img-overlay">
7 <p class="card-text">Last updated 3 mins ago</p>
8 </div>
9 </div>
Tampilan card Bootstrap dengan efek image overlay
275
Overlay merupakan istilah design untuk menyebut sebuah element yang berada di atas
element lain. Dalam kasus kita, ini merujuk ke teks yang ada di atas gambar.
Ketika membuat image overlay seperti ini, harus diperhatikan kontras warna antara teks
dengan gambar. Jika warnanya kurang kontras seperti di atas, teks menjadi susah dibaca. Akan
lebih baik jika gambar dibuat lebih gelap agar tidak mengganggu warna teks yang putih.
Card Color
Sama seperti mayoritas komponen Bootstrap, kita bisa mengatur warna card. Class yang
dipakai tidak secara khusus untuk card, tapi menggunakan utility class Bootstrap biasa seperti
.bg-primary, .border-primary, .text-white, dst:
11.card_color.html
1 <div class="card text-white bg-primary m-3 float-start w-25">
2 <div class="card-header">Header</div>
4 <h5 class="card-title">Primary card title</h5>
7 </div>
8 </div>
9 <div class="card text-white bg-secondary m-3 float-start w-25">
11 ...
12 </div>
13 <div class="card text-white bg-success m-3 float-start w-25">
15 ...
16 </div>
17
18 <div class="card border-primary m-3 float-start w-25">
20 <div class="card-body text-primary">
21 <h5 class="card-title">Primary card title</h5>
24 </div>
25 </div>
26 <div class="card border-secondary m-3 float-start w-25">
28 <div class="card-body text-secondary">
29 ...
30 </div>
31 </div>
32 <div class="card border-success m-3 float-start w-25">
34 <div class="card-body text-success">
35 ...
36 </div>
37 </div>
276
Tampilan card Bootstrap dengan berbagai efek warna
Untuk 3 card bagian atas, saya set dengan class .text-white serta 3 warna background: .bg-
primary (baris 1), .bg-secondary (baris 9), dan .bg-success (baris 13). Hasilnya card tampil
dengan warna background biru, abu-abu, dan hijau.
Tambahan class .m-3, .float-start, dan .w-25 untuk semua card dipakai agar tampilan card
memiliki margin, berjejer ke samping, dan berukuran 25% dari lebar halaman.
Untuk 3 card bagian bawah, yang diubah adalah warna teks dan warna border. Contoh class
yang dipakai berupa perpaduan cari class .border-primary (baris 18) serta class .text-primary
di baris 20.
Card Group
Card Group adalah container khusus yang dipakai untuk menampung beberapa card yang
menjadi satu kesatuan. Cara membuat card group sangat mudah, cukup tempatkan beberapa
card di dalam tag <div> dengan class .card-group:
12.card_card_group.html
1 <div class="card-group">
3 <img class="card-img-top" src="img/card_img4.jpg" alt="Card image cap">
5 ...
6 </div>
7 </div>
8
12 ...
13 </div>
14 </div>
277
15
19 ...
20 </div>
21 </div>
22 </div>
Tampilan 3 card Bootstrap di dalam class .card-group
Saya membuat 3 buah card dan menempatkannya ke dalam class .card-group. Perhatikan
meskipun tinggi setiap card berbeda-beda, tapi bagian footer tetap menyatu. Artinya, tinggi
maksimum card group sama dengan card tertinggi.
Isi dari class card group ini juga fleksibel. Jika kita menginput 4 buah card, maka ukurannya
akan disesuaikan agar muat 4 card dalam 1 baris. Jika ditempatkan 5 card, maka lebar masing-
masing card akan lebih kecil lagi supaya muat 5 card dalam 1 baris.
Grid Cards
Card group yang kita bahas sebelum ini hanya mendukung satu baris saja. Setiap pemambahan
card baru akan mengurangi lebar card yang sudah ada. Jika ingin membuat kumpulan card
yang responsive dan pindah ke baris baru, gunakan grid cards.
Grid cards sebenarnya gabungan dari row columns grid dengan komponen card Bootstrap. Di
bab tentang grid system, kita pernah bahas bahwa row columns adalah cara mengatur jumlah
baris kolom secara global, yakni dengan class seperti .row-cols-sm-2 atau .row-cols-lg-3.
Inilah yang dimanfaatkan untuk membuat grid cards. Berikut contoh penerapannya:
278
13.card_grid_card.html
1 <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
2
3 <div class="col">
5 ...
6 </div>
7 </div>
8
9 <div class="col">
11 ...
12 </div>
13 </div>
14
15 <div class="col">
17 ...
18 </div>
19 </div>
20
23 ...
24 </div>
25 </div>
26
27 </div>
Gambar: Tampilan grid cards untuk breakpoint extra-small dan medium
Di baris 1 terdapat class .row-cols-1, .row-cols-sm-2, dan .row-cols-lg-3. Ketiga class inilah
yang mengatur jumlah card dalam setiap baris pada breakpoint tertentu.
279
Saat masuk ke breakpoint extra-small dan small, setiap baris hanya bisa diisi oleh 1 card saja.
Begitu masuk ke breakpoint medium, setiap baris akan berisi 2 card. Dan ketika masuk ke
breakpoint medium ke atas, setiap baris akan berisi 3 card.
Tambahan class .g-4 di baris 1 merupakan singkatan dari gutter level 4. Ini merupakan utility
class Bootstrap untuk mengatur jarak antar card. Mirip seperti padding dan margin, terdapat 5
level jarak gutter yang disediakan Bootstrap, yakni dari .g-1 sampai dengan .g-5 serta
mendukung breakpoint seperti .g-sm-2 atau .g-lg-4.
Untuk membuat grid cards, setiap card harus berada dalam class .col. Sedangkan isi dari class
.card sendiri bisa ditulis seperti biasa.
Secara bawaan, setiap card akan memiliki tinggi yang berbeda tergantung konten di dalam
card tersebut. Ini menghasilkan sedikit ruang kosong antar card seperti tampilan berikut:
Gambar: Ruang kosong karena perbedaan tinggi card
Jika kita ingin agar setiap card memiliki tinggi yang sama dalam setiap baris, tambah class .h-
100 ke setiap class card:
13a.card_grid_card_100.html
2
3 <div class="col">
4 <div class="card h-100">
5 ...
6 </div>
7 </div>
8
9 <div class="col">
280
11 ...
12 </div>
13 </div>
14
17 ...
18 </div>
19 </div>
20
23 ...
24 </div>
25 </div>
26
27 </div>
Gambar: Hasil penambahan class .h-100 ke setiap class card
Dengan menulis <div class="card h-100">, tinggi setiap class akan disamakan dengan tinggi
card tertinggi di setiap baris. Efek ini mirip seperti yang ada di card group.
Masonry Card
Masonry card bisa disebut sebagai variasi dari grid cards. Bedanya, setiap card akan mengisi
ruang kosong dari card di atasnya. Istilah masonry berasal dari dunia arsitektur untuk
menyebut susunan blok batu bata yang ditata sedemikian rupa. Salah satu web yang terkenal
dengan tampilan masonry adalah pinterest.com.
281
Gambar: Tampilan masonry dari web pinterest.com
Sebelumnya di Bootstrap 4 tampilan masonry bisa dibuat langsung (sudah menjadi bawaan
Bootstrap). Akan tetapi di Bootstrap 5 fitur ini tidak ada lagi, namun kita tetap bisa buat
dengan bantuan library masonry.desandro.com.
Untuk mendownload file yang diperlukan, buka alamat https://unpkg.com/masonry-

layout@4.2.2/dist/masonry.pkgd.min.js , lalu save ke dalam folder js. Dengan demikian file
ini bisa kita akses dengan perintah:
<script src="js/masonry.pkgd.min.js"></script>
Alternatif lain juga bisa mengakses langsung versi CDN:
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/
masonry.pkgd.min.js"></script>
Syarat lain, tambah atribut data-masonry='{"percentPosition": true} ke dalam tag <div

class="row"> yang menjadi penampung seluruh card.
Berikut kode yang diperlukan untuk membuat masonry card di Bootstrap 5:
14.card_masonry.html
2 <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4"
3 data-masonry='{"percentPosition": true }'>
4
5 <div class="col">
282
7 ...
8 </div>
9 </div>
10
12 <div class="card p-3">
13 ...
14 </div>
15 </div>
16 ...
17 ...
18
19 </div>
20 </div>
21
23 <script src="js/masonry.pkgd.min.js"></script>
Gambar: Tampilan masonry layout dengan Bootstrap
Selain tambahan atribut data-masonry='{"percentPosition": true }' di baris 2 serta tag

<script src="js/masonry.pkgd.min.js"> di baris 23, struktur HTML untuk membuat
tampilan masonry ini mirip seperti grid cards.
Setiap card ditempatkan ke dalam tag <div class="col">, kemudian jumlah card di setiap
baris bisa diatur dengan class row columns seperti .row-cols-lg-3. Isi dari card sendiri boleh
bebas, apakah berisi teks, gambar, atau gabungan keduanya.
Tampilan masonry ini cocok dipakai untuk halaman gallery atau portfolio produk sebuah web.
283
9.2. Carousel
Jika kata masonry diambil dari bidang arsitektur, kata carousel berarti komidi putar. Carousel
sendiri adalah istilah British English, di Amerika komidi putar lebih populer dengan sebutan
merry-go-round.
Dalam web design, carousel adalah istilah formal untuk menyebut slider, yakni komponen web
berbentuk gambar yang berganti secara berkala. Pembuatan carousel sebenarnya cukup rumit
karena harus melibatkan JavaScript. Jika anda sudah membaca buku JavaScript Uncover
Duniailkom, pembuatan slider menjadi studi kasus di bab terakhir.
Menggunakan Bootstrap, slider atau carousel ini bisa dibuat dengan sangat mudah. Berikut
struktur dasar kode HTML untuk pembuatan carousel:
15.carousel_basic.html
1 <div id="mySlide" class="carousel slide" data-bs-ride="carousel">
2 <div class="carousel-inner">
3 <div class="carousel-item active">
4 <img class="d-block w-100" src="img/slide_img1.jpg">
5 </div>
6 <div class="carousel-item">
8 </div>
11 </div>
14 </div>
15 </div>
16 </div>
Gambar: Tampilan carousel dasar
284
Pada saat dijalankan, gambar akan berganti setiap 5 detik.
Di sisi kode program, semua kode untuk membuat carousel berada dalam tag <div> dengan
tambahan class .carousel dan .slide, serta atribut data-bs-ride="carousel" (baris 1).
Kemudian terdapat tag <div> dengan class .carousel-inner di baris 2, disinilah semua tag
<img> untuk membuat slider ditulis.
Setiap gambar harus berada dalam tag <div> dengan class .carousel-item (baris 3, 6, 9 dan
12). Tambahan class .active di baris 3 berfungsi sebagai tanda gambar mana yang akan tampil
pertama kali. Dalam setiap carousel, harus ada 1 carousel-item dengan class .active ini.
Jika kita ingin menambah gambar lain, tinggal menulis tag <div class="carousel-item"> dan
tag <img> ke dalam class .carousel-inner.
Di dalam tag <img>, terdapat class .d-block dan .w-100. Keduanya bagian dari utility class
Bootstrap untuk memperbaiki tampilan gambar agar sesuai dengan carousel.
Mengenal UX : User Experience
Secara default bawaan Bootstrap, gambar carousel akan berganti setiap 5 detik. Selain itu
terdapat fitur user experience (UX) yang ditambah, yakni gambar tidak akan berganti
selama cursor mouse berada di atas slider.
Saya pribadi sering kesal jika menemukan slider yang tidak memiliki fitur ini. Kita
terpaksa menekan tombol prev secara berulang-ulang agar bisa membaca teks sebelum
berganti ke gambar lain.
Fitur seperti ini terkesan sepele namun sangat mempermudah interaksi pengunjung.
Pemilik web besar kadang memiliki karyawan khusus yang memikirkan hal ini, yakni
seorang user experience specialist. Di luar negeri, user experience specialist menjadi
salah satu pekerjaan yang sangat menjanjikan.
Kerja dari user experience specialist cukup simple, yakni menggali informasi bagaimana
agar user bisa senyaman mungkin menggunakan web kita. Bidang kerjanya termasuk
mengatur tata letak komponen web, penempatan tombol, ukuran menu navigasi, sampai
pemilihan kata yang menarik.
Bagi kita sebagai web designer, hal ini juga jadi salah satu patokan baik tidaknya desain
yang sedang dibuat. Desain tersebut tidak bisa hanya sekedar "cantik", tapi juga harus
fungsional dan mudah digunakan.
Carousel Controls
Fitur tambahan yang seharusnya ada di setiap carousel adalah tombol next dan prev untuk
menukar gambar slider tanpa harus menunggu. Caranya, tempatkan 2 buah tag <a> setelah
class .carousel-inner:
285
16.carousel_controls.html
2
4 ...
5 </div>
6
7 <a class="carousel-control-prev" href="#mySlide" data-bs-slide="prev">
8 <span class="carousel-control-prev-icon"></span>
9 <span class="visually-hidden">Previous</span>
10 </a>
11 <a class="carousel-control-next" href="#mySlide" data-bs-slide="next">
12 <span class="carousel-control-next-icon"></span>
13 <span class="visually-hidden">Next</span>
14 </a>
15
16 </div>
Tampilan carousel dengan tanda panah sebagai tombol next dan prev
Dengan tambahan kode ini, akan tampil tanda panah next dan prev di kedua sisi carousel.
Tombol ini harus dibuat dengan struktur class yang sama persis seperti di baris 7 – 14, yakni
tag <a> dengan class carousel-control-prev, serta atribut data-slide="prev" untuk
membuat tombol prev. Di tag <a> terdapat tag <span> dengan class .carousel-control-prev-
icon untuk membuat tanda lebih kecil " < ".
Sebaliknya untuk membuat tombol next sebagai tanda lebih besar " > ", tulis tag <a> dengan
class .carousel-control-next dan atribut data-slide="next" serta tag <span> dengan class
.carousel-control-next-icon .
Khusus untuk atribut href="#mySlide", nilainya harus berpasangan dengan atribut id dari
class .carousel. Karena di baris 1 saya menggunakan atribut id="mySlide", maka kedua tag
286
<a> harus menggunakan atribut href="#mySlide" juga. Jika terdapat lebih dari 1 carousel pada
halaman yang sama, nilai id ini harus buat berlainan antara satu carousel dengan carousel lain.
Menyambung pembahasan seputar user experience, tombol next dan prev juga dirancang tim
Bootstrap dengan UX. Kita bisa pindah ke slider berikutnya meskipun tidak men-klik persis di
atas tombol panah " > " dan " < ". Menggunakan Developer Tools, area clickable ternyata dibuat
cukup besar:
Gambar: Lokasi klik yang cukup besar untuk tombol next carousel
Terlihat area yang bisa di klik berbentuk persegi panjang yang jauh lebih besar daripada luas
tombol panah. Tujuannya agar memudahkan user ketika web diakses dari perangkat mobile.
Cukup susah jika setiap user harus menekan persis di atas tanda panah, oleh karena itu tim
design Bootstrap membuat area klik yang cukup besar.
Carousel Indicators
Fitur lain yang disediakan Bootstrap adalah carousel indicators, yakni garis kecil di bawah
slider untuk menandakan posisi atau urutan gambar. Berikut kode yang dibutuhkan serta
tampilannya:
17.carousel_indicator.html
2
3 <ol class="carousel-indicators">
4 <li data-bs-target="#mySlide" data-bs-slide-to="0" class="active"></li>
5 <li data-bs-target="#mySlide" data-bs-slide-to="1"></li>
8 </ol>
9
287

13 </div>
14 ...
15 </div>
16
17 <a class="carousel-control-prev" href="#mySlide" data-bs-slide="prev">
18 ...
19 </a>
20 <a class="carousel-control-next" href="#mySlide" data-bs-slide="next">
21 ...
22 </a>
23
24 </div>
Gambar: Tampilan carousel dengan carousel indicators
Pada tampilan di atas, carousel indicators berada di bagian bawah gambar slider. Jika di klik,
gambar akan langsung lompat ke urutan tersebut.
Untuk kodenya, terdapat tambahan element baru berupa tag <ol> dengan class .carousel-
indicators di baris 3 - 8. Isi dari list itu sendiri berupa tag <li> dengan atribut data-bs-
target="#mySlide" dan data-bs-slide-to="0".
Atribut data-bs-target="#mySlide" dalam tag <li> berpasangan dengan atribut id="mySlide"

di baris 1. Jika id diubah, maka nilai atribut data-bs-target juga harus diubah. Sedangkan
atribut data-bs-slide-to akan bersesuaian dengan urutan gambar di dalam carousel, dimana
nilainya naik mulai dari 0, 1, 2, dst.
Class .active di baris 4 dipakai untuk menentukan awal slider, yang berpasangan dengan
atribut .active dalam class .carousel-item pada baris 11.
288
Carousel Caption
Carousel caption adalah sebutan untuk teks overlay yang berada di atas gambar. Berikut
tambahan kode program untuk membuat carousel caption:
18.carousel_captions.html
2
3 <ol class="carousel-indicators">
4 ...
5 </ol>
6
10 <div class="carousel-caption d-none d-md-block">
11 <h5>Slide Pertama</h5>
12 <p>Lorem ipsum dolor, sit amet consectetur adipisicing</p>
13 </div>
14 </div>
17 <div class="carousel-caption d-none d-md-block">
18 <h5>Slide Kedua</h5>
19 <p>Lorem ipsum dolor, sit amet consectetur adipisicing</p>
20 </div>
21 </div>
22 ...
23 </div>
24 ...
25
26 </div>
Gambar: Tampilan carousel dengan carousel caption
289
Untuk membuat carousel caption, tempatkan tag <div> dengan class .carousel-caption
setelah tag <img>. Dalam kode di atas, tag <div> ini berada di baris 10 – 13 untuk caption slider
pertama dan di baris 17 – 20 untuk caption slider kedua.
Tambahan utility class .d-none dan .d-md-block dipakai agar teks caption tidak tampil di
breakpoint small dan extra small (efek dari . d-none), barulah di breakpoint middle ke atas teks
caption kembali tampil (efek dari .d-md-block).
Isi dari caption boleh bebas tergantung keperluan kita. Dalam contoh di atas saya
membuatnya dari tag <h5> dan <p>.
Carousel Crossfade
Secara default, perpindahan gambar (transisi) carousel berlangsung secara slide, yakni gambar
bergeser dari kanan ke kiri. Selain itu tersedia juga efek transisi crossfade dimana pertukaran
gambar berlangsung dengan efek fade (gambar yang meredup).
Untuk membuatnya, tambah class .carousel-fade ke dalam tag <div> utama carousel:
19.carousel_crossfade.html
1 <div id="mySlide" class="carousel slide carousel-fade" data-bs-ride="carousel">
2 ...
3 ...
4 </div>
Untuk melihat efek crossfade ini, jalankan langsung file 19.carousel_crossfade.html di atas.
9.3. Jumbotron
Istilah jumbotron juga diambil dari dunia nyata, yakni sebutan untuk monitor layar besar yang
biasanya dipasang di stadion olahraga. Dalam Bootstrap, jumbotron adalah komponen untuk
membuat tampilan showcase yang besar.
Sayangnya, komponen jumbotron dihapus di Bootstrap 5 dan hanya tersedia di Bootstrap 4.

Namun kita tetap bisa membuat tampilan yang menyerupai jumbotron di Bootstrap 5.
Sebelum itu, berikut tampilan jumbotron di Bootstrap 4:
20.jumbotron-bs-4.html
1 <!DOCTYPE html>
2 <html lang="id">
3 <head>
7 <link rel="stylesheet" href=
8 "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
290
9 </head>
10 <body>
12
13 <div class="jumbotron">
14 <h1 class="display-4">Hello, world!</h1>
15 <p class="lead">This is a simple hero unit, a jumbotron-style component
16 for calling extra attention to featured content or information.</p>
17 <hr class="my-4">
18 <p>It uses utility classes for typography and spacing to space content
19 out within the larger container.</p>
20 <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
21 </div>
22
23 </div>
24 </body>
25 </html>
Gambar: Tampilan komponen Jumbotron di Bootstrap 4
Di baris 4 saya menggunakan file CSS Bootstrap 4 yang tersedia dari CDN https://
cdn.jsdelivr.net.
Untuk membuat jumbotron, cukup gunakan tag <div> dengan class .jumbotron (baris 1). Lalu
tempatkan semua element di dalam container ini.
Pada contoh di atas, tag <div class="jumbotron"> berisi element HTML dengan berbagai
utility class Bootstrap, seperti .display-4, .lead, .my-4 serta button yang sudah pernah kita
bahas sebelumnya.
Pada versi 5, tim Bootstrap tidak lagi menyediakan komponen Jumbotron. Tapi efek yang sama
bisa dibuat dengan kode CSS biasa:
291
21.jumbotron-bs-5.html
1 <style>
2 .jumbotron {
3 padding: 4rem 2rem;
4 margin-bottom: 2rem;
5 background-color: #e9ecef;
6 border-radius: .3rem;
7 }
8 </style>

2
3 <div class="jumbotron">
4 ...
5 </div>
6
7 </div>
Gambar: Membuat ulang Jumbotron di Bootstrap 5
Kode CSS ini berasal dari source code file CSS Bootstrap 4. Dengan men-copynya, kita kembali
bisa menggunakan komponen Jumbotron di Bootstrap 5.
9.4. Collapse
Collapse adalah komponen Bootstrap untuk membuat efek element yang bisa disembunyikan.
Berikut kodenya:
22.collapse_button.html
1 <p>
2 <button class="btn btn-primary" type="button" data-bs-toggle="collapse"
3 data-bs-target="#collapseExample">
292
4 Show / Hide
5 </button>
6 </p>
7
8 <div class="collapse" id="collapseExample">
9 <div class="card card-body">
10 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
13 </div>
14 </div>
Tampilan komponen collapse Bootstrap
Untuk membuat collapse, kita butuh 2 hal: tombol untuk menampilkan / menyembunyikan,
dan element yang ingin disembunyikan.
Dalam kode di atas, tombol dibuat dari komponen button Bootstrap (baris 2 – 5), plus atribut
data-bs-toggle="collapse" dan data-bs-target="#collapseExample" .
Untuk element yang disembunyikan, semuanya berada dalam container <div> dengan class
.collapse serta atribut id="collapseExample" (baris 8 – 14). Nilai atribut id ini harus
berpasangan dengan nilai atribut data-bs-target yang ada di tombol.
Isi class .collapse bisa ditulis apa saja. Dalam contoh di atas saya membuat sebuah paragraf
di dalam komponen card. Hasilnya setiap kali tombol ditekan, card akan muncul dan sembunyi
secara bergantian.
Tombol untuk membuat efek collapse juga tidak harus dari tag <button>, tapi juga bisa dari tag
<a> yang di style seperti button:
23.collapse_link.html
1 <p>
2 <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample">
3 Show / Hide
4 </a>
5 </p>
6
293
7 <div class="collapse" id="collapseExample">

8 <div class="card card-body">
9 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
12 </div>
13 </div>
Hasil tampilan dari kode di atas sama persis seperti sebelumnya.
9.5. Accordion
Di dalam web design, accordion adalah sebutan untuk kumpulan teks yang saling menutup
ketika bagian lain terbuka. Fitur seperti ini sering dipakai untuk bagian FAQ (Frequently Asked
Questions).
Berikut struktur kode HTML untuk membuat komponen accordion Bootstrap:
24.collapse_accordion.html
1 <div class="accordion" id="accordionExample">
2
3 <div class="accordion-item">
4 <h2 class="accordion-header">
5 <button class="accordion-button collapsed" type="button"
6 data-bs-toggle="collapse" data-bs-target="#collapseOne">
7 Pertanyaan 1
8 </button>
9 </h2>
10 <div id="collapseOne" class="accordion-collapse collapse"
11 data-bs-parent="#accordionExample">
12 <div class="accordion-body">
16 </div>
17 </div>
18 </div>
19
23 data-bs-toggle="collapse" data-bs-target="#collapseTwo">
24 Pertanyaan 2
25 </button>
26 </h2>
27 <div id="collapseTwo" class="accordion-collapse collapse"
29 <div class="accordion-body">Expedita, id! Quaerat dolore hic cum
30 quae dicta eius cupiditate, illo tempora voluptatibus harum
31 eveniet expedita quis dolorum quibusdam voluptates ducimus.
32 Dolorum quas, totam at officiis suscipit dolores nihil obcaecati
294
33 voluptas dolore.</div>
34 </div>
35 </div>
36
40 data-bs-toggle="collapse" data-bs-target="#collapseThree">
41 Pertanyaan 3
42 </button>
43 </h2>
44 <div id="collapseThree" class="accordion-collapse collapse"
46 <div class="accordion-body">Aliquam nihil accusamus velit!
47 Vitae asperiores facere est eum quas minima unde eos
48 provident placeat aut voluptatem architecto nemo vero ab
49 corporis cum, voluptates tempore autem enim voluptas labore
50 quam pariatur dolorum. Nam!</div>
51 </div>
52 </div>
53
54 </div>
Gambar: Tampilan komponan accordion Bootstrap
Seluruh accordion berada dalam class .accordion (baris 1). Tag <div> ini juga memiliki atribut
id="accordionExample" yang akan menjadi rujukan dari semua accordion item. Accordion
item sendiri berada dalam tag <div class="accordion-item"> dengan 2 struktur utama:
bagian judul dan konten.
Judul accordion saya buat dari tag <h2> dengan class .accordion-header. Di dalamnya
terdapat tag <button> dengan class .accordion-collapse dan .collapse, atribut type=
"button", serta atribut data-bs-toggle="collapse" dan data-bs-target="#collapseOne".
Nilai dari atribut data-bs-target ini nantinya akan berpasangan dengan bagian konten.
Teks judul sendiri ditulis antara tag <button> dan </button>, yang dalam contoh accordion
295
item pertama berisi teks "Pertanyaan 1" (baris 7).
Konten dari accordion item berada dalam tag <div> dengan class .accordion-collapse dan
.collapse. Tag ini juga memiliki atribut id yang berpasangan dengan atribut data-bs-target
dari tombol sebelumnya. Selain itu terdapat juga atribut data-bs-parent yang butuh nilai id
milik accordion container, yakni "accordionExample".
Terakhir, terdapat <div class="accordion-body"> tempat konten accordion ditulis. Kita bebas
ingin mengisi konten apa saja termasuk gambar dan video. Jika ingin membuat beberapa
accordion item, tinggal menulis struktur yang sama seperti di baris 20 – 35 dan 37 – 52.
9.6. Alert
Alert adalah komponen Bootstrap untuk membuat text-box berisi peringatan atau
pemberitahuan (alert). Ini biasa dipakai untuk menampilkan pesan kesalahan di sebuah form
atau untuk memberitahu user bahwa ada tambahan informasi baru.
Untuk membuat alert, tempatkan class .alert ke sebuah tag HTML seperti tag <div>,
kemudian pakai class warna alert dengan format dasar .alert-<kode_warna> seperti .alert-
primary, .alert-secondary, dst.
Berikut contoh pembuatan komponen alert Bootstrap:
25.alert_basic.html
1 <div class="alert alert-primary">A simple primary alert, check it out!</div>
2 <div class="alert alert-secondary">A simple secondary alert,check it out!</div>
3 <div class="alert alert-success">A simple success alert, check it out!</div>
4 <div class="alert alert-danger">A simple danger alert, check it out!</div>
5 <div class="alert alert-warning">A simple warning alert, check it out!</div>
6 <div class="alert alert-info">A simple info alert, check it out!</div>
7 <div class="alert alert-light">A simple light alert, check it out!</div>
8 <div class="alert alert-dark">A simple dark alert, check it out!</div>
Gambar: Tampilan komponen alert Bootstrap
296
Seperti yang terlihat, komponen alert hanya men-style teks dengan warna background serta
tambahan efek sudut membulat (rounding corner). Efek seperti ini sebenarnya tidak terlalu
susah dibuat dari CSS, tapi tentu lebih efisien menggunakan class Bootstrap yang siap pakai.
Terdapat juga class .alert-link untuk men-style teks link agar mengikuti warna dari alert.
Berikut perbandingannya:
26.alert_link.html
1 <div class="alert alert-danger">
2 A simple alert with <a href="#">an example link</a>.
3 </div>
4 <div class="alert alert-success">
5 A simple alert with <a href="#">an example link</a>.
6 </div>
7
8 <div class="alert alert-danger">
9 A simple alert with <a href="#" class="alert-link">an example link</a>.
10 </div>
11 <div class="alert alert-success">
12 A simple alert with <a href="#" class="alert-link">an example link</a>.
13 </div>
Tampilan komponen alert Bootstrap dengan link biasa (atas) dan dengan tambahan class .alert-link (bawah)
Semua alert ini memiliki teks dan link. Dua alert pertama dibuat dari tag <a> biasa yang tampil
dengan warna biru (baris 2 & 5). Dua alert terakhir menggunakan tag <a> dengan tambahan
class .alert-link (baris 9 & 12). Class .alert-link ini membuat warna link berubah sesuai
warna alert.
Alert Dismissing
Alert dismissing adalah sebutan untuk efek interaktif alert dengan tambahan icon close. Icon
297
ini bisa di klik untuk menutup tampilan alert. Berikut kode yang dibutuhkan:
27.alert_dismiss.html
1 <div class="alert alert-info alert-dismissible fade show">
2 <strong>Halo Andi,</strong> kamu mendapat sebuah pesan baru
3 <button type="button" class="btn-close" data-bs-dismiss="alert">
4 </button>
5 </div>
Tampilan komponen alert Bootstrap dengan tombol dismiss
Sekarang alert tampil dengan icon close atau tanda silang (x) di sisi kanan. Ketika icon ini di
klik, kotak alert menghilang.
Untuk membuatnya, perlu tambahan class . alert-dismissible, .fade dan .show (baris 1). Icon
close sendiri dibuat dari tag <button> dengan class .btn-close. Tambahan atribut data-bs-
dismiss="alert" berfungsi untuk membuat efek interaktif agar alert menghilang.
9.7. Modal
Dalam programming secara umum (tidak hanya web saja), modal adalah sebutan untuk jendela
atau tampilan yang berada di atas jendela lain. Biasanya jendela modal berfungsi memberikan
informasi, peringatan atau meminta inputan user. Fitur ini dibuat dari perpaduan HTML, CSS
dan JavaScript.
Jendela modal tidak berdiri sendiri tapi "menginduk" ke jendela parent. Ketika modal tampil,
kita tidak bisa mengakses jendela parent selama modal belum ditutup. Bootstrap menyediakan
cara mudah untuk membuat jendela modal dengan struktur dasar sebagai berikut:
28.modal_basic.html
1 <button type="button" class="btn btn-primary" data-bs-toggle="modal"
2 data-bs-target="#contohModal">Tampilkan Modal</button>
3
4 <div class="modal fade" id="contohModal" tabindex="-1">
5 <div class="modal-dialog">
6 <div class="modal-content">
7 <div class="modal-body">
8 <p>Ini adalah pesan yang tampil dalam sebuah modal</p>
9 </div>
10 </div>
298
11 </div>
12 </div>
Tampilan komponen modal Bootstrap
Untuk membuat modal, kita butuh 2 komponen: tombol sebagai trigger atau sesuatu yang
akan menampilkan jendela modal, dan isi teks untuk modal itu sendiri.
Dalam contoh di atas, saya menggunakan komponen button Bootstrap sebagai trigger.
Tambahannya berupa atribut data-bs-toggle="modal" dan data-bs-target="#contohModal"
(baris 1 dan 2).
Komponen yang menjadi modal terdapat di baris 4 – 12. Semuanya ada di dalam tag <div>
dengan class .modal dan .fade. Kemudian terdapat atribut id="contohModal" yang akan
berpasangan dengan atribut data-bs-target="#contohModal" di tag <button> sebelumnya.
Tambahan atribut tabindex="-1" berguna untuk mencegah nagivasi dengan tombol tab ketika
modal ditampilkan.
Di dalam tag <div> class .modal secara berurutan terdapat struktur <div class="modal-
dialog">, kemudian diikuti <div class="modal-content"> dan <div class="modal-body">. Di
dalam modal body inilah saya membuat sebuah paragraf.
Ketika tombol Tampilkan Modal di klik, akan tampil teks "Ini adalah pesan yang tampil dalam
sebuah modal" dengan efek jendela parent ditutupi background warna abu-abu. Untuk
menutup modal, klik sekali background warna abu-abu tersebut.
Agar teks di dalam modal tampil lebih rapi, bisa ditambah class .modal-title dan .modal-
footer yang mirip seperti di komponen card:
29.modal_full.html
3
299

7 <div class="modal-header">
8 <h5 class="modal-title">Modal title</h5>
9 <button type="button" class="btn-close" data-bs-dismiss="modal">
10 </button>
11 </div>
12 <div class="modal-body">
13 <p>Ini adalah pesan yang tampil dalam sebuah modal</p>
14 </div>
15 <div class="modal-footer">
16 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
17 Close</button>
18 <button type="button" class="btn btn-primary">Save changes</button>
19 </div>
20 </div>
21 </div>
22 </div>
Tampilan komponen modal Bootstrap lengkap
Jika dibandingkan dengan kode sebelumnya, terdapat tambahan class .modal-header di baris
7-11 serta class .modal-footer di baris 15-19.
Dalam modal header, tag <h5> dipakai untuk membuat judul modal, selain itu terdapat pula
tag <button> dengan class .btn-close dan atribut .data-bs-dismiss="modal". Button ini
berfungsi untuk membuat icon close ( x ) di sudut kanan atas yang jika di klik akan menutup
jendela modal.
Untuk modal footer, saya menempatkan 2 buah tag <button>. Tag <button> pertama memiliki
atribut data-bs-dismiss="modal" yang juga bisa dipakai untuk menutup jendela modal.
Sedangkan tag <button> kedua hanya sekedar tombol biasa.
Modal Centered
Secara default, box modal tampil di bagian atas web browser. Alternatif lokasi, terdapat class
.modal-dialog-centered agar modal tampil persis di tengah-tengah halaman. Class ini
300
ditempatkan ke dalam tag <div> yang sebelumnya memiliki class .modal-dialog:
30.modal_full_centered.html
3
5 <div class="modal-dialog modal-dialog-centered">
7 ...
8 </div>
9 </div>
10 </div>
Gambar: Tampilan jendela modal Bootstrap dengan class .modal-dialog-centered
Dengan tambahan class .modal-dialog-centered di baris 5, jendela modal akan tampil tepat di
tengah-tengah halaman.
Static Backdrop
Bootstrap juga menyediakan fitur supaya modal hanya bisa ditutup dengan men-klik tombol
close atau tanda silang di sudut kanan atas saja, tidak bisa dengan men-klik di luar modal.
Caranya, tambahkan class data-bs-backdrop="static" seperti contoh berikut:
30a.modal_static_backdrop.html
3
4 <div class="modal fade" id="contohModal" tabindex="-1"
5 data-bs-backdrop="static" data-bs-keyboard="false">
301
7 ...
8 </div>
9 </div>
Dengan tambahan atribut data-bs-backdrop="static" di baris 5, jendela modal tidak bisa lagi
ditutup dengan men-klik sembarang di background abu-abu, tapi harus dari tombol close.
Namun secara default, jendela modal juga bisa ditutup dengan menekan tombol Esc di
keyboard. Jika kita ingin menonaktifkan fitur ini, bisa juga menambah atribut data-bs-
keyboard="false" di baris yang sama.
Modal Size
Modifikasi lain yang bisa kita buat adalah mengatur lebar modal. Terdapat 4 pilihan ukuran
box modal: small, regular, large dan extra-large. Lebar box yang sudah kita pakai pada contoh
sebelumnya adalah ukuran regular.
Untuk mengecilkan lebar modal menjadi small, tambah class .modal-sm ke dalam tag <div>
dengan class .modal-dialog. Untuk ukuran large, tambah class .modal-lg, dan untuk ukuran
extra-large, tambah class .modal-xl. Berikut contoh penggunaannya:
31.modal_size.html
2 data-bs-target="#contohModal1">Tampilkan Modal Small</button>
3
4 <div class="modal fade" id="contohModal1" tabindex="-1">
5 <div class="modal-dialog modal-sm">
7 ...
8 </div>
9 </div>
10 </div>
11
13 data-bs-target="#contohModal2">Tampilkan Modal Regular</button>
14
18 ...
19 </div>
20 </div>
21 </div>
22
24 data-bs-target="#contohModal3">Tampilkan Modal Large</button>
25
27 <div class="modal-dialog modal-lg">
29 ...
302
30 </div>
31 </div>
32 </div>
Tampilan komponen modal Bootstrap dengan class .modal-sm
Tampilan komponen modal Bootstrap regular (tanpa tambahan class)
Tampilan komponen modal Bootstrap dengan class .modal-lg
303
Tampilan pertama adalah ukuran modal small dari penambahan class .modal-sm (baris 5).
Tampilan kedua adalah ukuran regular atau normal tanpa perlu tambahan class apapun.
Tampilan ketiga adalah ukuran modal large dari penambahan class .modal-lg (baris 27).
Meskipun ukurannya di set menjadi large, tapi lebar box modal tetap responsive dan akan
mengecil mengikuti lebar web browser.
9.8. Popovers
Popovers (bentuk jamak dari popover) adalah komponen Bootstrap untuk membuat efek teks
yang tampil di samping element saat ini. Popover mirip seperti tooltips namun dengan
tampilan yang lebih menarik. Popover sendiri berasal dari library JavaScript Popper.js.
Karena alasan performa, secara default komponen popover tidak aktif. Kita harus
mengaktifkannya secara manual menggunakan kode JavaScript berikut:
1 <script>
2 var popoverTriggerList = [].slice.call(document.querySelectorAll(
3 '[data-bs-toggle="popover"]'))
4 var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
5 return new bootstrap.Popover(popoverTriggerEl)
6 })
7 </script>
Tempatkan kode di atas pada akhir tag <body>, yakni setelah kode JavaScript untuk menginput
file bootstrap.bundle.js. Kode ini kurang lebih berarti: "Cari semua element HTML yang
memiliki atribut data-bs-toggle="popover", lalu aktifkan popover untuk element tersebut".
Kode di atas bukan satu-satunya cara untuk mengaktifkan popover, kita juga bisa
menggunakan JavaScript untuk mengaktifkan popover di element tertentu saja.
Berikut kode dasar pembuatan komponen popover Bootstrap:
32.popover_basic.html
1 <button type="button" class="btn btn-lg btn-danger"
2 data-bs-toggle="popover" title="Popover title"
3 data-bs-content="Sebuah pesan interaktif dari popover Bootstrap">
4 Tampilkan Popover</button>
Tampilan komponen popover Bootstrap
304
Di sini saya menggunakan tag <button> sebagai trigger untuk menampilkan popover. Ketika
button di klik, akan tampil popover di sisi bawah atau kanan (tergantung ruang mana yang
kosong). Untuk membuat efek ini, kita butuh beberapa atribut untuk tag <button>.
Atribut pertama adalah data-bs-toggle="popover" (baris 2) yang berfungsi untuk

menampilkan popover ketika button di klik.
Teks di dalam popover terdiri dari 2 bagian: title atau judul yang dibuat dari atribut title
(baris 2), serta body atau teks utama yang dibuat dari atribut data-bs-content (baris 3).
Dalam contoh di atas, atribut title saya isi dengan teks "Popover title", dan atribut data data-
bs-content diisi dengan teks "Sebuah pesan interaktif dari popover Bootstrap". Hasilnya, ketika
tombol di klik, teks ini akan mengisi pesan di popover. Untuk menutup popover, klik kembali
tombol tersebut.
Popovers Direction
Secara default, popover tampil di sisi bawah terlebih dahulu. Jika ternyata tidak ada ruang,
maka akan pindah ke sisi kanan. Jika ternyata di sisi kanan juga terhalang sesuatu, popover
tampil di sisi kiri:
33.popover_default_direction.html
1 <button type="button" class="btn btn-lg btn-danger float-end"
Tampilan komponen popover Bootstrap yang pindah ke kiri
Kode program di atas nyaris sama seperti sebelumnya. Hanya saja kali ini terdapat tambahan
class .float-end (baris 1) agar button float ke kanan. Akibatnya, sini kanan button sudah
menempel dengan ujung container sehingga tidak ada ruang lagi. Ketika di klik, popover akan
tampil di sisi kiri tombol.
Untuk mengatur penempatan posisi popover secara manual, terdapat atribut data-bs-
placement yang bisa diisi salah satu dari nilai top, bottom, left dan right. Berikut contoh
tampilannya:
305
34.popover_directions.html
2 data-bs-toggle="popover" title="Popover title" data-bs-placement="left"
4 Popover Left</button>
5
7 data-bs-toggle="popover" title="Popover title" data-bs-placement="top"
9 Popover Top</button>
10
12 data-bs-toggle="popover" title="Popover title" data-bs-placement="bottom"
14 Popover Bottom</button>
15
17 data-bs-toggle="popover" title="Popover title" data-bs-placement="right"
19 Popover Right</button>
Tampilan komponen popover Bootstrap di berbagai posisi
Tambahan atribut data-placement terdapat di baris 2, 7, 12 dan 17. Hasilnya, tampilan popover
akan muncul sesuai nilai atribut ini. Namun kembali, popover akan mencari ruang yang
kosong. Silahkan tes kecilkan lebar layar web browser, maka posisi popover akan ikut berubah
mencari ruang yang masih tersisa.
Popovers Dismiss
Dari beberapa contoh sebelum ini, kita harus klik tombol trigger untuk menutup popover.
Alternatif yang lebih baik adalah seperti komponen modal, dimana kita bisa menutup modal
cukup dengan men-klik sembarang tempat di luar element modal.
Untuk membuat efek yang sama di popover, tambahkan atribut tabindex="0" dan data-bs-
trigger="focus" seperti contoh berikut:
306
35.popover_dismiss.html
3 data-bs-content="Sebuah pesan interaktif dari popover Bootstrap"
4 tabindex="0" data-bs-trigger="focus">
Dengan tambahan atribut tabindex="0" dan data-trigger="focus" di baris 4, popover akan

hilang ketika kita meng-klik di sembarang tempat selain di button itu sendiri. Secara teknis
yang terjadi adalah, popover menghilang ketika tag <button> kehilangan event focus.
Popovers Trigger
Sepanjang pembahasan tentang popover kita menggunakan tag <button> sebagai trigger atau
element yang akan menampilkan popover. Pada dasarnya, hampir semua element HTML bisa
dipakai untuk menampilkan popover (sebagai trigger), dengan syarat terdapat atribut yang
diperlukan. Berikut contohnya:
36.popover_trigger.html
1 <a href="#" data-bs-toggle="popover" title="Popover title"
4 Tampilkan Popover</a>
5
6 <span data-bs-toggle="popover" title="Popover title"
9 Tampilkan Popover</span>
10
11 <i data-bs-toggle="popover" title="Popover title"
14 Tampilkan Popover</i>
Tampilan komponen popover Bootstrap dengan berbagai element trigger
Di sini saya menempatkan popover ke dalam tag <a>, <span> dan <i>. Hasilnya, popover tampil
ketika salah satu element di klik. Namun akan lebih baik jika tampilan element ditambah
sedikit efek untuk memberitahu user bahwa element tersebut akan menampilkan popover
saat di klik.
307
Popovers Hover
Bagaimana jika kita ingin popover tampil tanpa perlu di klik? tapi cukup mengarahkan cursor
mouse ke atas element trigger? Yup bisa, caranya gunakan atribut data-trigger="hover"
37.popover_hover.html
1 <p>Silahkan hover
2 <mark tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover"
3 title="Popover title"
5 text ini</mark> untuk menampilkan efek popover
6 </p>
Komponen popover tampil begitu tag <mark> di hover
Dengan menambah atribut data-trigger="hover", popover berperilaku seperti tooltips dan

tampil begitu cursor mouse berada di atasnya. Popover ini juga langsung menghilang saat
cursor mouse keluar dari element tersebut.
9.9. Tooltips
Tooltips (bentuk jamak dari tooltip) adakah komponen Bootstrap untuk menampilkan teks
saat cursor mouse berada di atas sebuah element. Efek tooltip sebenarnya sudah ada di dalam
HTML dengan cara menambah atribut title ke sebuah element:
38.tooltips_html.html
1 <p>
2 Lorem ipsum dolor sit amet consectetur
3 <abbr title="Tooltips pertama">adipisicing elit</abbr>.
4 Reprehenderit nobis cupiditate laborum earum placeat numquam quasi,
5 <strong title="Tooltips kedua">impedit sin</strong>
6 impedit sint? Repellendus similique maiores placeat saepe explicabo
7 <a href="#" title="Tooltips ketiga">eligendi quo</a>.
8 </p>
308
Tampilan tooltip bawaan HTML
Komponen tooltip Bootstrap men-style tampilan tooltip bawaan HTML dengan efek yang lebih
menarik. Caranya, tambah atribut data-bs-toggle="tooltip" ke dalam setiap element:
39.tooltips.html
1 <p>
2 Lorem ipsum dolor sit amet consectetur <abbr title="Tooltips pertama"
3 data-bs-toggle="tooltip">adipisicing elit</abbr>.
5 <strong title="Tooltips kedua" data-bs-toggle="tooltip">impedit sin</strong>
7 <a href="#" title="Tooltips ketiga" data-bs-toggle="tooltip">eligendi quo</a>
8 </p>
Tampilan komponen tooltip Bootstrap
Sekarang efek tooltips terlihat lebih menarik dan lebih jelas. Namun sama seperti popover,
secara default komponen tooltip Bootstrap tidak aktif. Kita harus mengaktifkannya dengan
kode JavaScript berikut:
1 <script>
2 var tooltipTriggerList = [].slice.call(document.querySelectorAll(
3 '[data-bs-toggle="tooltip"]'))
4 var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
5 return new bootstrap.Tooltip(tooltipTriggerEl)
6 })
7 </script>
Tempatkan kode di atas pada akhir tag <body>. Perintah JavaScript ini kurang lebih berarti:
"Cari semua element HTML yang memiliki atribut data-bs-toggle="tooltip", lalu aktifkan
tooltip untuk element tersebut".
309
Tooltip Direction
Sama seperti popover, kita bisa mengatur penempatan tooltip dari atribut data-bs-placement
dengan nilai salah satu dari top, bottom, left dan right:
40.tooltips_direction.html
1 <p>
2 Lorem ipsum dolor sit amet consectetur <abbr title="Tooltips pertama"
3 data-bs-toggle="tooltip" data-bs-placement="left">adipisicing elit</abbr>.
5 <strong title="Tooltips kedua" data-bs-toggle="tooltip"
6 data-bs-placement="right">impedit sin</strong>
8 <a href="#" title="Tooltips ketiga" data-bs-toggle="tooltip"
9 data-bs-placement="bottom">eligendi quo</a>.
10 </p>
Tampilan komponen tooltip Bootstrap dengan atribut data-placement
Juga sama seperti popover, apabila ruang di posisi yang ditentukan sudah tidak muat, tooltip
pindah ke posisi lain.
Tooltip HTML
Selain tampilan yang lebih menarik, teks dalam komponen tooltips juga bisa diisi tag HTML,
syaratnya tambah atribut data-bs-html="true" seperti contoh berikut:
41.tooltips_with_html.html
1 <p>
2 Lorem ipsum dolor sit amet consectetur
3 <abbr title="<i>Tooltips</i> <strong>pertama</strong>"
4 data-bs-toggle="tooltip" data-bs-html="true">adipisicing elit</abbr>.
5 </p>
Tampilan komponen tooltip Bootstrap dengan tag HTML
310
Dalam kode ini, isi atribut title mengandung tag HTML <i> dan <strong>. Dengan tambahan
atribut data-bs-html="true", teks akan dibaca sebagai kode HTML. Jika tanpa atribut data-
bs-html="true", isi atribut title akan dianggap sebagai teks biasa.
9.10. Progress
Progress adalah komponen Bootstrap untuk membuat tampilan bar atau garis warna. Disebut
sebagai progress karena komponen ini sering dipakai sebagai indikator proses yang sedang
berlangsung. Contohnya ketika upload file, akan lebih interaktif jika ada garis indikator berapa
persen file sudah terupload.
Sebenarnya di HTML5 juga terdapat element yang berfungsi mirip, yakni tag <progress>.
Namun Bootstrap membuat komponen progress dari tag <div> yang di-style menggunakan
CSS.
Komponen progress Bootstrap terdiri dari 2 bagian: sebuah container dengan class .progress
serta class .progress-bar yang ada di dalam container tersebut. Berikut contoh
penggunaannya:
42.progress_bar_basic.html
1 <div class="progress mt-3">
2 <div class="progress-bar"></div>
3 </div>
5 <div class="progress-bar" style="width: 25%"></div>
6 </div>
9 </div>
12 </div>
15 </div>
Tampilan komponen progress Bootstrap
311
Selain pasangan class .progress dan .progress-bar, terdapat utility class .mt-3 untuk
membuat margin-top agar komponen progress tidak saling menempel satu sama lain. Lebar
progress-bar sendiri di set manual menggunakan property width CSS.
Progress Label
Jika kita ingin memberi teks keterangan (label) seperti 10% atau 25%, tempatkan di antara tag
pembuka <div class="progress-bar"> dan tag penutup </div> seperti contoh berikut:
43.progress_bar_label.html
2 <div class="progress-bar" style="width: 25%">25%</div>
3 </div>
6 </div>
9 </div>
Tampilan komponen progress Bootstrap dengan label
Secara otomatis teks label akan tampil di tengah progress-bar.
Progress Height
Untuk mengatur tinggi dari progress, bisa di set dari property height CSS ke dalam tag <div
class="progress>, seperti contoh berikut:
44.progress_bar_height.html
1 <div class="progress mt-3" style="height: 5px">
3 </div>
6 </div>
9 </div>
312
Tampilan komponen progress Bootstrap dengan tinggi yang berbeda
Dalam contoh ini saya men-set tinggi progress sebesar 5px, 15px dan 35px.
Progress Color
Untuk mengubah warna progress, tempatkan utilities class background color seperti .bg-
primary, .bg-success, atau .bg-info ke dalam tag <div class="progress-bar">:
45.progress_bar_color.html
2 <div class="progress-bar bg-success" style="width: 25%"></div>
3 </div>
5 <div class="progress-bar bg-info" style="width: 75%"></div>
6 </div>
8 <div class="progress-bar bg-danger" style="width: 100%"></div>
9 </div>
Tampilan komponen progress Bootstrap dengan berbagai warna
Di sini saya memakai class .bg-success, .bg-info dan .bg-danger untuk membuat progress
bar yang berwarna hijau, biru dan merah.
Progress Striped
Progress striped adalah variasi tampilan progress dengan efek warna belang-belang. Untuk
membuatnya, tambah class .progress-bar-striped ke dalam tag <div class="progress-
bar">:
313
46.progress_bar_striped.html
2 <div class="progress-bar bg-success progress-bar-striped"
3 style="width: 25%"></div>
4 </div>
6 <div class="progress-bar bg-info progress-bar-striped"
8 </div>
10 <div class="progress-bar bg-danger progress-bar-striped"
12 </div>
Tampilan komponen progress Bootstrap dengan berbagai warna dan efek striped
Efek stripped ini akan lebih menarik jika ditambah animasi dari class .progress-bar-animated :
47.progress_bar_striped_animation.html
2 <div class="progress-bar bg-success progress-bar-striped
3 progress-bar-animated" style="width: 25%"></div>
4 </div>
6 <div class="progress-bar bg-info progress-bar-striped
8 </div>
10 <div class="progress-bar bg-danger progress-bar-striped
12 </div>
Hasilnya, efek stripped seolah-olah bergerak. Untuk melihat animasi ini, silahkan jalankan
langsung kode di atas.
Multiple bars
Fitur lain yang bisa dibuat dari komponen progress Bootstrap adalah multiple bars, yakni
menggabung beberapa progress bar menjadi satu. Caranya, tempatkan beberapa class
.progress-bar ke dalam 1 tag <div class="progress> seperti contoh berikut:
314
48.progress_bar_multiple.html
2 <div class="progress-bar bg-success" style="width: 15%">15%</div>
3 <div class="progress-bar bg-info" style="width: 25%">25%</div>
4 <div class="progress-bar bg-danger" style="width: 35%">35%</div>
5 </div>
Tampilan komponen multiple bars progress Bootstrap
Pada contoh di atas, saya menggabungkan 3 buah progress bar. Setiap bar bisa diatur lebarnya
secara individu.
9.11. Spinners
Spinners adalah komponen kecil untuk menampilkan animasi "berputar" (spin). Animasi ini
cukup sering kita temukan pada saat proses loading. Cara membuatnya sangat mudah, cukup
tempatkan class .spinner-border ke sebuah element:
49.spinner_basic.html
<div class="spinner-border"></div>
Gambar: Tampilan spinner
Spinner tampil dalam bentuk lingkaran yang sedikit terpotong dan terus berputar searah
jarum jam.
Dalam dokumentasi Bootstrap, kita disarankan menambah atribut role="status" serta class
tag <span class="visually-hidden">Loading...</span> untuk membantu assistive
technology, namun ini tidak wajib dan tidak ada perubahan tampilan apapun:
50.spinner_ideal.html
1 <div class="spinner-border" role="status">
2 <span class="visually-hidden">Loading...</span>
3 </div>
315
Komponen spinner juga bisa diwarnai dengan berbagai class teks Bootstrap seperti .text-
primary, .text-secondary, .text-danger, dll:
51.spinner_color.html
1 <div class="spinner-border text-primary"></div>
2 <div class="spinner-border text-secondary"></div>
3 <div class="spinner-border text-success"></div>
4 <div class="spinner-border text-danger"></div>
5 <div class="spinner-border text-warning"></div>
6 <div class="spinner-border text-info"></div>
7 <div class="spinner-border text-light"></div>
8 <div class="spinner-border text-dark"></div>
Gambar: Mengubah warna spinner
Growing Spinner
Selain dalam bentuk lingkaran berputar, Bootstrap menyediakan variasi tampilan lain
berbentuk titik lingkaran yang membesar. Ini dibuat dari class .spinner-grow:
52.spinner_grow.html
1 <div class="spinner-grow"></div>
2 <div class="spinner-grow text-primary"></div>
3 <div class="spinner-grow text-secondary"></div>
4 <div class="spinner-grow text-success"></div>
5 <div class="spinner-grow text-danger"></div>
6 <div class="spinner-grow text-warning"></div>
7 <div class="spinner-grow text-info"></div>
8 <div class="spinner-grow text-light"></div>
9 <div class="spinner-grow text-dark"></div>
Gambar: Tampilan dari .spinner-grow
316
Spinner Size
Ukuran spinner bisa diperkecil dengan class .spinner-border-sm, atau di set menggunakan
property width CSS:
53.spinner_size.html
1 <div class="spinner-border spinner-border-sm"></div>
2 <div class="spinner-border"></div>
3 <div class="spinner-border" style="width: 3rem; height: 3rem;"></div>
Gambar: Tampilan dari .spinner-grow
Spinner Buttons
Untuk membuat efek lanjutan, spinner bisa digabung dengan komponen lain seperti button:
54.spinner_button.html
1 <button class="btn btn-primary" type="button" disabled>
2 <span class="spinner-border spinner-border-sm"></span>
3 <span class="visually-hidden">Loading...</span>
4 </button>
5 <button class="btn btn-primary" type="button" disabled>
6 <span class="spinner-border spinner-border-sm"></span>
7 Loading...
8 </button>
Gambar: Gabungan spinner dengan button
Penerapan spinner untuk proses loading di luar cakupan Bootstrap, di sini kita hanya
menampilkan animasinya saja.
9.12. Placeholders
Mirip seperti spinner, placeholders bisa dipakai untuk menandakan proses loading yang
317
sedang berlangsung, tapi kali ini tampilannya menyerupai struktur web.
Umumnya, konten web di ambil dari database untuk kemudian di tampilkan. Jika server web
sedang sibuk, kadang terdapat jeda antara proses permintaan sampai teks tersebut tampil ke
web browser.
Daripada terlihat teks kosong saja, beberapa web ada yang menampilkan "kerangka" atau teks
dummy untuk mengisi konten sementara. Tampilan dummy inilah yang bisa dibuat
menggunakan komponen placeholder dari Bootstrap.
Untuk membuat placeholder, cukup tempatkan class .placeholder ke sebuah element seperti
tag <div> atau <span>. Lebar element selanjutnya bisa diatur menggunakan class grid
Bootstrap seperti .col-2, .col-4, utility class seperti .w-25 dan .w-50, atau diatur manual
menggunakan property width CSS.
Berikut contoh penggunaan komponen placeholder Bootstrap:
54a.placeholder.html
1 <div class="row">
2 <div class="col-sm-6 border p-4">
3 <h2 class="placeholder col-6"></h2>
4 <p>
5 <span class="placeholder col-7"></span>
9 <span class="placeholder w-75"></span>
10 <span class="placeholder" style="width: 400px;"></span>
11 </p>
12 </div>
13 </div>
Gambar: Tampilan komponen placeholder Bootstrap
Ketika sebuah element berisi class .placeholder, tampilannya akan berubah menjadi kotak
berwarna abu-abu. Selain itu ketika cursor mouse berada di atas element (hover), akan tampak
menjadi tanda loading yang sama seperti efek cursor: wait di CSS.
318
Class .placeholder ini tetap mempertahankan tinggi element asal. Misalnya tampilan tag <h2
class="placeholder"> di baris 3 akan lebih tinggi daripada tag <span class="placeholder"> .
Placeholders Color
Jika tampilan abu-abu terasa kurang menarik, Bootstrap mengizinkan kita menggunakan
utility class color seperti .bg-primary, atau .bg-secondary:
54b.placeholder_color.html
1 <div class="row">
2 <div class="border p-4">
3 <h2 class="placeholder col-6 bg-primary"></h2>
4 <div>
5 <span class="placeholder col-7 bg-secondary"></span>
6 <span class="placeholder col-4 bg-success"></span>
7 <span class="placeholder col-4 bg-danger"></span>
8 <span class="placeholder col-6 bg-info"></span>
9 <span class="placeholder w-75 bg-warning"></span>
10 <span class="placeholder bg-dark" style="width: 400px;"></span>
11 </div>
12 </div>
13 </div>
Gambar: Tampilan komponen placeholder dengan class warna
Sekarang tampilan placeholder terlihat berwarna-warni.
Placeholders Sizing
Untuk mengatur tinggi placeholder, tersedia juga class .placeholder-lg, .placeholder-sm,
dan .placeholder-xs:
54c.placeholder_size.html
1 <div class="row">
2 <div class="border p-4">
3 <span class="placeholder col-7 placeholder-lg"></span>
5 <span class="placeholder col-7 placeholder-sm"></span>
319
6 <span class="placeholder col-7 placeholder-xs"></span>

7 </div>
8 </div>
Gambar: Tampilan berbagai ukuran placeholder
Placeholders Animation
Efek loading biasanya lebih pas jika ada sedikit animasi. Bootstrap menyediakan class
.placeholder-glow dan .placeholder-wave untuk keperluan ini:
54d.placeholder_animation .html
1 <div class="row">
2 <div class="col-sm-6 border p-4 placeholder-glow">
4 <p>
9 </p>
10 </div>
11 <div class="col-sm-6 border p-4 placeholder-wave">
13 <p>
18 </p>
19 </div>
20 </div>
320
Gambar: Efek animasi untuk placeholder
Karena berbentuk animasi, tampilan dari kedua efek ini baru bisa terlihat saat dijalankan
langsung. Box di sisi kiri akan memiliki efek berpendar setiap beberapa saat sebagai efek dari
class .placeholder-glow di baris 2. Sedangkan box di sisi kanan akan ada efek gelombang
setiap beberapa saat sebagai efek dari class .placeholder-wave di baris 11.
Sama seperti spinner, penggunaan komponen ini akan butuh kode JavaScript untuk mengganti
tampilan placeholder menjadi teks begitu konten website siap untuk ditampilkan.
9.13. Toast
Toast adalah komponen berbentuk kotak kecil yang bisa diisi informasi singkat. Secara konsep
toast ini mirip seperti gabungan modal dan alert. Berikut tampilannya:
Gambar: Tampilan komponen Toast Bootstrap
Dalam contoh ini begitu tombol di klik, akan tampil kotak kecil. Kotak inilah yang disebut
sebagai toast. Sama seperti alert, toast cocok dipakai untuk menampilkan info singkat.
Berikut struktur pembuatan toast untuk tampilan di atas:
55.toast_basic.html
1 <button class="btn btn-lg btn-info mb-4 text-white" id="tombol1" type="button">
2 Tampilkan Toast</button>
3
4 <div class="toast">
321
5 <div class="toast-header">
6 <strong class="me-auto">Update</strong>
7 <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
8 </div>
9 <div class="toast-body">Anda mendapat 1 pesan baru</div>
10 </div>
Kode di baris 1 – 2 berfungsi untuk membuat tombol trigger. Tombol ini bukan bagian dari
toast dan berfungsi untuk menampilkan toast saja.
Struktur toast berada pada container class .toast (baris 4), yang di dalamnya terdapat
pasangan class .toast-header untuk membuat judul toast, serta .toast-body untuk membuat
isi teks toast. Pada class .toast-header juga terdapat tag <button> yang menampilkan icon
silang (x) untuk menutup toast.
Sama seperti popover, Bootstrap tidak mengaktifkan toast secara default. Untuk bisa
menampilkan toast, harus diaktifkan terlebih dahulu dengan kode JavaScript berikut:
55.toast_basic.html
1 <script>
2 var toastElList = [].slice.call(document.querySelectorAll('.toast'))
3 var toastList = toastElList.map(function (toastEl) {
4 return new bootstrap.Toast(toastEl)
5 });
6
7 var tombol1 = document.getElementById('tombol1');
8 tombol1.addEventListener("click", function() {
9 toastList[0].show();
10 });
11 </script>
Tempatkan kode ini di akhir tag <body>, yakni setelah kode JavaScript untuk menginput file
bootstrap.bundle.js . Kode di baris 2 - 5 kurang lebih berarti: "Cari semua element HTML
yang memiliki class .toast, lalu aktifkan toast untuk element tersebut". Sedangkan kode di
baris 7 – 10 dipakai untuk menambah event click ke dalam tombol "Tampilkan Toast" yang kita
buat sebelumnya.
Sedikit variasi tampilan, saya ingin mempercantik tampilan header toast dengan kode berikut:
56.toast_full.html
3
4 <div class="toast">
6 <span style="height:15px; width:15px;" class="bg-info rounded me-2"></span>
8 <small>11 mins ago</small>
322
10 </div>
12 </div>
Gambar: Tampilan toast dengan variasi header
Tambahannya ada di baris 6 dan 8. Kode di baris 6 berfungsi untuk membuat kotak kecil di sisi
kanan toast header. Ini dibuat dari tag <span> dan kode CSS height:15px dan width:15px.
Warna kotak biru berasal dari class .bg-info. Sedangkan kode di baris 8 dipakai untuk menulis
informasi waktu kapan toast tampil.
Toast Placement
Umumnya pesan seperti toast tampil di salah satu sudut halaman. Ini bisa dibuat dengan
bantuan utility class .position-fixed serta tambahan class seperti .top-0, .start-0,
.bottom-0 atau .end-0. Berikut contoh penggunaannya:
57.toast_position.html
1 <button>...</button>
2
3 <div class="toast position-fixed bottom-0 end-0 m-3">
5 ...
6 </div>
7 </div>
Gambar: Mengatur posisi tampilan toast
323
Dengan tambahan class position-fixed bottom-0 end-0 m-3 di baris 3, toast akan tampil di
sudut kanan bawah web browser.
Toast AutoHide
Secara bawaan, toast otomatis hilang setelah beberapa detik. Jika kita ingin toast tampil
permanen dan baru tertutup saat icon (x) di klik, tambah atribut data-bs-autohide="false" ke
dalam tag <div class="toast">:
58.toast_position_not_hide.html
1 <button>...</button>
2
3 <div class="toast position-fixed bottom-0 end-0 m-3" data-bs-autohide="false">
5 ...
6 </div>
7 </div>
Dengan tambahan data-bs-autohide="false" di baris 3, toast tidak lagi tertutup secara

otomatis.
Toast Stacking
Bootstrap juga menyediakan class .toast-container untuk merapikan toast jika terdapat lebih
dari 1 toast yang tampil bersamaan. Berikut contoh penggunaannya:
59.toast_position_container.html
2
5
6 <div class="toast-container position-absolute top-0 end-0 m-3">
7
8 <div class="toast" data-bs-autohide="false">
10 <span style="height:15px; width:15px;" class="bg-info rounded me-2"></span>
14 </div>
16 </div>
17
20 <span style="height:15px; width:15px;" class="bg-warning rounded me-2">
21 </span>
22 <strong class="me-auto">Warning</strong>
324

25 </div>
26 <div class="toast-body">Ada 2 pesan tidak terkirim</div>
27 </div>
28
31 <span style="height:15px; width:15px;" class="bg-danger rounded me-2">
32 </span>
33 <strong class="me-auto">Danger</strong>
36 </div>
37 <div class="toast-body">Akun anda baru saja login dari perangkat
38 tak dikenal!</div>
39 </div>
40
41 </div>
42
43 </div>
44
46 <script>
47 var toastElList = [].slice.call(document.querySelectorAll('.toast'))
48 var toastList = toastElList.map(function (toastEl) {
49 return new bootstrap.Toast(toastEl)
50 });
51
52 var tombol1 = document.getElementById('tombol1');
53 tombol1.addEventListener("click", function() {
54 toastList[0].show();
55 setTimeout(function() {
56 toastList[1].show()}, 2000
57 );
58 setTimeout(function() {
59 toastList[2].show()}, 5000
60 );
61 });
62 </script>
325
Gambar: Menampilkan 3 toast dalam class .toast-container
Kodenya cukup panjang karena terdapat 3 buah toast. Ketiga toast berada dalam class .toast-
container di baris 6. Selain itu posisi toast juga diatur pada baris ini dengan class position-
absolute top-0 end-0 m-3, sehingga tidak perlu ditulis secara individu pada setiap toast.
Struktur ketiga toast di baris 8 – 39 nyaris tidak berbeda dengan praktek kita sebelumnya,
hanya saja kali ini saya menggunakan warna box dan isi pesan yang berbeda-beda.
Perubahan juga terdapat di kode JavaScript pada baris 52 – 61. Di sini saya menambah sedikit
kode untuk membuat jeda. Pada saat tombol "Tampilkan Toast" di klik, toast "Update" akan
tampil terlebih dahulu, lalu 2 detik setelah itu baru tampil toast "Warning" dan diikuti toast
"Danger" setelah 5 detik. Jeda waktu ini dibuat dari fungsi setTimeout() milik JavaScript.
9.14. Offcanvas
Offcanvas merupakan komponen baru di Bootstrap 5. Komponen ini mirip seperti modal,
yakni menampilkan box baru di atas halaman yang sudah ada. Akan tetapi posisi offcanvas
hanya bisa "menempel" di sisi kiri, kanan atau bawah jendela web browser.
Langsung saja kita lihat praktek dan tampilan dari offcanvas:
60.offcanvas_basic.html
1 <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasContoh">
2 Link dengan href </a>
3
4 <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasContoh">
5 <div class="offcanvas-header">
6 <h5 class="offcanvas-title">Offcanvas</h5>
7 <button type="button" class="btn-close" data-bs-dismiss="offcanvas">
326
8 </button>
9 </div>
10 <div class="offcanvas-body">
11 <div>
12 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aliquid
13 nemo sint dolor temporibus repellendus facere exercitationem minus magni.
14 </div>
15 </div>
16 </div>
Gambar: Menampilkan komponen offcanvas
Dalam kode ini terdapat sebuah tombol yang ketika di klik akan menampilkan offcanvas di sisi
kiri halaman.
Prinsip dasar penulisan offcanvas mirip seperti modal. Pertama kita perlu element yang
menjadi trigger. Dalam contoh di atas trigger ini berasal dari tag <a class="btn btn-
primary">, yang dipadu dengan atribut data-bs-toggle="offcanvas" serta
href="#offcanvasContoh" . Nilai dari atribut href harus berpasangan dengan nilai atribut id
milik offcanvas yang terdapat di baris 4.
Kedua, kita perlu membuat struktur HTML offcanvas. Ini ada di tag <div> dengan class
.offcanvas dan .offcanvas-start (baris 4 – 16). Di dalamnya terdapat kode untuk bagian
header <div class= "offcanvas-header"> , serta bagian body <div class="offcanvas-body">.
Untuk header, berisi lagi class .offcanvas-title untuk judul, serta tag <button> untuk
membuat tombol close (x).
Bagian body offcanvas hanya berisi teks tag <div> saja di baris 11 – 14. Bagian ini bebas diganti
dengan element HTML apa saja, termasuk mengisinya dengan komponen Bootstrap lain
seperti menu navigasi.
Untuk menutup jendela offcanvas, klik tanda silang (x) di bagian atas atau klik sembarang
tempat di halaman parent yang memiliki overlay abu-abu.
327
Sebagai alternatif penulisan, tag <a> yang dipakai sebagai trigger juga bisa dibuat dari tag
<button> dengan kode berikut:
1 <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"

2 data-bs-target="#offcanvasContoh">Button dengan data-bs-target</button>
Jika dalam tag <a> kita memakai href="#offcanvasContoh", sekarang atribut ini diganti dengan
data-bs-target="#offcanvasContoh" .
Offcanvas Placement
Pada praktek sebelum ini posisi offcanvas ada di sisi kiri. Selain itu kita juga bisa menampilkan
offcanvas di sisi kanan atau bawah halaman. Caranya, ganti class .offcanvas-start dengan
.offcanvas-end atau .offcanvas-bottom.
Berikut contoh praktek dari penempatan posisi offcanvas:
61.offcanvas_placement.html
1 <a class="btn btn-secondary" data-bs-toggle="offcanvas" href="#offcanvasStart">
2 Offcanvas-start </a>
3
4 <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasStart">
5 ...
6 </div>
7
8 <a class="btn btn-warning" data-bs-toggle="offcanvas" href="#offcanvasEnd">
9 Offcanvas-end </a>
10
11 <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd">
12 ...
13 </div>
14
15 <a class="btn btn-danger" data-bs-toggle="offcanvas" href="#offcanvasBottom">
16 Offcanvas-bottom </a>
17
18 <div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom">
19 ...
20 </div>
328
Gambar: Posisi offcanvas di sisi bawah dan kanan halaman
Dalam kode ini saya membuat 3 offcanvas yang bisa diakses dari 3 tombol trigger berbeda.
Class .offcanvas-start (baris 4) akan menampilkan offcanvas di sisi kiri halaman. Class
.offcanvas-end (baris 11) menampilkan offcanvas di sisi kanan halaman. Dan class
.offcanvas-bottom (baris 19) menampilkannya di sisi bawah halaman.
Offcanvas Backdrop
Modifikasi lain yang bisa dilakukan untuk offcanvas adalah mengatur interaksi dengan
halaman parent.
Secara default, begitu offcanvas tampil kita tidak bisa lagi berinteraksi dengan halaman parent
karena tertutup oleh layer berwarna abu-abu. Dengan menambah atribut data-bs-
backdrop="false", layer abu-abu ini akan hilang. Dan jika ditambah lagi dengan atribut data-
bs-scroll="true", halaman parent bisa di scroll meskipun jendela offcanvas masih terbuka.
Berikut percobaan dari kedua efek ini:
62.offcanvas_backdrop.html
1 <a class="btn btn-secondary" data-bs-toggle="offcanvas" href="#offcanvas1">
2 Backdrop False </a>
3
4 <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas1"
5 data-bs-backdrop="false">
6 ...
7 </div>
8
9 <a class="btn btn-warning" data-bs-toggle="offcanvas" href="#offcanvas2">
10 Scroll True</a>
11
13 data-bs-scroll="true">
14 ...
329
15 </div>
16
17 <a class="btn btn-danger" data-bs-toggle="offcanvas" href="#offcanvas3">
18 Backdrop False dan Scroll True </a>
19
21 data-bs-backdrop="false" data-bs-scroll="true">
22 ...
23 </div>
24
25 <div style="margin-top: 1000px;">
26 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aliquid
27 nemo sint dolor temporibus repellendus facere exercitationem minus magni.
28 </div>
Gambar: Mengakses halaman parent saat offcanvas terbuka
Tombol pertama dipakai untuk mengakses offcanvas dengan tambahan atribut data-bs-
backdrop="false" (baris 5). Hasilnya, layer abu-abu yang menutupi halaman parent akan
hilang dan kita bisa berinteraksi dengan isi halaman tersebut.
Tombol kedua akan menampilkan offcanvas dengan tambahan atribut data-bs-scroll="true"

(baris 13). Hasilnya halaman parent bisa di scroll meskipun masih terhalang layer abu-abu.
Untuk offcanvas tombol ketiga, terdapat 2 atribut sekaligus berupa data-bs-backdrop="false"

dan data-bs-scroll="true" (baris 21). Hasilnya, layer abu-abu akan hilang dan halaman parent
bisa di scroll ke bawah.
Di akhir kode saya sengaja menambah dummy text dari tag <div style="margin-top:
1000px;"> agar kita memiliki halaman yang bisa di scroll ke arah bawah.
330
---
Dalam bab ini kita telah membahas 13 komponen Bootstrap yang berhubungan dengan
tampilan dan interaksi. Berikutnya akan masuk ke komponen Bootstrap untuk perancangan
form.
------------------------------------------------------------------
=====================================================================
331
Form Styling
10. Form Styling
Bab kali ini akan membahas cara mempercantik tampilan form menggunakan Bootstrap.
Mayoritas form tetap kita tulis dengan tag HTML biasa seperti <input type="text">, <input
type="radio">, <input type="checkbox"> , <textarea>, atau <select>. Bootstrap hanya
menyediakan struktur dan class tambahan agar tampilannya lebih modern.
10.1. Form Tanpa Bootstrap

Sebagai pembanding, berikut tampilan form HTML tanpa Bootstrap maupun kode CSS:
01.form_tanpa_bootstrap.html
1 <form>
2
3 <label for="inputNama">Nama</label>
4 <input type="text" id="inputNama" placeholder="Nama lengkap">
5
6 <label for="inputPassword">Password</label>
7 <input type="password" id="inputPassword" placeholder="Password">
8
9 <label for="inputEmail">Email</label>
10 <input type="email" id="inputEmail" placeholder="Alamat email">
11
12 <label for="inputTahun">Tahun</label>
13 <select id="inputTahun">
14 <option>2021</option>
19 </select>
20
21 <label for="inputKomentar">Komentar</label>
22 <textarea id="inputKomentar"></textarea>
23
24 </form>
332
Form Styling
Tampilan form bawaan HTML (tanpa Bootstrap dan kode CSS)
Tampilan di atas tampak "berantakan" karena hanya berisi tag HTML tanpa CSS maupun
Bootstrap. Dan ini normal, biasanya form harus di-style dengan CSS agar tampak rapi,
terutama mengatur width, margin dan padding setiap inputan.
Tag <label> dipakai untuk membuat teks penjelasan dari setiap inputan. Atribut for yang ada
di dalamnya berguna untuk menghubungkan <label> dengan atribut id pada kotak inputan
form. Sebagai contoh, tag <label for="inputNama"> akan berpasangan dengan <input
type="text" id="inputNama"> .
Penulisan pasangan atribut for dan id ini tidak wajib, tapi lebih ke rekomendasi penggunaan
tag <label>. Jikapun di ganti dengan <span> atau tanpa tag sekalipun, itu tidak masalah.
Namun di Bootstrap, tag <label> memiliki peranan khusus terutama untuk checkbox dan
radio button agar user mudah mengisi form.
Jika butuh penjelasan lebih detail tentang fungsi setiap tag form HTML, materi tersebut
ada di buku HTML Uncover.
10.2. Form-control
Class Bootstrap pertama yang bisa kita tambah untuk mempercantik tampilan form adalah
class .form-control. Class ini memberikan style umum ke setiap inputan form:
02.form_control.html
1 <form>
2
3 <label for="inputNama">Nama</label>
4 <input type="text" id="inputNama" class="form-control"
5 placeholder="Nama lengkap">
6
8 <input type="password" id="inputPassword" class="form-control"
9 placeholder="Password">
10
11 <label for="inputEmail">Email</label>
333
Form Styling
12 <input type="email" id="inputEmail" class="form-control"

13 placeholder="Alamat email">
14
15 <label for="inputTahun">Tahun</label>
16 <select id="inputTahun" class="form-select">
22 </select>
23
24 <label for="inputKomentar">Komentar</label>
25 <textarea id="inputKomentar" class="form-control"></textarea>
26
27 </form>
Tampilan form dengan tambahan class .form-control Bootstrap
Kode HTML ini nyaris sama seperti contoh sebelumnya. Hanya saja sekarang setiap tag
<input>, <select> dan <textarea> memiliki class .form-control. Serta tag <select> dengan
class .form-select. Dengan tambahan ini, tampilan form langsung berubah drastis.
Class .form-control mengubah cukup banyak style form, diantaranya teks berwarna abu-abu,
memiliki border radius, efek animasi border yang berwarna biru ketika inputan form dipilih,
serta inputan form sekarang diubah menjadi block level element dengan lebar 100%.
Agar lebih jelas, berikut property CSS yang diterapkan kepada inputan form pada saat kita
menggunakan class .form-control Bootstrap:
1 .form-control {
2 display: block;
334
Form Styling
3 width: 100%;
4 padding: 0.375rem 0.75rem;
5 font-size: 1rem;
6 font-weight: 400;
7 line-height: 1.5;
8 color: #212529;
9 background-color: #fff;
10 background-clip: padding-box;
11 border: 1px solid #ced4da;
12 -webkit-appearance: none;
13 -moz-appearance: none;
14 appearance: none;
15 border-radius: 0.25rem;
16 transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
17 }
Jika anda sudah membaca buku CSS Uncover, saya yakin bisa memahami sebagian besar
property CSS ini. Terlihat ada 2 buah efek transisi yang dibuat Bootstrap, yakni untuk border
color dan box-shadow (baris 16).
Meskipun sudah tampil menarik, jarak antar inputan masih terlalu rapat. Solusinya, tempatkan
pasangan tag <label> dan tag <input> ke dalam container tag <div>, kemudian atur margin
dengan menambah class .mt-3:
03.form_div.html
1 <form>
2
3 <div class="mt-3">
4 <label for="inputNama" class="form-label">Nama</label>
5 <input type="text" id="inputNama" class="form-control"
6 placeholder="Nama lengkap">
7 </div>
8
10 <label for="inputPassword" class="form-label">Password</label>
11 <input type="password" id="inputPassword" class="form-control"
13 </div>
14
16 <label for="inputEmail" class="form-label">Email</label>
17 <input type="email" id="inputEmail" class="form-control"
18 placeholder="Alamat email">
19 </div>
20
22 <label for="inputTahun" class="form-label">Tahun</label>
23 <select id="inputTahun" class="form-select">
335
Form Styling
29 </select>
30 </div>
31
33 <label for="inputKomentar" class="form-label">Komentar</label>
34 <textarea id="inputKomentar" class="form-control"></textarea>
35 </div>
36
37 </form>
Perubahan pada kode ini adalah, semua pasangan tag <label> dan <input> sekarang berada di
dalam tag <div class="mt-3"> (baris 3, 9, 15, 21 dan 32). Jika dirasa masih terlalu rapat, bisa
pakai utility class margin yang lebih besar seperti .mt-4 atau .mt-5.
Selain itu untuk tag <label> terdapat tambahan class .form-label untuk sedikit margin
bottom. Berikut perbedaan tampilan form dengan sebelumnya:
Tampilan tanpa class .form-group (kiri) dan dengan class .form-group (kanan)
Tampilan di sebelah kanan dengan tambahan <div class="mt-3"> terlihat lebih rapi, dimana
terdapat jarak yang cukup besar antar setiap isian form.
10.3. Form Size

Untuk membuat inputan yang lebih kecil atau lebih besar, tersedia class .form-control-sm dan
form-control-lg. Berikut tampilannya:
336
Form Styling
04.form_control_size.html
1 <form>
2
4 <input type="text" class="form-control form-control-sm" placeholder="Small">
5 </div>
6
8 <input type="text" class="form-control" placeholder="Regular">
9 </div>
10
12 <input type="text" class="form-control form-control-lg" placeholder="Large">
13 </div>
14
15 </form>
Tampilan 3 jenis ukuran inputan form: small, regular dan large
Untuk membuat inputan form yang lebih kecil, gunakan class .form-control-sm (baris 4).
Untuk tampilan yang lebih besar, gunakan class .form-control-lg (baris 12). Tanpa kedua class
ini, inputan form tampil dalam ukuran normal (baris 8).
10.4. Readonly, Disabled dan Plaintext

Untuk menonaktifkan inputan form, HTML menyediakan atribut readonly dan disabled. Jika
ditambah atribut readonly, inputan form menjadi tidak bisa diakses namun masih tampak
normal. Jika menggunakan atribut disabled, selain tidak bisa diakses tampilan form juga
menjadi abu-abu yang menandakan tidak aktif.
Sebagai tambahan dari 2 kondisi ini, Bootstrap menyediakan class .form-control-plaintext

yang membuat inputan form menjadi seperti teks biasa. Berikut contoh penggunaannya:
05.form_control_readonly.html
1 <form>
2
337
Form Styling
4 <input type="text" class="form-control" placeholder="Readonly" readonly>
5 </div>
6
8 <input type="text" class="form-control" placeholder="Disabled" disabled>
9 </div>
10
12 <input type="text" class="form-control form-control-plaintext"
13 placeholder="Plaintext">
14 </div>
15
16 </form>
Tampilan inputan form dengan atribut readonly (atas), disabled (tengah) dan class .form-control-plaintext (bawah)
Baris ke-4 menggunakan atribut readonly. Hasilnya, efek animasi border masih aktif ketika
kita klik, namun inputan form tidak bisa diisi dengan teks apapun.
Baris ke-8 menggunakan atribut disabled. Hasilnya, inputan form tidak lagi bisa di klik dan
juga tidak bisa diisi teks apapun.
Baris ke-12 menggunakan class .form-control-plaintext. Hasilnya inputan form tampil

seperti teks biasa dengan warna abu-abu dan masih bisa di klik.
Ketiga jenis kondisi ini bisa digunakan ke semua inputan form lain seperti select, textarea,
radio dan checkbox.
10.5. Form File, Form Range dan Form Color

Untuk men-style inputan form yang berbentuk tag <input type="file">, <input
type="range">, <input type="color">, bisa menggunakan class .form-control, .form-range,
dan .form-control-color Berikut tampilannya:
06.form_control_file_range_color.html
1 <form>
338
Form Styling
2
4 <label for="formFile1">Upload File: </label>
5 <input type="file" id="formFile1">
6 </div>
7
9 <label for="formRange1">Jarak: </label>
10 <input type="range" id="formRange1">
11 </div>
12
14 <label for="formColor1">Warna: </label>
15 <input type="color" id="formColor1">
16 </div>
17
18 <br><br>
19
21 <label for="formFile2" class="form-label">Upload File: </label>
22 <input class="form-control" type="file" id="formFile2">
23 </div>
24
26 <label for="formRange2" class="form-label">Jarak: </label>
27 <input class="form-range" type="range" id="formRange2">
28 </div>
29
31 <label for="formColor2" class="form-label">Warna: </label>
32 <input class="form-control form-control-color"
33 type="color" id="formColor2">
34 </div>
35
36 <form>
Dalam contoh ini saya membuat inputan tag <input type="file">, <input type="range">,
dan <input type="color"> bawaan HTML (atas) dan dengan tambahan class Bootstrap
(bawah). Bootstrap mengubah cukup drastis tampilannya tag <input type="file">, serta
setiap inputan form memanjang hingga 100% parent element.
339
Form Styling
Tampilan inputan file dan range secara default HTML (atas) dan dari Bootstrap (bawah)
10.6. Form Checkbox dan Form Radio

Untuk men-style tampilan checkbox dan radio, tersedia class .form-check-input untuk tag
<input>, serta class .form-check-label untuk tag <label>. Berikut contoh penggunaannya:
07.form_check_checkbox.html
1 <form>
2
3 <div class="form-check">
4 <input type="checkbox" class="form-check-input" id="inputCheck1">
5 <label class="form-check-label" for="inputCheck1">Pilihan 1</label>
6 </div>
7
9 <input type="checkbox" class="form-check-input" id="inputCheck2" disabled>
11 </div>
12
13 </form>
Tampilan inputan checkbox
340
Form Styling
Efek dari Bootstrap membuat tampilan checkbox lebih menarik. Untuk checkbox kedua
(bawah) saya menambah atribut disabled sehingga menjadi tidak aktif (berwarna abu-abu).
Penggunaan atribut for di dalam tag <label> yang berpasangan dengan atribut id di tag
<input>, menambah fitur user experience ke dalam checkbox (dan juga nantinya radio). Kita
bisa menceklis checkbox hanya dengan men-klik teks saja. Tanpa tag <label>, kita terpaksa
men-klik persis di dalam kotak checkbox.
Untuk radio, class yang digunakan juga sama, yakni class .form-check-input untuk tag
<input>, serta class .form-check-label untuk tag <label>:
08.form_check_radio.html
1 <form>
2
4 <input type="radio" class="form-check-input" id="inputRadio1"
5 name="contohRadio">
6 <label class="form-check-label" for="inputRadio1">Pilihan 1</label>
7 </div>
8
13 </div>
14
17 name="contohRadio" disabled>
19 </div>
20
21 </form>
Tampilan inputan radio button
Dari hasil checkbox dan radio button, setiap pilihan berada dalam 1 baris terpisah. Bagaimana
jika kita ingin pilihan ini berjejer satu sama lain ke kanan (inline)? Caranya, tambahan class
.form-check-inline ke dalam container dari setiap checkbox dan radio:
341
Form Styling
09.form_check_inline.html
1 <form>
2
3 <div class="form-check form-check-inline">
6 </div>
7
11 </div>
12
14 <input type="checkbox" class="form-check-input" id="inputCheck3" disabled>
16 </div>
17
18 <br>
19
24 </div>
25
30 </div>
31
34 name="contohRadio" disabled>
36 </div>
37
38 </form>
Tampilan checkbox dan radio button dengan class .form-check-inline
Dengan tambahan class .form-check-inline di setiap container tag <div class="form-

check>, tombol checkbox dan radio button akan berjejer dari kiri ke kanan seperti sebuah
inline level element. Jika tidak terdapat tag <br> di baris 18, maka radio button di baris kedua
342
Form Styling
masih akan menyambung checkbox di baris pertama.
Switches
Bootstrap menyediakan tampilan lain dari checkbox yang disebut sebagai switches. Untuk
membuatnya, cukup tambah class .form-switch ke dalam container tag <div>:
09a.form_switch.html
1 <form>
2
3 <div class="form-check form-switch">
4 <input type="checkbox" class="form-check-input" id="inputSwitch1">
5 <label class="form-check-label" for="inputSwitch1">Pilihan 1</label>
6 </div>
7
9 <input type="checkbox" class="form-check-input" id="inputSwitch2" checked>
11 </div>
12
14 <input type="checkbox" class="form-check-input" id="inputSwitch3" disabled>
16 </div>
17
18 </form>
Tampilan komponen switches Bootstrap
Secara internal HTML, switches tetap di proses sebagaimana inputan checkbox biasa,
termasuk bisa ditambah dengan atribut checked dan disabled.
10.7. Form Select

Untuk men-style tampilan tag <select>, Bootstrap menyediakan class .form-select. Serta
untuk mengatur ukuran, tersedia juga class .form-select-lg dan .form-select-sm. Berikut
contoh penggunaannya:
343
Form Styling
09b.form_select.html
1 <form>
2
4 <label for="inputTahun1" class="form-label">Tahun</label>
5 <select id="inputTahun1" class="form-select">
6 <option selected>2021</option>
10 </select>
11 </div>
12
15 <select id="inputTahun2" class="form-select form-select-lg">
20 </select>
21 </div>
22
25 <select id="inputTahun3" class="form-select form-select-sm">
30 </select>
31 </div>
32
33 </form>
Tampilan tag <select> dengan class .form-select
344
Form Styling
Di sini saya membuat 3 buah tag <select>. Inputan pertama hanya menggunakan .form-select
saja, sedangkan inputan kedua dan ketiga ditambah dengan class .form-select-lg dan .form-
select-sm.
10.8. Form Grid

Dari contoh form Bootstrap yang sudah kita coba, tambahan class .form-control membuat
inputan form memanjang memenuhi parent element ( width:100%). Namun jika digabung
dengan grid system, kita bisa dengan mudah mengatur lebar dan posisi inputan ini. Berikut
contohnya:
10.form_grid.html
1 <form>
2
3 <div class="row">
4 <div class="col">
5 <input type="text" class="form-control" placeholder="Nama Lengkap">
6 </div>
7 <div class="col">
8 <input type="password" class="form-control" placeholder="Password">
9 </div>
10 </div>
11
12 </form>
Tampilan 2 inputan form Bootstrap di dalam grid system
Di sini saya menempatkan setiap inputan ke dalam class .col. Apabila masih ingat, class .col
tanpa jumlah segmen akan membagi .row dengan ukuran yang sama besar.
Untuk mengatur jarak spasi antar kolom, bisa menggunakan utility class gutter seperti .g-3.
11.form_grid_gutter.html
1 <form>
2
4 <div class="col">
6 </div>
7 <div class="col">
345
Form Styling
8 <input type="password" class="form-control" placeholder="Password">

9 </div>
10 </div>
11
12 </form>
Tampilan 2 inputan form Bootstrap dengan class .g-3
Sekilas tidak tampak berbeda dengan tampilan sebelumnya, namun jika diperhatikan dengan
teliti, spasi atau margin di antara kedua inputan menjadi lebih kecil.
Dengan menggabungkan class form Bootstrap dengan grid system, kita bisa membuat struktur
form yang rapi seperti tampilan berikut:
Tampilan form lengkap dengan Bootstrap
Form di atas terkesan profesional dan umum dijumpai pada web modern. Tantangannya,
bisakah anda buat kode untuk tampilan ini? Semua class yang dipakai sudah kita bahas
sebelumnya.
Caranya, siapkan grid terlebih dahulu, lalu tulis satu per satu inputan form. Kode yang
diperlukan memang sedikit panjang karena terdapat 6 inputan form serta 1 tombol submit.
Baik, berikut kode program yang saya pakai:
12.form_grid_complete.html
1 <form>
2
346
Form Styling
3 <div class="row mt-3">

5 <label for="inputNama" class="form-label">Nama Lengkap</label>
6 <input type="text" class="form-control" id="inputNama"
7 placeholder="Nama Lengkap">
8 </div>
9
11 <label for="inputPassword" class="form-label">Password</label>
12 <input type="password" class="form-control" id="inputPassword"
14 </div>
15 </div>
16
18 <div class=" form-group col-4">
19 <label for="selectProvinsi" class="form-label">Provinsi</label>
20 <select id="selectProvinsi" class="form-select">
21 <option selected>Pilih nama provinsi...</option>
22 <option>...</option>
23 </select>
24 </div>
25
27 <label for="selectKota" class="form-label">Kota</label>
28 <select id="selectKota" class="form-select">
29 <option selected>Pilih nama kota...</option>
31 </select>
32 </div>
33
35 <label for="selectKecamatan" class="form-label">Kecamatan</label>
36 <select id="selectKecamatan" class="form-select">
37 <option selected>Pilih nama kecamatan...</option>
39 </select>
40 </div>
41 </div>
42
43 <div class="form-check mt-3">
44 <input class="form-check-input" type="checkbox" id="checkSyarat">
45 <label class="form-check-label" for="checkSyarat">
46 Saya setuju dengan syarat dan ketentuan
47 </label>
48 </div>
49
50 <button type="submit" class="btn btn-primary mt-3">Daftar</button>
51
52 </form>
Terdapat 3 row dalam kode di atas, yakni di baris 3 – 15 yang berisi inputan nama dan
password, baris 17 – 41 yang berisi tiga buah tag <select>, serta di baris 43 – 48 yang berisi
347
Form Styling
checkbox. Dengan menempatkan inputan form dalam grid seperti ini, kita bisa mengatur
tampilan form dengan lebih rapi.
Horizontal Form
Dalam contoh sebelumnya, posisi tampilan tag <input> selalu berada di bawah tag <label>.
Bagaimana jika kita ingin membuat inputan form yang tampil bersebelahan dengan teks label
secara horizontal (bukan di bawahnya)?
Berikut tampilan yang dimaksud:
Tampilan inputan form dan teks label secara horizontal
Sekilas, bisa di tebak kalau tampilan ini saya buat menggunakan grid system, dimana kolom
kiri untuk teks label dan kolom kanan untuk inputan form. Memang benar, tapi ada sedikit
kendala di pengaturan margin dan padding tag <label> agar pas di tengah inputan form.
Untuk mengatasi hal ini, Bootstrap menyediakan class .col-form-label. Selain itu kita perlu
memodifikasi penempatan class .row dan .col. Berikut kode program yang saya pakai:
13.form_grid_horizontal.html
1 <form>
2
4 <label class="col-sm-2 col-form-label" for="inputNama">Nama </label>
8 </div>
9 </div>
10
12 <label class="col-sm-2 col-form-label" for="inputPassword">Password </label>
16 </div>
348
Form Styling
17 </div>
18
20 <div class="col-sm-2">Syarat</div>
23 <input class="form-check-input" type="checkbox" id="checkSyarat">
25 Saya setuju
26 </label>
27 </div>
28 </div>
29 </div>
30
31 <button type="submit" class="btn btn-primary mt-3">Sign in</button>
32
33 </form>
Setiap pasangan tag <label> dan <input> berada di dalam 1 baris row, yakni baris 3-9, 11 – 17,
dan 19-29.
Kemudian saya menambah class .col-sm-2 dan .col-form-label ke dalam tag <label> (baris
4 dan 12). Class .col-sm-2 dipakai agar tag <label> mengambil tempat selebar 2 segmen pada
breakpoint small ke atas. Kemudian tag .col-form-label berfungsi untuk mengatur padding
dan margin agar pas dengan tag <input>.
Tag <input> sendiri berada di dalam container tag <div class="col-sm-10"> (baris 5 dan 13).
Artinya, tag <input> akan memakai 10 segmen pada breakpoint small ke atas.
Dengan pembagian tag <label> sebesar 2 segmen dan tag <input> sebesar 10 segmen seperti
ini, totalnya pas 12 segmen.
Untuk checkbox (baris 19 - 29), penempatan classnya sedikit berbeda karena tag <label>
harus berada setelah tag <input type="checkbox"> .
Horizontal Form Label Size

Untuk form yang ditempatkan secara horizontal, terdapat class khusus . col-form-label-sm
dan .col-form-label-lg untuk mengatur agar ukuran tag <label> sama dengan tag <input>:
14.form_label_size.html
1 <form>
2
4 <label class="col-sm-2 col-form-label col-form-label-sm" for="input1">
5 Small
6 </label>
8 <input type="text" class="form-control form-control-sm" id="input1"
9 placeholder="Small">
10 </div>
349
Form Styling
11 </div>
12
14 <label class="col-sm-2 col-form-label" for="input2">
15 Regular
16 </label>
18 <input type="text" class="form-control" id="input2"
19 placeholder="Regular">
20 </div>
21 </div>
22
24 <label class="col-sm-2 col-form-label col-form-label-lg" for="input3">
25 Large
26 </label>
28 <input type="text" class="form-control form-control-lg" id="input3"
29 placeholder="Large">
30 </div>
31 </div>
32
33 </form>
Tampilan berbagai ukuran label dan inputan form (small, regular, large)
Di sini terdapat 3 pasangan tag <label> dan <input>. Jika tag <label> menggunakan class
.col-form-label-sm (baris 4), maka itu akan berpasangan dengan .form-control-sm (baris 8).
Begitu juga dengan class .col-form-label-lg (baris 24), yang berpasangan dengan .form-
control-lg (baris 28).
Tanpa kedua class ini, tag <label> dan <input> tampil sesuai ukuran normal (baris 14 dan 18).
Form Inline
Membuat form yang tampil secara vertikal sudah, secara horizontal juga sudah. Sekarang
bagaimana membuat form yang inline? Yakni seluruh label dan inputan form memanjang ke
samping?
Kita kembali memanfaatkan grid system. Idenya adalah, gunakan class .row-cols-auto:
350
Form Styling
15.form_inline_label.html
1 <form>
2
3 <div class="row row-cols-auto g-3">
4 <label for="inputNama" class="col col-form-label">Nama: </label>
5 <div class="col">
8 </div>
9 <label for="inputPassword" class="col-form-label">Password: </label>
13 </div>
15 <button type="submit" class="btn btn-primary">Sign in</button>
16 </div>
17 </div>
18
19 </form>
Tampilan inline form Bootstrap
Di baris 3, container tag <div> memiliki class .row-cols-auto. Dengan ini, setiap class .col
nantinya akan mengambil tempat sesuai lebar konten yang ada. Tambahan class .g-3
membuat jarak antar kolom menjadi lebih dekat dengan gutter level 3.
Tag <label> di baris 4 dan dan 9 memiliki class .col, sehingga akan menjadi satu kolom
tersendiri. Sedangkan untuk tag <input> dan juga tag <button>, berada dalam <div
class="col">.
Ketika membuat inline form, perlu diperhatikan bagaimana tampilan form untuk layar kecil.
Setiap inputan form harus di susun ulang agar tidak berantakan di breakpoint small dan extra-
small.
Sebagai alternatif tampilan, untuk form sederhana kita tidak perlu membuat label, cukup tulis
keterangan input ke dalam atribut placeholder:
16.form_inline.html
1 <form>
2
3 <div class="row row-cols-auto g-3">
4 <div class="col">
351
Form Styling

7 </div>
8 <div class="col">
11 </div>
13 <button type="submit" class="btn btn-primary">Sign in</button>
14 </div>
15 </div>
16
17 </form>
Tampilan inline form minimalis tanpa label
Jadi sebaiknya menggunakan label atau tidak? Pertanyaan ini lebih ke keputusan user
experience dan tergantung design akhir website. Sebagai pembanding, form pendaftaran
facebook menggabungkan keduanya (hanya memakai label untuk inputan tertentu saja):
Tampilan form pendaftaran facebook
Tipsnya adalah, jika inputan form tidak terlalu banyak, boleh tanpa label. Tapi jika form cukup
panjang, sebaiknya tetap gunakan label. Khusus untuk inputan checkbox dan radio, harus
352
Form Styling
selalu memakai label.
Form Help Text

Bootstrap menyediakan class .form-text yang ditujukan untuk membuat teks keterangan,
misalnya bagaimana cara mengisi inputan form. Berikut contoh penggunaannya:
17.form_help_text.html
1 <form>
2
3 <label for="inputPassword" class="form-label"> Password </label>
4 <input type="password" id="inputPassword" class="form-control">
5 <div class="form-text">
6 Password minimal 6 karakter alfanumerik (huruf dan angka),
7 tidak mengandung spasi atau karakter khusus
8 </div>
9
10 </form>
Tampilan teks keterangan form dengan class .form-text
Teks penjelasan saya tulis dengan tag <div class="form-text"> (baris 5). Tidak harus tag
<div>, class .form-text juga bisa ditempatkan ke tag lain seperti <span> atau <small>.
10.9. Floating Labels

Floating labels merupakan fitur baru di Bootstrap 5. Dengan ini, lokasi label ada di dalam isian
form dan bergeser ketika kita mulai mengisi nilai. Efek seperti ini cukup sering ditemukan
pada design web modern.
18.form_floating_label.html
1 <form>
2
3 <div class="form-floating">
6 <label for="inputNama">Nama Lengkap</label>
7 </div>
8 <div class="form-floating mt-3">
353
Form Styling

12 </div>
13
14 </form>
Tampilan floating labels
Di sini saya membuat 2 inputan. Begitu kita mulai mengisi nilai nama atau password, label
"Nama Lengkap" dan "Password" akan mengecil dan pindah ke sisi atas.
Untuk membuatnya, tempatkan pasangan tag <input> dan <label> ke dalam class .form-
floating. Syarat lain, posisi tag <label> harus ditulis setelah tag <input>, kemudian di dalam
tag <input> harus ada atribut placeholder meskipun nilainya tidak akan dipakai Bootstrap.
Floating labels juga bisa ditempatkan ke <textarea> dan juga <select>:
19.form_floating_text_area.html
1 <form>
2
3 <div class="form-floating ">
4 <textarea class="form-control" id="inputAlamat"
5 placeholder="Alamat" style="height: 100px"></textarea>
6 <label for="inputAlamat">Alamat</label>
7 </div>
8 <div class="form-floating mt-3">
14 </select>
354
Form Styling
16 </div>
17
18 </form>
Floating labels untuk <textarea> dan <select>
Cara pembuatannya juga sama seperti tag <input> biasa, cukup tempatkan pasangan label ke
dalam class .form-floating.
Supaya lebih ringkas, floating labels tetap bisa ditulis ke dalam grid system:
20.form_floating_grid.html
1 <form>
2
3 <div class="row">
4
5 <div class="col">
7 <textarea class="form-control" id="inputAlamat"
8 placeholder="Alamat" style="height: 60px"></textarea>
9 <label for="inputAlamat">Alamat</label>
10 </div>
11 </div>
12
20 </select>
22 </div>
23 </div>
24
25 </div>
26
27 </form>
355
Form Styling
Floating labels di dalam grid system Bootstrap
Kali ini setiap floating labels ada di dalam tag <div class="col">, yang pada gilirannya berada
dalam container <div class="row">. Hasilnya, kedua inputan akan dibagi sama besar di sisi
kiri dan kanan.
10.10. Form Validation

Form validation adalah cara untuk memeriksa apakah inputan form sudah diisi user dengan
data yang benar. "Benar" di sini tergantung syarat yang kita buat sendiri, misalnya username
tidak boleh mengandung spasi, atau password minimal harus 8 karakter.
Pemeriksaan inputan form bukan bagian dari HTML maupun Bootstrap, tapi menjadi jatah
bahasa pemrograman seperti JavaScript atau PHP. Di sini kita hanya akan membahas efek
tampilan yang disediakan Bootstrap saat error terjadi validasi.
HTML5 menyediakan beberapa atribut validasi yang bisa kita pakai sebagai "trigger" untuk
menghasilkan form yang error. Contohnya atribut required yang akan error jika inputan form
tidak diisi. Berikut contoh penggunaannya:
21.form_validation_default.html
1 <form>
2
3 <div class="row">
4 <div class="col">
6 <input type="text" class="form-control" id="inputNama">
7 </div>
8
9 <div class="col">
10 <label for="inputUsername" class="form-label">Username</label>
11 <input type="text" class="form-control" id="inputUsername" required>
12 </div>
13
16 <input type="email" class="form-control" id="inputEmail" required>
17 </div>
18 </div>
356
Form Styling

22 <input class="form-check-input" type="checkbox" id="checkSyarat" required>
25 </label>
26 </div>
27 </div>
28 </div>
29
31 </form>
Tampilan form validation dari atribut required HTML5
Di sini saya menulis atribut required untuk 3 inputan: username (baris 11), email (baris 16) dan
syarat (baris 22). Ketika form langsung di submit tanpa mengisi apapun, border untuk ketiga
inputan akan menjadi merah.
Khusus untuk inputan username, memiliki border biru karena sedang mengalami event focus.
Silahkan klik selagi di luar form, maka border merah ini akan terlihat.
Hasil di atas hanya bisa didapat ketika di jalankan dari web browser Mozilla Firefox. Di
Google Chrome, warna border merah tidak akan tampil karena perbedaan perilaku error
validasi HTML5 di setiap web browser.
Sebagai alternatif, Bootstrap menyediakan class khusus untuk menampilkan pesan kesalahan.
Class yang dimaksud adalah .invalid-feedback dan .valid-feedback. Kita akan bahas dengan
tampilan berikut ini:
357
Form Styling
Tampilan form validation error yang dibuat dengan Bootstrap
Tampilan form validation success yang dibuat dengan Bootstrap
Perhatikan teks tambahan di bawah setiap inputan form. Pesan kesalahan inilah yang dibuat
dari class Bootstrap .invalid-feedback dan .valid-feedback.
Caranya, tempatkan kedua class setelah tag <input>. Jika proses validasi gagal, yang akan
tampil adalah teks di dalam class .invalid-feedback. Namun jika proses validasi berhasil, yang
tampil adalan teks di dalam class .valid-feedback.
Sebagai contoh, berikut potongan kode untuk membuat validasi username:
1 <div class="col">
4 <div class="valid-feedback">Username Ok!</div>
5 <div class="invalid-feedback">Silahkan isi username</div>
6 </div>
Di baris 4 terdapat class .valid-feedback yang berisi teks "Username Ok!", teks ini akan tampil
ketika isi username sudah sesuai dengan syarat validasi. Dalam hal ini syarat validasi yang saya
buat hanya berasal dari atribut required (akhir baris 3).
Kemudian di baris 5 terdapat class .invalid-feedback yang berisi teks "Silahkan isi
358
Form Styling
username", teks ini hanya akan tampil jika isi username tidak sesuai dengan syarat validasi.
Berikut kode program lengkap untuk membuat seluruh tampilan validasi sebelumnya:
22.form_validation_custom.html
2
3 <form class="needs-validation" novalidate>
4 <div class="row">
5 <div class="col">
7 <input type="text" class="form-control" id="inputNama" value="Anto">
8 <div class="valid-feedback">Nama Ok!</div>
9 </div>
10
14 <div class="valid-feedback">Username Ok!</div>
15 <div class="invalid-feedback">Silahkan isi username</div>
16 </div>
17
20 <input type="email" class="form-control" id="inputEmail" required>
21 <div class="valid-feedback">Email Ok!</div>
22 <div class="invalid-feedback">Silahkan isi email</div>
23 </div>
24 </div>
25
29 <input class="form-check-input" type="checkbox"
30 id="checkSyarat" required>
33 </label>
34 <div class="invalid-feedback">Harap centang syarat dan ketentuan</div>
35 </div>
36 </div>
37 </div>
38
40 </form>
41
42 </div>
43
45
46 <script>
47 // Example starter JavaScript for disabling form submissions if there are
48 // invalid fields
359
Form Styling
49 (function() {
50 'use strict';
51 window.addEventListener('load', function() {
52 // Fetch all the forms we want to apply custom Bootstrap validation styles
53 var forms = document.getElementsByClassName('needs-validation');
54 // Loop over them and prevent submission
55 var validation = Array.prototype.filter.call(forms, function(form) {
56 form.addEventListener('submit', function(event) {
57 if (form.checkValidity() === false) {
58 event.preventDefault();
59 event.stopPropagation();
60 }
61 form.classList.add('was-validated');
62 }, false);
63 });
64 }, false);
65 })();
66 </script>
Kode ini memang cukup panjang, dan perhatikan bagian akhir (baris 46 – 66) yang berisi kode
JavaScript. Kode ini diperlukan untuk mengganti proses validasi bawaan HTML5, yakni
menahan proses submit apabila masih ditemukan validasi yang gagal.
Di baris 3 terdapat class .needs-validation. Class ini nantinya dipakai untuk kode JavaScript
di baris ke 53 sebagai cara "menangkap" seluruh inputan form yang akan di validasi.
Masih di baris ke-3, ada tambahan atribut novalidate. Atribut novalidate merupakan atribut
HTML5 yang berfungsi untuk mematikan fungsi validasi bawaan. Jika atribut ini tidak ditulis,
kita tidak bisa membuat proses validasi sendiri.
Selanjutnya di setiap inputan form terdapat class .valid-feedback dan class .invalid-
feedback yang dipakai untuk menampilkan pesan kesalahan seperti yang sudah kita bahas.
10.11. Input Group

Input Group adalah komponen Bootstrap yang terdiri dari gabungan tag <input type="text">
dengan teks biasa atau berbagai komponen Bootstrap lain seperti Button dan Dropdown.
Komponen input group ini cukup menarik karena membuat tampilan textbox menjadi lebih
modern (tidak seperti textbox pada umumnya).
Untuk membuat input group, class yang diperlukan adalah .input-group. Class ini berfungsi
sebagai "container" yang di dalamnya terdapat tag <input type="text"> serta komponen lain.
23.input_group.html
1 <form>
2
3 <div class="input-group">
360
Form Styling
4 <span class="input-group-text">www.</span>
5 <input type="text" class="form-control" placeholder="nama_website">
6 </div>
7
8 <div class="input-group mt-4">
10 <span class="input-group-text">.com</span>
11 </div>
12
16 <span class="input-group-text">.com</span>
17 </div>
18
19 </form>
Tampilan komponen input group Bootstrap
Di sini saya membuat 3 buah class .input-group (baris 3-6, 8-11 dan 13-17). Ketiganya dibuat
dari gabungan tag <input> serta tag <span> yang memiliki class .input-group-text. Class
.input-group-text ini memberitahu Bootstrap bahwa kita ingin menggabung sebuah teks.
Di Bootstrap 4, terdapat class .prepend dan .append yang dipakai tergantung posisi
penambahan, yakni apakah sebelum atau sesudah tag <input>. Di Bootstrap 5, kedua
class ini tidak lagi diperlukan.
Input Group Label

Jika ingin menambahkan label keterangan, tempatkan tag <label> sebelum class .input-group
24.input_group_label.html
1 <label for="inputHargaBarang" class="form-label">Harga Barang</label>
3 <span class="input-group-text">Rp.</span>
361
Form Styling
4 <input type="text" class="form-control" id="inputHargaBarang"

5 placeholder="000000">
6 <span class="input-group-text">.00</span>
7 </div>
8
9 <br>
10
11 <label for="inputProfile" class="form-label">URL Facebook</label>
13 <span class="input-group-text">https://www.facebook.com/</span>
14 <input type="text" class="form-control" id="inputProfile"
15 placeholder="URL profile" >
16 </div>
Tampilan komponen input group dengan label
Fungsi tag <label> di sini sama seperti yang kita bahas pada komponen form Bootstrap, yakni
sebagai teks keterangan dari tag <input type="text">.
Input Group Size

Ukuran komponen input group juga bisa diatur. Sama seperti komponen Bootstrap lain,
terdapat 3 size: small (class .input-group-sm), regular (default), dan large (class .input-
group-lg):
25.input_group_size.html
2
3 <div class="input-group input-group-sm">
4 <span class="input-group-text">Small</span>
5 <input type="text" class="form-control">
6 </div>
7
9 <span class="input-group-text">Regular</span>
11 </div>
12
362
Form Styling
13 <div class="input-group input-group-lg mt-4">

14 <span class="input-group-text">Large</span>
16 </div>
17
18 </div>
Tampilan komponen input group dalam berbagai ukuran
Multiple Input Group

Komponen input group bisa menampung lebih dari 1 teks tambahan maupun lebih dari 1 tag
<input type="text"> . Berikut contoh kode untuk membuat input group dengan 3 teks:
26.input_group_multiple.html
1 <label for="inputProfile" class="form-label">URL Facebook</label>
3 <span class="input-group-text">https://</span>
5 <span class="input-group-text">facebook.com/</span>
6 <input type="text" class="form-control" id="inputProfile"
7 placeholder="URL profile" >
8 </div>
Tampilan komponen input group dengan 3 buah text prepend
Dalam contoh ini saya membuat 3 buah tag <span> di dalam class .input-group. Hasilnya,
komponen teks di input group terpecah menjadi 3 bagian.
363
Form Styling
Sebaliknya, kita juga bisa membuat input group dengan 3 buah tag <input type="text">:
27.input_group_multiple_input.html
2 <span class="input-group-text">Lokasi</span>
3 <input type="text" class="form-control" id="inputProvinsi"
4 placeholder="Provinsi" >
5 <input type="text" class="form-control" id="inputKota"
6 placeholder="Kabupaten / Kota" >
7 <input type="text" class="form-control" id="inputKec"
8 placeholder="Kecamatan" >
9 </div>
Tampilan komponen input group dengan 3 buah tag <input type="text">
Kali ini terdapat 3 kotak inputan untuk provinsi, kabupaten / kota, dan kecamatan. Gabungan
tag input ini tampak cukup menarik dan dari sisi pemrosesan di server nanti juga tidak ada
masalah karena setiap tag input diproses secara terpisah.
Input Group Radio dan Checkbox

Komponen yang bisa ditambah untuk input group tidak hanya teks saja, tapi juga checkbox
dan radio. Berikut cara pembuatannya:
28.input_group_checkbox_radio.html
1 <label class="form-label">Kirim Laporan</label>
3 <div class="input-group-text">
4 <input type="checkbox" id="checkEmail" class="form-check-input">
5 </div>
6 <label for="checkEmail" class="input-group-text">Kirim ke Email:</label>
7 <input type="email" class="form-control" placeholder="Alamat email...">
8 </div>
9
10 <br>
11
12 <label class="form-label">Pilih Jurusan</label>
15 <input type="radio" name="jurusan" id="jurusanIlkom" class="form-check-input">
16 </div>
17 <label class="input-group-text" for="jurusanIlkom">Ilmu Komputer</label>
18 <input type="text" class="form-control" placeholder="Nama Universitas...">
364
Form Styling
19 </div>
20
23 <input type="radio" name="jurusan" id="jurusanTI" class="form-check-input">
24 </div>
25 <label class="input-group-text" for="jurusanTI">Teknik Informatika</label>
27 </div>
28
31 <input type="radio" name="jurusan" id="jurusanSI" class="form-check-input">
32 </div>
33 <label class="input-group-text" for="jurusanSI">Sistem Informasi</label>
35 </div>
Tampilan komponen input group dengan checkbox dan radio
Kode yang diperlukan memang cukup panjang, tapi tidak ada sesuatu yang baru di sini.
Untuk menambah checkbox ke dalam input group, perlu ditulis ke dalam class .input-group-
text (baris 3-5). Untuk label dari checkbox, ditulis di luar itu namun masih di dalam class
.input-group (baris 6).
Hal yang sama juga dilakukan untuk membuat input group dengan radio (baris 12-35).
Input Group Button

Komponen selanjutnya yang bisa digabung ke dalam input group adalah button:
29.input_group_button.html
2 <button class="btn btn-outline-secondary" type="button">Button</button>
365
Form Styling
4 </div>
5
9 </div>
10
15 </div>
Tampilan komponen input group dengan button
Dalam contoh ini saya membuat 3 input group dengan berbagai variasi posisi tombol. Cara
pembuatannya kurang lebih sama seperti sebelumnya. Yang berbeda adalah kita menggunakan
tag <button> di dalam class .input-group.
Input Group Dropdown

Variasi lain dari input group adalah digabung dengan dropdown:
30.input_group_button_dropdown.html
3 data-bs-toggle="dropdown">Dropdown</button>
8 </div>
10 </div>
366
Form Styling
Tampilan komponen input group dengan dropdown
Input group dengan dropdown ini lebih pas jika nantinya akan diproses menggunakan
JavaScript. Misalnya jika user memilih salah satu menu dropdown, inputan textbox juga ikut
berubah.
Sebagai latihan, bisakah anda membuat gabungan input group dengan dropdown split?
Tampilan komponen input group dengan dropdown split
Hasil ini saya peroleh dari copy paste komponen dropdown split yang pernah kita bahas
beberapa bab sebelum ini, dan tinggal diinput ke dalam input group:
31.input_group_button_dropdown_split.html
2 <button type="button" class="btn btn-danger">Split Dropdown</button>
3 <button class="btn btn-danger dropdown-toggle dropdown-toggle-split"
6 </button>
11 </div>
13 </div>
367
Form Styling
---
Sepanjang bab ini kita telah membahas fitur Bootstrap untuk men-style tampilan form serta
input group. Selanjutnya akan disambung dengan materi tentang flex utility class.
------------------------------------------------------------------
=====================================================================
368
Flex Utilities
11. Flex Utilities
Di dalam CSS, flex atau flexbox adalah sebutan dari kumpulan property untuk mengatur
tampilan element dalam format 1 dimensi (baris saja, atau kolom saja). Fitur ini memang relatif
baru yang secara perlahan mulai banyak di adopsi kalangan web designer.
Bootstrap sendiri sudah menggunakan flexbox sebagai basis dari grid system sejak versi 4, dan
juga di Bootstrap 5. Sedangkan Bootstrap 3 ke bawah dulunya masih menggunakan property
float CSS untuk mengatur tampilan element.
Dalam bab ini kita akan bahas berbagai class bawaan Bootstrap untuk mempermudah
penggunaan CSS flexbox.
Agar bisa memahami bab ini dengan lebih mudah, idealnya sudah paham cara kerja CSS
Flexbox. Jika butuh panduan detail, di buku CSS Uncover terdapat 1 bab khusus yang
membahas tentang CSS3 FlexBox. Namun di sini saya tetap mencoba menyajikan sekilas
dasar-dasar dari flexbox.
11.1. Flex Container

Agar bisa menerapkan flexbox, sebuah element perlu diubah menjadi "flex element". Jika tidak,
semua property flexbox tidak akan berefek. Di dalam CSS, ini dibuat dengan cara menambah
property display:flexbox atau display:inline-block seperti contoh berikut:
1 <div style="display:flexbox">
2 ...
3 </div>
4
5 <div style="display:inline-flexbox">
6 ...
7 </div>
Bootstrap menyediakan class khusus untuk membuat kode yang mirip, yakni melalui class .d-
flex dan .d-inline-flex. Berikut contoh penggunaannya:
01.flex_container.html
1 <div class="p-2 mb-3 bg-dark text-white">
2 <div class="p-3 bg-primary">Box 1</div>
3 <div class="p-3 bg-danger">Box 2</div>
369
Flex Utilities
4 <div class="p-3 bg-success">Box 3</div>

5 </div>
6
7 <div class="p-2 mb-3 bg-dark text-white d-flex">
11 </div>
12
13 <div class="p-2 mb-3 bg-dark text-white d-inline-flex">
17 </div>
Tampilan element normal (atas), flexbox (tengah), inline-flexbox (bawah)
Di sini saya membuat 3 buah kelompok box dengan memanfaatkan berbagai utility class
bawaan Bootstrap. Misalnya class .p-2 untuk membuat padding level 2, class .mb-3 untuk
margin bottom level 3, class .bg-dark untuk membuat warna background putih, serta class
.text-white untuk mengubah warna teks menjadi putih.
Kelompok box pertama (baris 1 - 5) adalah tampilan normal element HTML tanpa flexbox.
Setiap box berada di baris terpisah dan memanjang selebar parent element karena tag <div>
adalah block level element.
Kode untuk kelompok box kedua (baris 7 - 11) nyaris sama seperti kelompok box pertama.
Bedanya, ada tambahan class .d-flex di baris 7. Akibatnya, seluruh element yang ada di
dalamnya akan berperilaku khusus sesuai aturan CSS flexbox.
Efek yang langsung terlihat adalah, ketiga box mengecil sesuai lebar teks meskipun masih ada
ruang di sisi kanan parent element.
370
Flex Utilities
Kelompok box ketiga (baris 13 – 17) memiliki tambahan class .d-inline-flex di akhir baris 13.
Class ini juga dipakai untuk mengaktifkan flex element. Hanya saja, parent element akan
menjadi inline level element sehingga tidak terlihat ada ruang kosong di sisi kanan.
Secara teknis, class .d-flex dan .d-inline-flex dipakai untuk membuat flex container,
yakni container yang isinya menerapkan aturan CSS flexbox. Setiap element di dalam
flex container disebut sebagai flex item.
Flex Container Breakpoint

Bootstrap adalah framework CSS dengan efek responsive bawaan, karena itulah hampir semua
utility class Bootstrap memiliki variasi breakpoint. Untuk flex container, kita bisa mengatur
agar parent element bisa menjadi flex container hanya ketika masuk ke breakpoint tertentu.
Aturan dasar cara penulisan kode breakpoint adalah: d-<kode_breakpoint>-<jenis_display> .

Sehingga untuk class flex dan inline-flex terdapat 6 class untuk setiap jenis flex :
 .d-flex, .d-sm-flex, .d-ms-flex, .d-lg-flex, .d-xl-flex, .d-xxl-flex
 .d-inline-flex, .d-sm-inline-flex, .d-ms-inline-flex, .d-lg-inline-flex, .d-xl-

inline-flex, .d-xxl-inline-flex
Penulisan ini sama dengan utility class display Bootstrap lain yang pernah kita bahas seperti
.d-block, .d-sm-block, atau .d-md-inline-block. Berikut contoh penggunaannya:
02.flex_container_breakpoint.html
1 <div class="p-2 bg-dark text-white d-block d-sm-inline-flex d-md-flex">
5 </div>
Tampilan flex container dalam berbagai breakpoint
371
Flex Utilities
Di baris 1 terdapat 3 class: .d-block, .d-sm-inline-flex dan .d-md-flex. Artinya, ketika

masuk ke breakpoint extra-small, container akan menjadi display block biasa (efek dari .d-
block). Ketika masuk ke breakpoint small, akan berubah menjadi inline-flex (efek dari .d-sm-
inline-flex). Begitu masuk ke breakpoint middle dan ke atas, akan berubah menjadi flex (efek
dari .d-md-flex).
Flex container harus selalu ditulis agar kita bisa menggunakan flex utilities class sepanjang bab
ini.
11.2. Flex Direction

Flex direction adalah class Bootstrap untuk mengatur urutan flex item, sekaligus menentukan
main axis atau sumbu utama flexbox. Konsep tentang sumbu utama (main axis) dan sumbu
silang (cross axis) memang cukup membingungkan, terutama bagi yang baru mempelajari
flexbox.
Di dalam flexbox, kita harus menentukan apa yang jadi arah sumbu utama, apakah secara
horizontal (sumbu x), atau vertikal (sumbu y).
Jika sumbu x dipilih sebagai sumbu utama atau main axis, maka otomatis sumbu y menjadi
cross axis. Begitu juga sebaliknya, jika sumbu y dipilih sebagai main axis, maka sumbu x akan
menjadi cross axis.
Arah sumbu x berarti mengurutkan flex item dari kiri ke kanan atau kanan ke kiri (dalam satu
baris / row). Sedangkan arah sumbu y berarti kita mengurutkan flex item dari atas ke bawah
atau bawah ke atas (dalam satu kolom / column). Karena itulah class flex direction bawaan
Bootstrap hadir dalam 2 variasi, yakni flex-row dan flex-column.
Flex Direction Row

Flex direction row dipakai untuk menetapkan sumbu x sebagai main axis dari flex container.
Terdapat 2 class yang tersedia, yakni .flex-row dan .flex-row-reverse. Berikut contoh
penggunaannya:
03.flex_direction_row.html
1 <div class="p-2 mb-3 bg-dark text-white d-flex flex-row">
5 </div>
6
7 <div class="p-2 bg-dark text-white d-flex flex-row-reverse">
11 </div>
372
Flex Utilities
Tampilan dari 2 jenis flex direction
Kelompok box pertama (atas), menggunakan class .flex-row di baris 1. Hasilnya seolah-olah
tidak ada perubahan dari contoh kita sebelumnya. Ini karena secara default, flex item di dalam
flex container akan berjejer dari kiri ke kanan, atau dengan kata lain class .flex-row sudah
otomatis dipakai.
Kelompok box kedua (bawah), menggunakan class .flex-row-reverse di baris 7. Hasilnya,

urutan box mulai dari kanan terlebih dahulu baru ke kiri. Perhatikan urutan Box juga berubah
dimana Box 1 berada paling kanan, kemudian diikuti Box 2, dan terakhir Box 3 di sisi kiri.
Flex Direction Column

Flex direction column dipakai untuk menetapkan sumbu y sebagai main axis dari flex
container. Terdapat 2 class yang tersedia, yakni .flex-column dan .flex-column-reverse.
04.flex_direction_column.html
1 <div class="p-2 mb-3 bg-dark text-white d-flex">
5 </div>
6
7 <div class="p-2 mb-3 bg-dark text-white d-flex flex-column">
11 </div>
12
13 <div class="p-2 bg-dark text-white d-flex flex-column-reverse">
17 </div>
373
Flex Utilities
Tampilan dari flex direction column
Pada kode ini terdapat 3 kelompok box. Kelompok box pertama (paling atas) hanya
menggunakan class .d-flex untuk membuat flexbox container tanpa tambahan class lain.
Kelompok box kedua (tengah) menggunakan class .flex-column. Hasilnya, seluruh box di
dalam flex container tersusun dari atas ke bawah, dan setiap flex item juga memanjang
memenuhi flex container.
Kelompok box ketiga (paling bawah) menggunakan class .flex-column-reverse. Kali ini
urutan flex item terbalik dari bawah ke atas, dimana Box 1 berada di posisi paling bawah,
diikuti Box 2 dan Box 3 di urutan paling atas.
Flex Direction Breakpoint

Flex direction juga hadir dalam bentuk breakpoint, yakni dengan format:
flex-<kode_breakpoint>-<row|row-reverse|column|column-reserve>
Berikut contoh penerapannya:
05.flex_direction_breakpoint.html
1 <div class="p-2 bg-dark text-white d-flex flex-sm-row-reverse flex-md-row">
5 </div>
374
Flex Utilities
Tampilan dari flex direction breakpoint
Di baris 1 terdapat penggunaan class .flex-sm-row-reverse dan .flex-md-row. Artinya, ketika

masuk ke breakpoint medium, flex item di urutkan dari kiri ke kanan (berlaku efek .flex-row).
Ketika masuk ke breakpoint small, flex item di urutkan dari kanan ke kiri (berlaku efek .flex-
row-reverse). Lalu ketika masuk ke breakpoint extra-small, flex item kembali di urutkan dari
kiri ke kanan karena inilah efek default bawaan flexbox (berlaku efek .flex-row).
11.3. Flex Justify Content

Flex justify content adalah class flexbox yang mengatur seperti apa "penyebaran" flex item
pada main axis. Terdapat 6 variasi class yang bisa disediakan Bootstrap, yakni:
 .justify-content-start
 .justify-content-end
 .justify-content-center
 .justify-content-between
 .justify-content-around
 .justify-content-evenly
06.flex_justify_content_row.html
1 <style>
2 .d-flex{
3 background-color:lightgray;
4 color: white;
5 margin-bottom: 0.8rem;
6 padding: 0.5rem;
7 }
8 </style>
1 <div class="d-flex flex-row justify-content-start">

375
Flex Utilities
5 </div>
6
7 <div class="d-flex flex-row justify-content-end">
11 </div>
12
13 <div class="d-flex flex-row justify-content-center">
14 ...
15 </div>
16
17 <div class="d-flex flex-row justify-content-between">
18 ...
19 </div>
20
21 <div class="d-flex flex-row justify-content-around">
22 ...
23 </div>
24
25 <div class="d-flex flex-row justify-content-evenly">
26 ...
27 </div>
Tampilan 6 variasi class justify content untuk sumbu x (row)
Kali ini saya memakai sedikit tambahan kode CSS agar class di flex container tidak terlalu
panjang. Kode CSS di bagian atas ini akan menggantikan class .p-2, .mb-3, .text-white serta
mengatur warna background abu-abu (lightgray).
Masuk ke struktur HTML, selain memiliki class .d-flex, setiap flex container juga
menggunakan class .flex-row sehingga main axis dari flex container ada di sumbu x. Dengan
376
Flex Utilities
demikian semua class justify content akan berpengaruh di sumbu x ini.
Kelompok box pertama menggunakan class .justify-content-start . Ini akan membuat

seluruh flex item berada di sisi awal (kiri) flex container. Efek dari .justify-content-start
menjadi nilai default jika class ini tidak ditulis.
Kelompok box kedua menggunakan class .justify-content-end. Efeknya, seluruh flex item
berada di sisi akhir (kanan) flex container.
Kelompok box ketiga menggunakan class .justify-content-center . Efeknya, seluruh flex item
berada di tengah flex container.
Kelompok box keempat menggunakan class .justify-content-between. Ini akan mendorong

flex item pertama ke bagian awal, flex item terakhir ke bagian ujung, serta mengatur element
lain diantaranya.
Kelompok box kelima menggunakan class .justify-content-around. Ini akan membagi spasi
kosong sama besar untuk sisi kiri dan kanan setiap flex item. Perhatikan bahwa jarak spasi
antara Box 1 dan Box 2 dua kali lebih besar daripada spasi di sisi kiri Box 1.
Kelompok box keenam menggunakan class .justify-content-evenly. Ini akan membagi spasi
sama besar antar setiap flex item, termasuk dengan sisi dalam flex container. Sekarang ruang
spasi antara Box 1 dan Box 2 sama besar dengan spasi di sisi kiri Box 1.
Konsep kata "start" dan "end" dalam penamaan flexbox mirip seperti istilah yang dipakai
oleh Bootstrap 5. Kata "start" ada di sisi kiri ketika kita menggunakan bahasa LTR (left to
right), dan akan menjadi sisi kanan untuk bahasa RTL (right to left).
Bahasa indonesia dan bahasa inggris menggunakan konsep LTR, maka "start" ini akan
selalu ada di sisi kiri. Namun karena flexbox juga bisa dipakai untuk mengatur sumbu y,
maka "start" dan "end" juga bisa merujuk ke sisi atas dan sisi bawah.
Contoh sebelum ini adalah penerapan justify content di sumbu x. Jika kita mengubah class
.flex-row di dalam flex container menjadi .flex-column, maka main axis akan berubah ke
sumbu y. Akibatnya semua class justify content akan berpengaruh di sumbu y ini.
Berikut contoh prakteknya:
07.flex_justify_content_column.html
1 <style>
2 .d-flex{
4 color: white;
6 padding: 0.5rem;
7 height: 200px;
8 }
377
Flex Utilities
9 </style>
1 <div class="d-flex flex-column justify-content-start">

5 </div>
6
7 <div class="d-flex flex-column justify-content-end">
11 </div>
12
13 <div class="d-flex flex-column justify-content-center">
14 ...
15 </div>
16
17 <div class="d-flex flex-column justify-content-between">
18 ...
19 </div>
20
21 <div class="d-flex flex-column justify-content-around">
22 ...
23 </div>
24
25 <div class="d-flex flex-column justify-content-evenly">
26 ...
27 </div>
Kode ini sangat mirip seperti contoh sebelumnya, hanya saja sekarang tinggi flex container
saya set menjadi 200px (dari kode CSS), dan class .flex-row diubah menjadi .flex-column.
Hasilnya cukup drastis karena main axis flex container sekarang ada di sumbu y. Semua class
justify content akan mengatur urutan flex item dari atas ke bawah, bukan lagi dari kiri ke
kanan.
Berikut tampilan dari kode di atas :
378
Flex Utilities
Tampilan variasi class justify content untuk sumbu y (column)
Hasil dari class .justify-content-start, .justify-content-end, dan .justify-content-

center mirip seperti sebelumnya, hanya saja sekarang "start" yang dimaksud ada di sisi atas,
dan "end" ada di sisi bawah.
Untuk class .justify-content-between, .justify-content-arround, dan .justify-content-

evenly perbedaannya tidak terlalu terlihat karena keterbatasan tinggi flex container. Namun
fungsinya sama seperti contoh pada sumbu x. Misal, class .justify-content-evenly akan
membagi spasi sama besar untuk sisi atas dan bawah flex item.
Flex Justify Content Breakpoint

Flex justify content juga hadir dengan variasi breakpoint dengan format sebagai berikut:
justify-content-<kode_breakpoint>-<start|end|center|between|around|evenly>
08.flex_justify_content_breakpoint.html
1 <div class="p-2 bg-dark text-white d-flex
2 justify-content-sm-around justify-content-md-center justify-content-lg-end">
379
Flex Utilities

6 </div>
Tampilan class justify content dengan variasi breakpoint
Di sini saya menggunakan variasi class .justify-content-sm-around , .justify-content-md-

center, dan class .justify-content-lg-end (baris 2).
Maka ketika masuk ke breakpoint large, semua flex item berada di sisi kanan (berlaku efek
.justify-content-end). Ketika masuk ke breakpoint medium, semua flex item berada di
tengah (berlaku efek .justify-content-center ). Ketika masuk ke breakpoint small, flex item
akan di sebar merata (berlaku efek .justify-content-around).
Lalu ketika masuk ke breakpoint extra-small, flex item berada di sisi kiri. Ini karena di
breakpoint extra-small tidak terdapat class flex justify content apapun, sehingga tampilannya
kembali ke default (sama dengan efek dari class .justify-content-start ).
Dalam contoh ini tidak ada class .flex-row maupun .flex-column di dalam flex
container. Jadi kenapa efek class justify content berefek di sumbu x dan bukan sumbu y?
Ini karena secara default sebuah flex container memakai sumbu x sebagai main axis.
Dengan demikian dalam kebanyakan kasus, class .flex-row tidak perlu ditulis apabila
kita ingin sumbu x sebagai main axis flex container.
11.4. Flex Align Items

Flex align items adalah class flexbox Bootstrap untuk mengatur posisi element di cross axis
atau sumbu yang bersilangan.
Maksudnya, jika main axis flex container di set di sumbu x, maka flex align items akan berefek
380
Flex Utilities
di sumbu y, dan begitu juga jika main axis di set di sumbu y, maka flex align items akan berefek
di sumbu x. Penjelasan ini akan lebih mudah saat kita masuk ke contoh praktek sesaat lagi.
Terdapat 5 variasi class untuk flex align items Bootstrap, yakni:

 .align-items-start
 .align-items-end
 .align-items-center
 .align-items-baseline
 .align-items-stretch
Kita akan lihat praktek main axis di sumbu x terlebih dahulu:
09.flex_align_items_row.html
1 <style>
2 .d-flex{
4 color: white;
6 padding: 0.5rem;
7 height: 90px;
8 }
9 </style>
1 <div class="d-flex flex-row justify-content-end align-items-start">

5 </div>
6
7 <div class="d-flex flex-row justify-content-end align-items-end">
8 ...
9 </div>
10
11 <div class="d-flex flex-row justify-content-end align-items-center">
12 ...
13 </div>
14
15 <div class="d-flex flex-row justify-content-end align-items-baseline">
16 ...
17 </div>
18
19 <div class="d-flex flex-row justify-content-end align-items-stretch">
20 ...
21 </div>
Di setiap flex container terdapat 3 class awal yang sama, yaitu .d-flex, .flex-row, dan
.justify-content-end. Ketiga class ini sudah kita bahas sebelumnya.
Class .d-flex dipakai untuk membuat flex container. Ini adalah class wajib yang harus ditulis.
Selanjutnya, class .flex-row berarti kita men-set main axis di sumbu x, maka class .justify-
381
Flex Utilities
content-end akan menempatkan semua flex item di sisi kanan (akhir). Ingat, class justify
content dipakai untuk mengatur posisi flex item di main axis.
Yang berbeda dari setiap flex container ada di class terakhir, yakni class align items yang akan
mengatur flex item di cross axis. Berikut hasil tampilan kode di atas:
Tampilan 5 variasi class flex align items
Semua flex item terdorong ke sisi kanan sebagai hasil dari class .flex-row, dan .justify-
content-end. Variasi class align items lah yang akan mengatur posisi flex item di sisi atas dan
sisi bawah.
Kelompok box pertama (paling atas) menggunakan class .align-items-start. Hasilnya,

seluruh flex item ada di sisi atas.
Kelompok box kedua menggunakan class .align-items-end. Maka seluruh flex item berada di
sisi bawah.
Kelompok box ketiga menggunakan class .align-items-center. Seperti yang bisa di tebak,
seluruh flex item berada di sisi tengah.
Kelompok box keempat menggunakan class .align-items-baseline. Terlihat hasilnya tidak

berbeda dengan .align-items-start, tapi sebenarnya setiap flex item diatur berdasarkan
posisi teks (baseline). Kebetulan dalam kode ini setiap box memiliki tinggi teks yang sama
382
Flex Utilities
sehingga tampak tidak ada perbedaan.
Kelompok box kelima (paling bawah) menggunakan class .align-items-stretch. Hasilnya,

seluruh flex item akan "dipaksa" memenuhi tinggi flex container. Ini adalah efek default jika
tinggi flex container di set secara manual.
Loh, kalau .align-items-stretch adalah class default, kenapa kita tidak melihat hasil ini
sebelumnya?
Itu karena dalam contoh praktek sejak awal bab, saya tidak mengatur tinggi dari flex
container. Jika flex container memiliki tinggi yang tetap, maka semua flex item secara default
akan melebar secara vertikal.
Sekarang kita akan lihat hasil praktek jika main axis flex container ada di sumbu y:
10.flex_align_items_column.html
1 <style>
2 .d-flex{
4 color: white;
6 padding: 0.5rem;
7 height: 180px;
8 }
9 </style>
10
11 <div class="d-flex flex-column justify-content-end align-items-start">
15 </div>
16
17 <div class="d-flex flex-column justify-content-end align-items-end">
18 ...
19 </div>
20
21 <div class="d-flex flex-column justify-content-end align-items-center">
22 ...
23 </div>
24
25 <div class="d-flex flex-column justify-content-end align-items-baseline">
26 ...
27 </div>
28
29 <div class="d-flex flex-column justify-content-end align-items-stretch">
30 ...
31 </div>
Kali flex container memiliki class .flex-column, sehingga main axis ada di sumbu y (atas-
bawah), dengan demikian class align-items akan beroperasi di sumbu x (arah kiri-kanan).
Berikut hasilnya:
383
Flex Utilities
Hasil class flex align items di sumbu x
Flex Align Items Breakpoint

Flex align items hadir dengan variasi breakpoint dengan format sebagai berikut:
align-items-<kode_breakpoint>-<start|end|center|baseline|stretch>
11.flex_align_items_breakpoint.html
1 <div style="height: 150px;" class="p-2 bg-dark text-white
2 d-flex align-items-sm-baseline align-items-md-end">
6 </div>
384
Flex Utilities
Tampilan flex align items dalam 3 breakpoint
Di sini saya menggunakan 2 variasi breakpoint, yakni class .align-items-sm-baseline dan

.align-items-md-end (baris 2). Selain itu padding dari setiap box juga di ubah agar bervariasi.
Box 1 menggunakan padding level 3 (class .p3), Box 2 padding level 2 (class .p2), dan Box 3
padding level 4 (class .p4).
Ketika masuk ke breakpoint medium (bawah), class .align-items-md-end akan aktif. Hasilnya
seluruh flex item berada di bagian bawah flex container. Perhatikan posisi teks di setiap Box
yang tidak sama akibat perbedaan class padding.
Pada saat masuk ke breakpoint small (kanan atas), class .align-items-sm-baseline akan aktif.
Baseline adalah garis dasar setiap teks, maka semua teks akan ada dalam garis yang sama.
Kemudian pada saat masuk ke breakpoint extra-small (kiri atas), tidak ada class align items
yang ditulis. Karena itu yang akan aktif adalah class .align-items-stretch sebagai class
default. Hasilnya, semua flex item melebar memenuhi tinggi flex container.
11.5. Flex Align Self

Flex align self sangat mirip seperti align items yang baru saja kita bahas. Bedanya, class ini
dipakai untuk mengatur flex item secara individu, bukan keseluruhan seperti align items.
Terdapat 5 jenis variasi class untuk flex align self:

 .align-self-start
 .align-self-end
 .align-self-center
 .align-self-baseline
 .align-self-stretch
385
Flex Utilities
21.flex_align_self.html
1 <div style="height: 200px;" class="p-2 bg-dark text-white d-flex">
2 <div class="p-3 bg-primary align-self-start">Box 1</div>
3 <div class="p-3 bg-danger align-self-center">Box 2</div>
4 <div class="p-3 bg-success align-self-end">Box 3</div>
5 <div class="p-3 bg-secondary align-self-baseline">Box 4</div>
6 <div class="p-3 bg-info align-self-stretch">Box 5</div>
7 </div>
Tampilan 5 variasi flex align self
Efek dari setiap class sama seperti align items, sehingga tidak perlu kita bahas lagi.
Dalam contoh ini class align self berefek di sumbu y (atas-bawah). Alasannya karena
secara default main axis flex container ada di sumbu x (kiri-kanan).
Flex Align Self Breakpoint

Juga sama seperti class align items, class align self punya variasi breakpoint dengan format:
align-self-<kode_breakpoint>-<start|end|center|baseline|stretch>
Berikut contoh prakteknya:
22.flex_align_self_breakpoint.html
1 <div style="height: 100px;" class="p-2 bg-dark text-white d-flex">
2 <div class="p-3 bg-primary align-self-sm-start align-self-md-end">Box 1</div>
3 <div class="p-3 bg-danger align-self-sm-center align-self-md-center">
4 Box 2</div>
5 <div class="p-3 bg-success align-self-sm-end align-self-md-start">Box 3</div>
6 </div>
386
Flex Utilities
Tampilan flex align self dalam 3 breakpoint
Saya yakin anda sudah bisa membaca maksud dari kode ini karena sangat mirip seperti contoh
pada align items, hanya saja sekarang beroperasi di setiap flex item secara individu.
11.6. Flex Fill

Flex fill adalah class untuk membuat flex item melebar pada main axis untuk memenuhi ruang
yang masih tersedia. Untuk membuatnya tambahkan class .flex-fill seperti contoh berikut:
14.flex_fill.html
2 <div class="p-3 bg-primary flex-fill">Box 1</div>
5 </div>
6
7 <div class="p-2 mb-3 bg-dark text-white d-flex flex-row"">
9 <div class="p-3 bg-danger flex-fill">Box 2</div>
11 </div>
12
13 <div class="p-2 mb-3 bg-dark text-white d-flex flex-row"">
15 <div class="p-3 bg-danger flex-fill">Box 2</div>
16 <div class="p-3 bg-success flex-fill">Box 3</div>
17 </div>
387
Flex Utilities
Tampilan flex fill
Class .d-flex dan .flex-row akan menetapkan sumbu x sebagai main axis, sehingga flex fill akan
berpengaruh di sumbu x (kiri-kanan)
Kelompok box pertama memiliki class .flex-fill untuk Box 1. Hasilnya, Box 1 akan melebar
ke samping mengambil seluruh tempat yang masih kosong. Efek ini mirip seperti class .col
milik Bootstrap grid system.
Kelompok box kedua memiliki class .flex-fill di Box 1 dan Box 2. Hasilnya, Box 1 dan Box 2
akan berbagi tempat sesuai dengan ruang yang masih kosong.
Dan untuk kelompok box ketika, class .flex-fill ada di ketiga Box. Hasilnya, Box 1, Box 2 dan
Box 3 akan berbagi tempat sama besar.
Flex Fill Breakpoint

Untuk variasi breakpoint, class flex fill menggunakan format .flex-<kode_breakpoint>-fill.
15.flex_fill_breakpoint.html
1 <div style="height: 300px;" class="p-2 bg-dark text-white d-flex flex-column">
3 <div class="p-3 bg-danger flex-sm-fill">Box 2</div>
4 <div class="p-3 bg-success flex-md-fill">Box 3</div>
5 </div>
388
Flex Utilities
Tampilan flex fill dalam 3 breakpoint
Kali ini main axis ada di sumbu y, karena terdapat penggunaan class .flex-column di flex
container. Maka class flex-fill juga akan berpengaruh di sumbu y (atas-bawah).
Ketika masuk ke breakpoint medium (bawah), seluruh flex item akan "meninggi" karena ketiga
Box memiliki class flex fill yang berlaku pada breakpoint medium ke atas.
Saat masuk ke breakpoint small (kanan atas), Box 3 tidak lagi memiliki efek flex fill karena
class .flex-md-fill (baris 4) hanya aktif di breakpoint medium ke atas.
Dan pada saat masuk ke breakpoint extra-small (kiri atas), Box 2 dan Box 3 juga tidak lagi
memiliki efek flex fill karena class .flex-sm-fill (baris 3) juga hanya aktif di breakpoint small
ke atas. Di sini hanya Box 1 saja yang memiliki efek flex fill.
11.7. Flex Grow

Dalam konsep CSS, flex grow adalah cara untuk mengatur skala "pembesaran" dari setiap flex
item. Namun di Bootstrap, class flex grow hanya bisa diatur dengan 2 nilai saja: 0 untuk tidak
ada pembesaran (class .flex-grow-0), dan 1 untuk pembesaran normal (class .flex-grow-1) .
Akibatnya, flex grow ini nyaris tidak berbeda dengan flex fill yang baru saja kita bahas.
Berikut contoh praktek dari flex grow:
389
Flex Utilities
16.flex_grow.html
2 <div class="p-3 bg-primary flex-grow-1">Box 1</div>
3 <div class="p-3 bg-danger flex-grow-0">Box 2</div>
4 <div class="p-3 bg-success flex-grow-0">Box 3</div>
5 </div>
6
11 </div>
12
17 </div>
Tampilan flex grow
Seperti yang terlihat, class .flex-grow-1 memiliki efek yang sama seperti .flex-fill. Class ini
dipakai untuk membuat flex item memanjang memenuhi ruang yang masih tersedia.
Sedangkan class .flex-grow-0 dipakai agar ukuran flex item tidak ikut membesar.
Flex Grow Breakpoint

Untuk variasi breakpoint, class flex grow menggunakan format:
flex-<kode_breakpoint>-grow-<0|1>
17.flex_grow_breakpoint.html
1 <div class="p-2 bg-dark text-white d-flex flex-row">
2 <div class="p-3 bg-primary flex-sm-grow-1 flex-md-grow-0">Box 1</div>
390
Flex Utilities
3 <div class="p-3 bg-danger flex-md-grow-1">Box 2</div>

5 </div>
Tampilan flex grow pada 3 breakpoint
Pada breakpoint medium (bawah), hanya Box 2 yang melebar karena terdapat class .flex-md-
grow-1. Box 1 tidak ikut melebar karena ada class .flex-md-grow-0. Box 3 juga tidak melebar
karena tidak memiliki class flex grow apapun.
Pada breakpoint small (kanan atas), giliran Box 1 yang melebar karena class .flex-sm-grow-1.
Box 2 dan Box 3 tampil normal sebab tidak memiliki class flex grow apapun.
Terakhir di breakpoint extra small (kiri atas), tidak ada satu pun Box yang melebar karena
tidak ada class flex grow yang berefek di breakpoint ini.
11.8. Flex Shrink

Class flex shrink dipakai untuk mengatur apa yang terjadi ketika flex item terpaksa
"menyusut" karena tidak ada ruang lagi.
Secara default, teks yang ada di dalam flex item akan pindah ke baris baru. Ini merupakan efek
dari class .flex-shrink-1. Jika kita tidak ingin teks pindah ke baris baru, gunakan class .flex-
shrink-0. Berikut contoh penggunaan class flex shrink Bootstrap:
18.flex_shrink.html
2 <div class="p-3 bg-primary">Box 1 yang cukup panjang</div>
3 <div class="p-3 bg-danger">Box 2 yang cukup panjang</div>
4 <div class="p-3 bg-success">Box 3 yang cukup panjang</div>
5 </div>
6
8 <div class="p-3 bg-primary flex-shrink-1">Box 1 yang cukup panjang</div>
9 <div class="p-3 bg-danger flex-shrink-0">Box 2 yang cukup panjang</div>
10 <div class="p-3 bg-success flex-shrink-1">Box 3 yang cukup panjang</div>
11 </div>
391
Flex Utilities
Tampilan flex shrink default (atas) dan class .flex-shrink-0 pada Box 2 (bawah)
Di sini saya menambah panjang teks ke setiap Box untuk melihat efek dari flex shrink.
Flex container pertama (atas), tidak menggunakan class flex shrink apapun. Ketika lebar web
browser diperkecil, teks akan pindah ke baris baru karena sudah tidak muat lagi.
Flex container kedua (bawah), menggunakan class .flex-shrink-1 di Box 1 dan Box 3, serta
class .flex-shrink-0 untuk Box 2. Hasilnya ketika web browser diperkecil, Box 2
mempertahankan lebarnya agar teks tidak pindah ke baris baru. Inilah efek dari class .flex-
shrink-0.
Flex Shrink Breakpoint

Flex shrink juga memiliki variasi breakpoint dengan format:
flex-<kode_breakpoint>-shrink-<0|1>
28.flex_shrink_breakpoint.html
2 <div class="p-3 bg-primary flex-sm-shrink-0 flex-md-shrink-1">
3 Box 1, Lorem ipsum dolor sit amet consectetur adipisicing elit.
4 Sed commodi quia nobis fugiat, dolore aspernatur molestias odio?
5 </div>
8 </div>
392
Flex Utilities
Tampilan flex shrink dengan variasi breakpoint
Di sini saya menggunakan class .flex-sm-shrink-0 dan .flex-md-shrink-1 di Box 1. Hasilnya

ketika masuk ke breakpoint small (kanan atas), isi teks di dalam Box 1 "menolak" untuk pindah
ke baris kedua sehingga akan memanjang terus ke samping kanan.
11.9. Flex Order

Fungsi dari class flex order sama seperti class order di grid system, yakni mengatur
penempatan posisi flex item secara manual. Jadi meskipun Box 1 ditulis pertama kali, posisinya
bisa di atur agar tampil setelah Box 3.
Bootstrap menyediakan 8 nomor class flex order, mulai dari .order-0, .order-1, .order-2,
hingga .order-5, serta class .order-first dan .order-last. Berikut contoh penggunaannya:
20.flex_order.html
2 <div class="p-3 bg-primary order-2">Box 1</div>
3 <div class="p-3 bg-danger order-1">Box 2</div>
4 <div class="p-3 bg-success order-0">Box 3</div>
5 </div>
6
8 <div class="p-3 bg-primary order-5">Box 1</div>
9 <div class="p-3 bg-danger order-7">Box 2</div>
10 <div class="p-3 bg-success order-1">Box 3</div>
11 </div>
393
Flex Utilities
Tampilan flex order
Pada kelompok box pertama, saya mengisi Box 3 dengan class .order-0 (baris 4), hasilnya box
tersebut tampil paling awal. Kemudian diikuti Box 2 dengan class .order-1, dan terakhir Box 1
dari class .order-2.
Untuk kelompok box kedua cara perhitungannya juga mirip. Urutan penomoran order tidak
harus berurutan, tapi bisa lompat dari .order-3, .order-5 dan .order-first.
Flex Order Breakpoint

Class order juga tersedia dalam variasi breakpoint dengan format sebagai berikut:
order-<kode_breakpoint>-<0|2|3|4|5|first|last>
Berikut contoh penggunaan class flex order dengan sistem breakpoint:
30.flex_order_breakpoint.html
2 <div class="p-3 bg-primary order-sm-3 order-md-3">Box 1</div>
3 <div class="p-3 bg-danger order-sm-2 order-md-1">Box 2</div>
4 <div class="p-3 bg-success order-sm-1 order-md-2">Box 3</div>
5 </div>
Tampilan flex order dengan 3 variasi breakpoint
Cara membaca kode di atas tidak terlalu sulit. Untuk breakpoint medium, urutan flex item
394
Flex Utilities
sesuai dengan class dengan "kode" -md-. Untuk breakpoint small, urutannya sesuai dengan
class dengan "kode" -sm-. Khusus untuk breakpoint extra-small urutannya sesuai dengan
penulisan kode program (dari atas ke bawah) karena tidak dicantumkan class order khusus.
11.10. Flex Margin

Materi flex margin sebenarnya tidak langsung berhubungan dengan class flexbox, tapi lebih
ke efek samping penggunaan margin di dalam flex item. Pertama kita akan lihat efek dari
margin horizontal terlebih dahulu.
Sebagaimana yang telah dipelajari, Bootstrap memiliki utilities class untuk padding dan
margin. Diantaranya class .me-auto yang tidak lain berisi perintah CSS margin-right:auto,
class .ms-auto yang berarti margin-left:auto, serta .mx-auto yang merupakan gabungan dari
margin-right:auto dan margin-left:auto.
Ketiga class ini (.me-auto, .ms-auto dan .mx-auto) membawa efek menarik ke dalam flex item
31.flex_auto_margin_horizontal.html
3 <div class="p-3 bg-danger me-auto">Box 2</div>
5 </div>
6
9 <div class="p-3 bg-danger ms-auto">Box 2</div>
11 </div>
12
15 <div class="p-3 bg-danger mx-auto">Box 2</div>
17 </div>
18
20 <div class="p-3 bg-primary ms-auto">Box 1</div>
22 <div class="p-3 bg-success me-auto">Box 3</div>
23 </div>
395
Flex Utilities
Efek penggunaan margin auto ke dalam flex item (horizontal)
Kelompok box pertama memiliki class .me-auto di Box 2. Dengan demikian Box 2 akan
"mendorong" sisa margin ke arah akhir sehingga Box 3 menjadi terpisah dan berada di sisi
kanan flex container.
Kelompok box kedua memiliki class .ms-auto di Box 2. Hasilnya, Box 2 akan "mendorong" sisa
margin ke arah awal sehingga Box 2 dan Box 3 berada di ke sisi kanan flex container.
Kelompok box ketiga memiliki class .mx-auto di Box 2. Ini akan membagi 2 margin di sisi kiri
dan kanan Box 2, sehingga Box 2 berada tepat di tengah flex container.
Kelompok box keempat (paling bawah), memiliki class .ms-auto di Box 1 dan .me-auto di Box 3.
Kedua class ini akan membagi dua sisa margin di sisi kiri Box 1 dan di sisi kanan Box 3, hasilnya
ketiga Box berada di tengah flex container.
Class margin auto seperti ini bisa dipakai sebagai alternatif dari float serta cara lain untuk
membuat column offset di Bootstrap grid system.
Efek margin auto juga berlaku secara vertikal, yakni class .mt-auto (margin-top:auto), .mb-
auto (margin-bottom:auto) dan .my-auto (margin-top:auto dan margin-bottom:auto). Berikut
contohnya:
23.flex_auto_margin_vertical.html
1 <div style="height: 250px;" class="p-2 mb-3 bg-dark text-white
2 d-flex flex-column align-items-start">
4 <div class="p-3 bg-danger mt-auto">Box 2</div>
6 </div>
7
396
Flex Utilities

10 <div class="p-3 bg-primary mt-auto">Box 1</div>
12 <div class="p-3 bg-success mb-auto">Box 3</div>
13 </div>
14
18 <div class="p-3 bg-danger my-auto">Box 2</div>
20 </div>
Efek penggunaan margin auto ke dalam flex item (vertikal)
Ketiga flex container di set dengan tinggi 250 pixel (height:250px) supaya efek margin vertikal
lebih mudah dilihat. Selain itu terdapat class .d-flex, .flex-column dan .align-items-start
agar tampilan flex item memanjang ke bawah.
Kelompok box pertama memiliki class .mt-auto pada Box 2. Hasilnya, Box 2 akan mendorong
sisa margin ke arah atas sehingga Box 1 berada di sisi atas container (gambar kiri).
Kelompok box kedua memiliki class .mt-auto pada Box 1 dan class .mb-auto pada Box 3 .
Hasilnya, sisa margin dibagi dua masing-masing untuk sisi atas Box 1 dan sisi bawah Box 3.
Kelompok box ketiga memiliki class .my-auto pada Box 2. Hasilnya, sisa margin dibagi dua
untuk sisi atas dan bawah Box 2 (gambar kanan).
Tanpa flex container, property margin-top:auto dan margin-bottom:auto milik CSS biasanya
tidak memiliki efek apapun ke element HTML.
Flex margin ini juga tersedia dalam variasi breakpoint. Namun karena sudah pernah kita
pelajari dalam bab utilities class Bootstrap, tidak akan saya bahas lagi.
11.11. Flex Wrap

Flex wrap adalah class flexbox Bootstrap untuk mengatur proses "wraping" atau pemindahan
sebagian flex item ke baris baru jika sudah tidak muat lagi. Ada 3 variasi class yang tersedia,
yakni .flex-nowrap, .flex-wrap dan .flex-wrap-reverse.
397
Flex Utilities
Mari kita bahas dengan contoh kode program:
33.flex_warp.html
1 <div class="p-2 mb-3 bg-dark text-white d-flex flex-row flex-nowrap">
2 <div class="p-3 bg-primary">Box Satu</div>
3 <div class="p-3 bg-danger">Box Dua</div>
4 <div class="p-3 bg-success">Box Tiga</div>
5 <div class="p-3 bg-secondary">Box Empat</div>
6 <div class="p-3 bg-warning">Box Lima</div>
7 <div class="p-3 bg-info">Box Enam</div>
8 <div class="p-3 bg-primary">Box Tujuh</div>
9 </div>
10
11 <div class="p-2 mb-3 bg-dark text-white d-flex flex-row flex-wrap">
12 ...
13 </div>
14
15 <div class="p-2 bg-dark text-white d-flex flex-row flex-wrap-reverse">
16 ...
17 </div>
Tampilan berbagai efek flex wrap
Class pertama, yakni .flex-nowrap akan menahan flex item agar tidak pindah ke baris di
bawahnya. Jika dalam flex item terdapat beberapa kata, kata itulah yang akan pindah ke baris
baru, bukan flex item-nya. Ini merupakan efek default.
Class kedua, .flex-wrap akan memindahkan flex item ke baris baru jika tidak muat lagi ruang
untuk seluruh flex item.
398
Flex Utilities
Class kedua, .flex-wrap-reverse sama seperti .flex-wrap dimana flex item akan pindah ke
baris baru jika tidak muat lagi. Akan tetapi baris baru itu ada di atas baris saat ini.
Flex Wrap Breakpoint

Variasi breakpoint dari flex wrap menggunakan format:
flex-<kode_breakpoint>-<jenis_wrap>
Berikut contoh penggunaan class flex wrap dengan sistem breakpoint:
25.flex_warp_breakpoint.html
1 <div class="p-2 bg-dark text-white d-flex flex-sm-wrap flex-md-wrap-reverse">
2 <div class="p-3 bg-primary">Box Satu yang cukup panjang</div>
3 <div class="p-3 bg-danger">Box Dua yang cukup panjang</div>
4 <div class="p-3 bg-success">Box Tiga yang cukup panjang</div>
5 <div class="p-3 bg-secondary">Box Empat yang cukup panjang</div>
6 <div class="p-3 bg-info">Box Lima yang cukup panjang</div>
7 </div>
Tampilan flex wrap dalam 3 breakpoint
Ketika masuk ke breakpoint medium (bawah), class .flex-md-wrap-reverse akan aktif.

Akibatnya flex item yang tidak tertampung di 1 baris "naik" mengisi baris baru di atas baris
yang ada saat ini.
Ketika tampilan masuk ke breakpoint small (kanan atas), class .flex-sm-wrap akan aktif.
Hasilnya flex item yang tidak tertampung akan mengisi baris baru di bawah baris yang ada
sekarang.
Untuk tampilan breakpoint extra-small (kiri atas), tidak ada class flex yang aktif, namun
secara default ini sama artinya dengan .flex-no-wrap sehingga setiap flex item akan tetap
dipertahankan dalam 1 baris.
399
Flex Utilities
11.12. Flex Align Content

Flex align content sangat mirip seperti flex justify content, bedanya kali ini kita mengatur
sebaran flex item pada cross axis saat terjadi wrapping (efek dari class .flex-wrap atau
.flex-wrap-reverse).
Flex align content hadir dalam 6 variasi class, yakni:

 .align-content-start
 .align-content-end
 .align-content-center
 .align-content-between
 .align-content-around
 .align-content-stretch
35.flex_align_content.html
2 d-flex flex-wrap flex-wrap align-content-start">
10 </div>
11
13 d-flex flex-wrap flex-wrap align-content-end">
14 ...
15 </div>
16
18 d-flex flex-wrap flex-wrap align-content-center">
19 ...
20 </div>
21
23 d-flex flex-wrap flex-wrap align-content-between">
24 ...
25 </div>
26
28 d-flex flex-wrap flex-wrap align-content-around">
29 ...
30 </div>
31
33 d-flex flex-wrap flex-wrap align-content-stretch">
400
Flex Utilities
34 ...
35 </div>
Tampilan 5 class flex align content
Karena kita akan mengatur posisi flex item secara vertikal, maka setiap kelompok box saya set
dengan height:180px. Selain itu juga ditambah class .flex-wrap agar flex item terpecah
menjadi beberapa baris.
Jika dalam flex container terdapat class .align-content-start (baris 2), semua flex item akan
berkumpul di sisi atas flex container. Untuk class .align-content-end (baris 13), semua flex
item akan berkumpul di sisi bawah flex container. Dan jika dipakai class .align-content-
center (baris 18), semua flex item akan berkumpul di sisi tengah.
Selanjutnya jika yang dipakai adalah class .align-content-between (baris 23), flex item akan
berkumpul di sisi bawah dan atas flex container. Seluruh ruang kosong yang masih tersedia
akan berada di tengah flex container.
Jika yang dipakai class .align-content-around (baris 28), seluruh margin vertikal akan di sebar
merata di setiap sisi flex item.
Terakhir, class .align-content-stretch (baris 33) akan memperbesar semua flex item untuk
memenuhi tinggi parent element.
401
Flex Utilities
Flex Align Content Breakpoint

Variasi breakpoint dari flex item menggunakan format berikut:
align-content-<kode_breakpoint>-<jenis_align>
Berikut contoh penggunaan class flex align content dengan sistem breakpoint:
27.flex_align_content_breakpoint.html
1 <div style="height: 150px;" class="p-2 bg-dark text-white d-flex flex-wrap
2 flex-wrap align-content-start align-content-sm-end align-content-md-center">
10 </div>
Tampilan class flex align content dalam variasi breakpoint
Kombinasi dari class .align-content-start, .align-content-sm-end dan .align-content-md-

center di baris 2 artinya: flex item berada di tengah (center) pada breakpoint medium, berada
di bawah (end) pada breakpoint small, dan berada di atas pada breakpoint extra-small.
Perlu juga diperhatikan bahwa class .flex-wrap dan salah satu class flex align content harus
selalu ditulis. Jika tidak, setiap flex item akan memanjang (stretch) dari sisi atas hingga sisi
bawah flex container.
---
402
Flex Utilities
Dalam bab ini kita telah membahas tentang flexbox utilities class Bootstrap. Dalam praktek
pembuatan template sebenarnya nanti, class flexbox ini akan banyak terpakai.
Namun sebelum itu, saya ingin membahas sekilas tentang komponen tambahan yang sempat
hilang dari Bootstrap dan sekarang hadir kembali, yakni Bootstrap Icons.
------------------------------------------------------------------
=====================================================================
403
Bootstrap Icon
12. Bootstrap Icon
Ketika masuk ke perancangan template, kadang kita butuh gambar icon sebagai pengganti
teks. Salah satu cara untuk membuatnya adalah menggunakan Bootstrap Icon. Dalam bab ini
kita akan membahas apa itu bootstrap icon dan bagaimana cara menggunakannya.
12.1. Pengertian Bootstrap Icon

Bootstrap icon adalah kumpulan icon bawaan Bootstrap. Ini adalah versi "comeback" karena
dulunya Bootstrap 3 sudah pernah punya icon bawaan (dengan nama glyphicons), namun di
hapus di Bootstrap 4, dan sekarang muncul kembali di Bootstrap 5.
Terdapat beberapa cara untuk menggunakan Bootstrap icon, yakni dengan men-copy kode
SVG, menginputnya sebagai gambar, atau mengakses font icon. Kita akan bahas satu per satu.
12.2. Bootstrap Icon SVG

Cara pertama dan paling praktis untuk menggunakan bootstrap icon adalah dengan men-copy
langsung kode SVG ke dalam file HTML. Ini lebih disarankan jika kita hanya butuh 1 atau
beberapa icon saja. Silahkan cari icon yang ingin di pakai pada alamat icons.getbootstrap.com:
Gambar: Pilih gambar bootstrap icon
404
Bootstrap Icon
Klik salah satu icon, dan akan terbuka halaman detail dari icon tersebut. Di bagian kanan
bawah terdapat judul "Copy HTML". Inilah kode yang kita butuhkan, silahkan copy kode ini
dengan cara men-klik icon copy atau di select manual.
Gambar: Copy kode di bagian "Copy HTML"
Buat file HTML biasa (tidak harus mengakses file Bootstrap), lalu paste kode tersebut:
01.icon-svg.html
1 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
2 fill="currentColor" class="bi bi-app-indicator" viewBox="0 0 16 16">
3 <path d="M5.5 2A3.5 3.5 0 0 0 2 5.5v5A3.5 3.5 0 0 0 5.5
4 14h5a3.5 3.5 0 0 0 3.5-3.5V8a.5.5 0 0 1 1 0v2.5a4.5 4.5 0 0 1-4.5
5 4.5h-5A4.5 4.5 0 0 1 1 10.5v-5A4.5 4.5 0 0 1 5.5 1H8a.5.5 0 0 1 0 1H5.5z"/>
6 <path d="M16 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
7 </svg>
Gambar: Tampilan Bootstrap icon dengan copy SVG
Apa yang baru saja kita lakukan adalah mencopy kode SVG ke dalam file HTML. SVG
sebenarnya bukan bagian dari HTML, tapi bisa di proses oleh web browser.
Dari kode yang di copy tersebut, kita bisa melihat struktur kode HTML normal seperti atribut
width, height serta class. Ketika atribut ini bisa di modifikasi untuk mengatur besar dan
warna icon:
405
Bootstrap Icon
02.icon-svg-color-size.html
1 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"
2 fill="currentColor" class="bi bi-app-indicator text-info" viewBox="0 0 16 16">
3 <path d="M5.5 2A3.5 3.5 0 0 0 2 5.5v5A3.5 3.5 0 0 0 5.5
4 14h5a3.5 3.5 0 0 0 3.5-3.5V8a.5.5 0 0 1 1 0v2.5a4.5 4.5 0 0 1-4.5
5 4.5h-5A4.5 4.5 0 0 1 1 10.5v-5A4.5 4.5 0 0 1 5.5 1H8a.5.5 0 0 1 0 1H5.5z"/>
6 <path d="M16 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
7 </svg>
Gambar: Mengubah warna dan ukuran icon SVG
Kali ini saya mengubah nilai atribut width dan height menjadi 40. Ini akan membuat ukuran
icon menjadi 40 pixel. Selain itu tambahan class .text-info akan mengubah warna icon
menjadi kebiruan (cyan) yang berasal dari utility class Bootstrap.
Mengakses bootstrap icon dengan SVG memang sangat praktis. Namun kode yang diperlukan
memang cukup panjang karena itulah yang dipakai untuk "menggambar" icon. Namun jika kita
butuh mengakses banyak icon di berbagai halaman, bisa memakai cara import sebagai gambar
atau font.
12.3. Bootstrap Icon Img

Cara kedua untuk bisa mengakses bootstrap icon adalah mengaksesnya dari tag <img>. Untuk
keperluan ini, kita harus copy semua file icon ke dalam struktur folder. Gambar icon ini bisa di
download dari github.com/twbs/icons/releases/latest. Setelah terbuka, scroll sedikit ke
bagian bawah lalu klik link "Source code (zip)".
Gambar: Download source code Bootstrap icon
406
Bootstrap Icon
Pada saat buku ini di revisi, versi terakhir dari Bootstrap icon adalah versi 1.5.0 (berukuran
sekitar 2,3MB). Link di atas otomatis akan mengakses versi paling baru.
Buka file "icons-1.5.0.zip", lalu copy isi folder icons ke belajar_bootstrap atau folder lain
tempat file HTML akan dibuat.
Gambar: Copy isi folder icons ke belajar_bootstrap
Folder icons berisi lebih dari 1300 file gambar dalam format .svg. Kita tinggal akses file icon ini
menggunakan tag <img> seperti kode berikut:
03.icon-img.html
1 <img src="icons/bricks.svg" alt="bricks" width="32" height="32">
Gambar: Tampilan Bootstrap icon dari tag <img>
Nama gambar icon bisa kembali di lihat dari halaman icons.getbootstrap.com. Dan karena
langsung menjadi gambar HTML, kita juga bisa mengatur ukuran serta warna dari atribut
width, height serta style CSS.
12.4. Bootstrap Icon Font CSS

Cara terakhir untuk menggunakan bootstrap icon adalah mengimportnya sebagai file font CSS
dan diakses dari nama class. Untuk keperluan ini, silahkan buka kembali file source code
bootstrap icon, kali ini copy isi folder font ke folder belajar_bootstrap:
407
Bootstrap Icon
Gambar: Copy isi folder font ke belajar_bootstrap
Di dalam folder font ini terdapat file bootstrap-icons.css yang harus kita import ke dalam file
HTML. Berikut contoh penggunaannya:
04..icon-font.html
1 <!DOCTYPE html>
2 <html lang="id">
3 <head>
8 <link rel="stylesheet" href="font/bootstrap-icons.css">
9 <style>
10 /* kode CSS disini... */
11 </style>
12 </head>
13 <body>
14
15 <i class="bi-alarm"></i>
16
18 </body>
19 </html>
Gambar: Tampilan Bootstrap icon dari font CSS
Di baris 8 terdapat tag <link> yang mengakses file font/bootstrap-icons.css. Dengan ini, kita
408
Bootstrap Icon
bisa mengakses bootstrap icon menggunakan class bi-* seperti di baris 15. Untuk
menampilkan icon tidak harus dari tag <i>, tapi juga bisa dari tag lain seperti <span>.
Karena icon ini diakses menggunakan font, maka akan ikut berubah jika kita memperbesar
font atau mengganti warna font dari class Bootstrap:
05..icon-font-color-size.html
1 <div class="p-2">
2 <i class="bi-alarm text-danger fs-1"></i>
3 </div>
Gambar: Mengubah warna dan ukuran icon
Tambahan class .text-danger dan .fs-1 akan mengubah warna icon menjadi merah serta
berukuran font size level 1. Kedua class ini merupakan class bawaan Bootstrap untuk mengatur
font.
---
Bootstrap icon menjadi nilai tambah yang menarik di Bootstrap 5. Namun kita tetap bisa
menggunakan icon pihak ketiga seperti font-awesome yang lebih dahulu populer.
Berikutnya kita akan masuk ke studi kasus pembuatan template menggunakan Bootstrap. Ini
menjadi ajang latihan untuk menguji pemahaman seputar cara penggunaan Bootstrap.
409
ILKOOM Tech Template
13. ILKOOM Tech Template
Pembahasan tentang materi Bootstrap sudah selesai. Dalam bab ini dan berikutnya kita akan
masuk ke studi kasus pembuatan template website sebagai implementasi dari apa yang kita
pelajari sejak awal buku.
Untuk bab ini, saya akan membuat template berjenis company profile dari perusahaan fiktif
bernama ILKOOM Tech. Template company profile merupakan jenis template yang cukup
sederhana. Biasanya hanya berisi informasi perusahaan seperti sejarah, visi misi, struktur
pimpinan dan produk. Berikut sekilas tampilan template ILKOOM Tech:
Tampilan template web ILKOOM Tech untuk versi desktop (kiri) dan smartphone (kanan)
410
Template yang akan kita buat berbentuk "one page tamplate", yakni hanya terdiri dari 1
halaman agar kodenya tidak terlalu panjang. Namun meskipun hanya 1 halaman, kode yang
diperlukan mencapai lebih dari 400 baris.
Untuk pembuatan template ini saya memakai berbagai komponen Bootstrap seperti navbar,
card, form, button, scrollspy dan tentu saja grid system. Selain itu juga ditambah dengan
bootstrap icon serta library JavaScript AOS (Animate On Scroll) untuk membuat efek animasi
tambahan.
Untuk melihat langsung tampilan akhir dari template ILKOOM Tech, bisa buka folder
bab_13_ILKOOM_tech_template_final yang ada di file belajar_bootstrap.zip.
13.1. Struktur File dan Folder

Sebelum masuk ke kode program, kita akan bahas struktur file dan folder untuk template
ILKOOM Tech, yakni 1 file HTML utama bernama index.html serta 4 folder yang berisi file
pelengkap: css, font, img dan js.
Tampilan folder dari template ILKOOM Tech
Berikut penjelasan dari setiap folder:

 Folder css berisi file bootstrap.css.
 Folder font berisi file font bootstrap icon yang sudah kita bahas dalam bab sebelumnya.
 Folder img berisi berbagai gambar yang diperlukan.
 Folder js berisi file jquery-3.3.1.js, popper.js dan bootstrap.js.
Sebagai tambahan, saya juga membuat 1 file style.css di dalam folder css. File style.css ini
akan berisi sedikit kode CSS external yang nantinya diakses dari file index.html.
Dengan demikian berikut tampilan struktur file awal template ILKOOM Tech:
411
Struktur file dari template ILKOOM Tech
Agar bisa membuat tampilan yang sama persis dengan apa yang akan saya bahas, silahkan
copy seluruh gambar dari folder bab_13/img yang ada di dalam belajar_bootstrap.zip ke
dalam folder img.
Tampilan gambar di folder img yang akan dipakai untuk membuat template
Seluruh gambar di folder img saya ambil dari 3 website penyedia gambar (stock image):
pexels.com, unsplash.com, dan pixabay.com. Ketiga website ini menyediakan gambar
gratis untuk berbagai keperluan dan dengan lisensi yang nyaris bebas, yakni:
 Boleh dipakai untuk project komersil (free for commercial and noncommercial use)
 Boleh di edit (you can modify the photos)
 Tidak perlu mencantumkan sumber (attribution is not required).
Bagi kita sebagai programmer yang membuat karya, sangat penting untuk menghargai
hasil karya orang lain terutama berkaitan dengan masalah lisensi. Jangan sampai kita
dituntut karena membuat aplikasi yang berisi gambar ber-hak cipta.
Mengambil sembarang gambar dari hasil pencarian Google juga sangat tidak disarankan,
karena besar kemungkinan itu memiliki lisensi. Mencantumkan sumber gambar juga
tidak otomatis artinya kita berhak memakai gambar tersebut karena tidak semua pemilik
412
gambar mengizinkan hal itu.
Baik, seluruh file sudah tersedia sehingga kita bisa mulai coding.
13.2. Template Awal

Berikut kode awal yang diperlukan:
01.index_awal.html
1 <!DOCTYPE html>
2 <html lang="id">
3 <head>
6 <title>ILKOOM Tech - We Build Technology</title>
9 <link rel="stylesheet" href="css/style.css">
10 </head>
11 <body>
12
14 </body>
15 </html>
Kode ini kurang lebih sama seperti struktur template yang kita pakai selama ini. Tambahannya,
saya mengganti isi teks tag <title> di baris 6 menjadi "ILKOOM Tech - We Build Technology ".
Teks ini akan tampil di bagian atas jendela atas web browser.
Selain itu juga terdapat tag <link> untuk mengakses file CSS bootstrap icon di baris 8, serta
untuk mengakses file CSS external style.css di baris 9. Saat ini file style.css masih belum
berisi kode apapun (file kosong).
Modifikasi pertama adalah menambah tag <link> untuk menampilkan favicon. Favicon adalah
sebutan untuk gambar kecil yang tampil sebelum teks title di bagian atas jendela web browser.
Saya sudah menyediakan file favicon.png di folder img sehingga kodenya adalah sebagai
berikut:
02.tambahan_favicon.html
1 ...
2 <title>ILKOOM Tech - We Build Technology</title>
3 <link rel="icon" href="img/favicon.png" type="image/png">
5 ...
413
Tampilan gambar favicon
Tag <link> untuk menampilkan favicon berada setelah tag <title> (baris 3). Tidak ada aturan
baku mengenai posisi penulisan tag ini, selama berada di dalam <head> maka tidak masalah.
Kode program untuk template ILKOOM Tech cukup panjang dan karena itu saya akan
bahas per bagian (tidak utuh satu halaman sekaligus). Setiap bahasan merupakan
lanjutan dari kode program sebelumnya. Jika ingin menyamakan kode program, silahkan
buka folder belajar_bootstrap\bab_13_ILKOOM_tech_template .
13.3. Menu Navigasi

Selanjutnya kita masuk ke bagian <body> yang diawali dengan menu navigasi. Untuk membuat
menu navigasi, kita (tentu saja) akan memakai komponen navbar Bootstrap. Berikut kodenya:
03.menu_navigasi.html
1 
2 <nav id="main-navbar" class="navbar navbar-expand-md navbar-light bg-light
3 fixed-top py-2 py-md-0">
5 <a class="navbar-brand" href="index.html">ILKOOM</a>
9 </button>
10
12 <ul class="navbar-nav ms-auto">
14 <a class="nav-link p-3 active" href="#showcase">Home</a>
15 </li>
17 <a class="nav-link p-3" href="#product">Product</a>
18 </li>
20 <a class="nav-link p-3" href="#team">Team</a>
21 </li>
22 <li class="nav-item ">
23 <a class="nav-link p-3" href="#blog">Blog</a>
24 </li>
25 </ul>
26 </div>
414
27 </div>
28 </nav>
Tampilan menu navigasi awal ILKOOM Tech
Sebagian besar kode ini sudah kita bahas saat mempelajari komponen navbar Bootstrap.
Hanya saja saya menambah sedikit utility class agar menu navigasi ini tidak sama persis
dengan bawaan Bootstrap.
Pada baris 1 terdapat kode komentar HTML: . Ini dipakai untuk menandakan
bahwa kode di bawahnya dipakai untuk Navbar. Penulisan seperti ini berguna supaya HTML
menjadi terstruktur dan mudah dibedakan antara kode untuk membuat komponen yang satu
dengan yang lain.
Di baris 2 terdapat tag <nav> sebagai pembuka komponen navbar Bootstrap. Selain class
standar .navbar, saya menambah 6 class bootstrap lain:
 .navbar-expand-md: Bootstrap menerapkan prinsip mobile first, dimana secara default

navbar tampil dalam bentuk hamburger menu. Dengan penambahan class ini, begitu
masuk ke breakpoint md (middle), navbar akan membesar menjadi menu navigasi
standar. Sebaliknya, ketika masuk ke breakpoint sm (small), navbar akan menjadi
hamburger menu.
 .navbar-light: Class untuk membuat tampilan teks di navbar menjadi gelap (abu-abu)
 .bg-light: Utility class untuk membuat warna background menjadi putih (sedikit abu-
abu).
 .fixed-top: Utility class agar navbar selalu "menempel" di sisi atas web browser ketika
di scroll. Tambahan class ini juga membuat navbar terangkat dari normal document
415
flow.
 .py-2: Utility class untuk membuat padding sumbu y level 2, yakni padding top dan
bottom.
 .py-md-0: Utility class untuk membuat padding sumbu y menjadi level 0 (dihapus) pada
breakpoint middle ke atas. Akibatnya, tinggi menu navbar akan sedikit berkurang
namun nanti akan saya kompensasi dengan penambahan padding di menu item.
Tambahan class .py-2 dan .py-md-0 di perlukan untuk membuat efek hover menggunakan
kode CSS (akan kita bahas sesaat lagi).
Lanjut di baris 4 – 9 tidak ada hal yang baru di sini. Class .navbar-brand dipakai untuk
membuat teks ILKOOM pada bagian kiri menu. Kemudian class .navbar-toggler dipakai
untuk membuat efek menu hamburger. Keduanya adalah class standar dari komponen navbar
Bootstrap.
Baris 11 – 26 berisi kode untuk setiap menu item yang juga bagian dari komponen standar
navbar. Terdapat tambahan class .ms-auto di baris 12 yang di pakai untuk mendorong seluruh
menu item ke sisi kanan navbar. Dengan demikian di sisi kiri hanya terdapat navbrand berupa
teks ILKOOM.
Seluruh tag <a> ditambahkan utility class .p-3 untuk membuat padding level 3 di setiap sisi.
Hasilnya, lebar dan tinggi menu item sedikit membesar (sebagai kompensasi dari class .py-md-
0 di tag <nav> sebelumnya), sekaligus untuk persiapan membuat efek hover.
Struktur menu navigasi kita sudah selesai, namun efek hover bawaan Bootstrap tidak terlalu
jelas. Efek yang saya maksud adalah ketika cursor mouse berada di atas menu item. Secara
default, yang terjadi hanya perubahan warna menu item dari abu-abu menjadi sedikit gelap.
Oleh karena itu saya ingin membuat efek yang lebih menarik menggunakan CSS. Silahkan buka
file style.css di folder css, lalu ketik kode berikut:
1 /*-- NAVBAR --*/

2 #main-navbar a{
3 border-bottom: 5px solid #f8f9fa;
4 text-transform: uppercase;
5 }
6 #main-navbar a:hover, #main-navbar .active{
7 border-bottom-color: black;
8 transition: border-color 500ms;
9 }
Jika anda sudah mempelajari CSS (misalnya dari buku CSS Uncover), saya yakin kode di atas
bisa dipahami.
Selector #main-navbar a artinya saya ingin mengubah semua tag <a> yang terdapat di dalam
element HTML dengan id="main-navbar". Ini tidak lain merujuk ke semua menu item yang
416
ada di navbar.
Untuk semua tag <a> tersebut, tambah border-bottom setebal 5 pixel, solid dan berwarna abu-
abu (#f8f9fa). Warna border ini sebenarnya sama dengan warna navbar saat ini (warna dari
class .bg-light Bootstrap). Kemudian property text-transform: uppercase akan mengubah
tampilan teks menu menjadi huruf besar.
Style untuk hover berada di selector kedua, yakni #main-navbar a:hover. Isinya berupa
property border-bottom-color: black dan transition: border-color 500ms .
Artinya, ketika list menu di hover, ubah warna border bottom menjadi hitam (yang sebelumnya
berwarna abu-abu #f8f9fa). Property transition dipakai untuk membuat efek perubahan
warna border secara perlahan dalam durasi setengah detik (500 microsecond).
Selain selector hover, terdapat juga selector #main-navbar .active. Selector ini akan mencari
class .active di dalam navbar, dan menerapkan efek yang sama seperti hover. Selector ini
dipakai untuk membuat tampilan scroolspy nantinya.
Dengan tambahan kode CSS di atas, berikut tampilan akhir dari navbar:
Tampilan class .active di dalam menu navigasi
Warna hitam untuk border bottom berasal dari class .active pada menu HOME (silahkan
lihat kode HTML di baris 13). Efek yang sama juga tampil ketika menu di hover, yakni dengan
cara mengarahkan cursor mouse ke atas salah satu menu:
Tampilan menu di dalam menu navigasi
Sekarang efek hover untuk navbar menjadi jelas dan lebih menarik.
13.4. Showcase
Selanjutnya kita akan buat sebuah showcase, yakni tampilan gambar besar di bawah navbar.
417
Bagian ini kadang disebut juga sebagai wall, hero atau jumbotron. Kali ini saya tidak akan
menggunakan komponen Bootstrap tapi membuatnya secara manual.
Berikut kode HTML yang diperlukan (ditulis setelah navbar):
04.showcase.html
1 
2 <section id="showcase" class="py-5">
3 <div class="dark-overlay">
5 <div class="row">
6 <div class="col text-center text-white">
7 <h1 class="display-2">We Build <strong>Technology</strong></h1>
8 <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing
9 elit. Dignissimos, vitae!</p>
10 </div>
11 </div>
12 </div>
13 </div>
14 </section>
Sebagai container luar, saya menggunakan tag <section> yang merupakan bagian dari
semantic tag HTML5 (baris 2). Tag ini tidak berbeda dengan tag <div>, yakni sama-sama tidak
memiliki efek tampilan apapun. Namun ini justru menguntungkan karena cocok dipakai
sebagai "generik" container.
Sekedar pengingat, istilah umum dari container adalah sebuah tag HTML yang melingkupi
tag-tag lain. Dalam contoh ini, tag <section> melingkupi seluruh kode yang akan kita buat
sehingga bisa dibilang sebagai "container". Semoga ini bisa dibedakan dengan class .container
bawaan Bootstrap yang secara khusus dipakai untuk membuat grid system Bootstrap.
Tag <section> ini memiliki atribut id="showcase", yang nantinya akan saya pakai sebagai
selector untuk kode CSS. Kemudian terdapat utility class .py-5 untuk membuat efek padding
level 5 di sisi atas dan bawah showcase (sumbu y).
Di baris 3 terdapat tag <div class="dark-overlay"> . Tag ini saya siapkan untuk membuat
sebuah overlay atau layer menggunakan kode CSS. Efek overlay nantinya berfungsi agar
gambar showcase tidak terlalu terang (akan kita bahas di bagian kode CSS sesaat lagi). Class
.dark-overlay adalah class yang saya tulis sendiri dan bukan bagian dari Bootstrap.
Selanjutnya di baris 4 sampai 12 merupakan struktur grid system Bootstrap yang terdiri dari
class .container, .row, dan .col.
Di dalam .col terdapat tag <h1 class="display-2"> dan <p class="lead">. Hasilnya tag h1
tampil dengan font yang cukup besar (efek dari utility class .display-2), serta paragraf yang
tampil sedikit besar karena efek dari utility class .lead. Kedua tag ini tampil dengan rata
tengah dan berwarna putih (efek dari class .text-center dan .text-white di baris 6).
418
Ketika dijalankan, tidak tampak perubahan apa-apa karena warna tag <h1> dan <p> sama
dengan warna putih background. Tapi saat bagian tengah di seleksi, teks tersebut bisa terlihat:
Tampilan teks di showcase
Selanjutnya kita masuk ke CSS, tambahkan kode berikut ke dalam style.css:
1 /*-- SHOWCASE --*/

2 #showcase{
3 background: url('../img/showcase_bg.jpg');
4 height: 600px;
5 padding-top: 150px;
6 background-size: cover;
7 background-attachment: fixed;
8 background-repeat: no-repeat;
9 }
10
11 #showcase h1{
12 padding-top: 250px;
13 }
Kode di baris 2 – 9 berfungsi untuk menampilkan gambar background showcase_bg.jpg ke

dalam showcase. Showcase ini saya set setinggi 600px dan padding-top 150px. Padding
diperlukan karena komponen navbar sebelumnya memiliki class .fixed-top, sehingga akan
keluar dari normal document flow. Tanpa tambahan padding-top di showcase, bagian atas
showcase akan tertimpa oleh navbar.
Property background-size: cover dipakai agar posisi gambar background memenuhi seluruh
showcase. Di kombinasikan dengan property background-attachment: fixed, gambar
background akan tetap (fixed), sehingga terjadi efek yang cukup menarik ketika di scroll.
Property background-repeat: no-repeat berguna agar gambar background tidak tampil
berulang (cukup 1 kali saja).
Kode di baris 11 – 13 dipakai untuk mendorong tag <h1> di showcase ke arah bawah sebesar
250px menggunakan property padding-top: 250px.
Mari kita lihat hasilnya:
419
Tampilan showcase dari template ILKOOM Tech
Hasilnya tampak sudah sesuai, dimana gambar background sukses tampil dan teks showcase
pas berada di tengah halaman.
Namun jika di perhatikan, menulis sebuah teks di atas gambar sering kali membuat tulisan
menjadi susah dibaca. Ini terjadi karena gambar yang terlalu terang, kurang kontras dengan
warna teks. Dalam kasus kita, teks putih di showcase akan "bentrok" dengan bagian gambar
yang juga berwarna putih. Apabila warna teks diganti ke hitam, juga akan bentrok dengan
bagian gambar yang berwarna hitam.
Salah satu cara untuk mengatasi hal ini adalah dengan mengedit gambar untuk menurunkan
tingkat kecerahannya (mengurangi brightness). Atau alternatif yang lebih fleksibel (serta lebih
menantang), adalah menggunakan kode CSS untuk memanipulasi tampilan gambar.
Caranya, buat sebuah element yang akan menutupi seluruh gambar, lalu set element tersebut
dengan warna transparan. Warna transparan yang dimaksud adalah warna dengan alpha
channel seperti rgba. Sebagai contoh, kode warna rgba(0, 0, 0, 0.5) akan membuat sebuah
element berwarna hitam plus efek transparansi 50%. Artinya element tersebut berwarna
hitam tapi tembus pandang sebesar 50%.
Teknik ini sering di sebut sebagai overlay, dan inilah yang akan kita buat menggunakan kode
CSS berikut:
1 .dark-overlay{
3 position: absolute;
4 top: 0;
420
5 left: 0;
6 width: 100%;
7 min-height: 600px;
8 }
Element HTML dengan class .dark-overlay sudah saya siapkan sebelumnya (yang melingkupi
seluruh showcase). Untuk element ini, set warna background dengan rgba(0, 0, 0, 0.5)
untuk membuat warna hitam transparan 50%. Property position: absolute, top: 0, left: 0,
width: 100% dan min-height: 600px dipakai agar element ini berada pas di atas showcase.
Silahkan update file style.css dengan tambahan kode di atas, dan berikut hasilnya:
Tampilan showcase + overlay dari template ILKOOM Tech
Sekarang warna background showcase sudah lebih hitam hasil dari teknik overlay. Cara ini
cocok dipakai agar gambar background tidak terlalu terang dan kita tidak perlu mengedit
manual gambar tersebut di Photoshop. Keuntungan lain, jika gambar diganti, efek overlay ini
tetap aktif.
Anda juga bisa utak-atik kode warna rgba(0, 0, 0, 0.5) jika ingin membuat efek overlay
berwarna, misalnya bisa coba pakai rgba(77, 70, 138, 0.5) untuk efek biru gelap.
13.5. Showoff
Bagian template berikutnya saya sebut sebagai showoff. Ini tidak lain berupa gambar besar di
sisi kiri dan teks di sisi kanan. Bagian ini sebenarnya bisa dibuat menggunakan media object
Bootstrap, tapi karena cukup sederhana saya akan buat manual menggunakan grid system.
421
Berikut kode yang diperlukan:
05.showoff.html
1 
2 <section id="showoff-1" class="bg-light text-muted py-5">
4 <div class="row">
5 <div class="col-md-6">
6 <img src="img/image1.jpg" alt="" class="img-fluid mb-3">
7 </div>
9 <h2>Kreatif</h2>
10 <p class="lead">Lorem ipsum dolor sit amet consectetur...</p>
11 <p>Lorem ipsum dolor sit amet consectetur adipisicing ...</p>
12 <p>Lorem ipsum dolor sit amet consectetur adipisicing ...</p>
13 </div>
14 </div>
15 </div>
16 </section>
Tampilan showoff dari template ILKOOM Tech
Untuk komponen ini saya kembali menggunakan tag <section> sebagai penampung dari kode
– kode showoff (baris 2). Tag ini memiliki 3 utility class:
 .bg-light: Untuk membuat background berwarna putih dengan sedikit abu-abu.
 .text-muted: Untuk membuat teks berwarna abu-abu gelap.
 .py-5: Untuk membuat padding sumbu y level 5, yakni padding-top dan padding-
bottom.
Di dalamnya terdapat class grid system, yakni .container (baris 3), dan .row (baris 4). Untuk
row ini saya bagi 2: .col-md-6 untuk gambar (baris 5 – 7), dan .col-md-6 untuk teks (baris 8 –
422
13). Artinya, di kiri akan terdapat gambar sebesar 6 segmen, dan di kanan akan terdapat teks
yang juga 6 segmen. Pembagian segmen ini berlaku untuk breakpoint middle ke atas. Untuk
breakpoint small dan extra-small, setiap kolom akan melebar menjadi 12 segmen (prilaku
default dari semua kolom grid).
Untuk segmen yang ada di kiri, diisi tag <img> dengan utility class .img-fluid dan .mb-3. Class
ini berguna agar gambar menjadi responsive dan memiliki padding bottom level 3.
Untuk segmen yang ada di kanan, isinya berupa tag <h2> serta beberapa tag <p> dengan
dummy teks lorem ipsum.
Teks dummy seperti lorem ipsum ini banyak kita pakai ketika membuat template. Jika
menggunakan teks editor VS Code, terdapat cara praktis untuk menggenerate dummy
teks ini.
Caranya, ketik "lorem" (tanpa tanda kutip), lalu tekan tombol tab. Otomatis teks ini akan
berganti menjadi beberapa kata lorem ipsum. Selain itu juga bisa menulis angka setelah
lorem, misalnya lorem10 untuk membuat 10 kata, atau lorem50 untuk membuat 50 kata.
Trik ini sebenarnya berasal dari plugin emmet yang sudah aktif secara default di VS
Code. Untuk teks editor lain seperti sublime text, bisa menginstall plugin emmet ini
secara manual.
Selanjutnya saya ingin membuat 1 lagi komponen showoff, namun dengan posisi gambar di
sebelah kanan. Berikut kode programnya:
06.showoff_2.html
1 
2 <section id="showoff-2" class="text-muted py-5">
4 <div class="row">
6 <h2>Inovatif</h2>
7 <p class="lead">Lorem ipsum dolor sit amet consectetur... </p>
9 </div>
11 <img src="img/image2.jpg" alt="" class="img-fluid mb-3">
12 </div>
13 </div>
14 </div>
15 </section>
423
Tampilan showoff kedua dari template ILKOOM Tech
Kode untuk showoff kedua ini sangat mirip dengan showoff pertama. Hanya saja kali ini saya
tidak memakai class .bg-light di tag <section> supaya background berwarna putih tanpa
efek abu-abu. Kemudian menukar posisi gambar ke kolom kanan (baris 10 - 12), dan teks di
kolom kiri (baris 5 -9).
Silahkan test kode di atas dan kecilkan web browser, tampilan navbar, showcase dan showoff
dari template ILKOOM Tech sudah responsive secara langsung.
Tampilan navbar, showcase dan showoff dalam breakpoint extra-small.
424
13.6. Product
Product adalah bagian template yang menampilkan daftar product and services dari
perusahaan ILKOOM Tech. Pada dasarnya ini hanya terdiri dari beberapa bootstrap icon yang
diperbesar dan dengan sedikit teks. Berikut kode programnya:
07.product.html
1 
2 <section id="product" class="py-5 bg-light">
4 <div class="row">
5 <div class="col text-center" >
6 <h1>Product and Services</h1>
7 <hr class="w-25 mx-auto">
8 <p class="lead">Lorem ipsum dolor sit amet consectetur
9 adipisicing elit. Dignissimos, vitae!</p>
10 </div>
11 </div>
12
13 <div class="row text-center justify-content-between mt-3">
14
15 <div class="col-sm-6 col-md-3 p-3">
16 <i class="bi-globe"></i>
17 <h4 class="mt-3">Website</h4>
18 <p>Lorem ipsum dolor sit, amet consectetur
19 adipisicing elit. Vero error temporibus tenetur cumque</p>
20 </div>
21
23 <i class="bi-file-code-fill"></i>
24 <h4 class="mt-3">Aplikasi</h4>
27 </div>
28
30 <i class="bi-palette-fill"></i>
31 <h4 class="mt-3">Design Grafis</h4>
34 </div>
35
37 <i class="bi-shield-fill-check"></i>
38 <h4 class="mt-3">Keamanan Sistem</h4>
41 </div>
42
43 </div>
44 </div>
45 </section>
425
Tampilan product and services dari ILKOOM Tech
Tampilan di atas sering kita jumpai pada website yang menawarkan produk dan jasa, biasanya
ini dipakai untuk menulis keunggulan dari sebuah produk atau layanan. Gambar icon saya
ambil dari bootstrap icon.
Di dalam tag <section> (baris 2), terdapat utility class .py-5 dan .bg-light untuk membuat
padding level 5 di sisi atas dan bawah (berasal dari class .py-5), serta warna background
sedikit abu-abu (berasal dari class .bg-light). Kombinasi tag <section> dan .py-5 seperti ini
akan banyak saya pakai di awal setiap komponen template ILKOOM Tech, karena ini
memberikan jarak yang "pas" dengan komponen sebelum dan sesudahnya.
Di baris 3, saya membuka grid system dengan class .container. Di dalamnya terdapat 2 buah
row, yakni baris 4 – 11 yang dipakai untuk membuat judul, serta baris 13 – 41 untuk membuat
tampilan icon.
Row pertama (baris 4 – 11) hanya berisi 1 kolom. Di dalamnya terdapat 2 teks dari tag <h1> dan
<p>. Kedua tag ini tampil dengan rata tengah hasil dari class .text-center (baris 5). Di baris 7
terdapat tag <hr class="w-25 mx-auto"> untuk membuat garis horizontal dengan lebar 25 %
(hasil dari utility class .w-25), serta margin auto agar garis pas di tengah halaman.
Proses pembuatan icon di mulai dari baris 13. Di sini saya memakai 3 class tambahan, yaitu
.text-center, .justify-content-between dan .mt-3. Class .justify-content-between
merupakan class flexbox Bootstrap agar semua kolom tampil dengan jarak sama satu dengan
yang lain.
Di baris 15, terdapat class .col-sm-6, .col-md-3 dan .p-3. Artinya, kolom ini secara default
akan selebar 12 kolom di breakpoint extra-small, menjadi 6 segmen di breakpoint small, dan
menjadi 3 segmen di breakpoint middle ke atas. Class .p-3 dipakai untuk membuat padding
426
level 3 di semua sisi.
Di baris 16 merupakan kode untuk menampilkan bootstrap. Agar tampil besar, saya menambah
kode CSS di style.css, yakni:
#product i[class^="bi"] {
font-size: 4rem;
}
Kode ini akan mencari semua tag <i> yang nama classnya di awali dengan kata " bi-", dan
berada di dalam id="product". Untuk selector tersebut, ubah ukuran font menjadi 4rem. Kode
ini bisa juga di tulis sebagai inline CSS menggunakan atribut style, lebih ke pilihan saja.
Di baris 17 – 19 terdapat tag <h4> dan <p> untuk membuat tampilan teks. Class .mt-3 dipakai
untuk membuat jarak dari gambar icon pada sisi bagian atas.
Cara yang sama berlaku untuk 3 tampilan icon lain, yakni baris 22 - 27, 29 - 34 dan 36 - 41.
Yang diubah hanyalah nama class bootstrap icon supaya bervariasi.
Berikut tampilannya di breakpoint extra-small dan small:
Tampilan product and services dari ILKOOM Tech pada breakpoint extra-small (kiri) dan small (kanan)
Jika berminat, silahkan tambah 1 row lagi sehingga total menjadi 8 icon. Untuk daftar gambar
icon bisa dilihat di icons.getbootstrap.com.
13.7. Explore
Explore adalah bagian template ILKOOM Tech yang berisi semacam "pembatas" berupa
informasi singkat berupa teks dan 1 tombol. Kode yang diperlukan juga tidak terlalu banyak,
427
cukup dengan grid sistem, teks, dan tombol:
08.explore.html
1 
2 <section id="explore" class="bg-dark text-white py-5">
4 <div class="row">
5 <div class="col text-center">
6 <h1 class="display-4">Explore</h1>
7 <p class="lead">
8 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
9 Minus voluptate quam, rem possimus ut corrupti velit eaque
10 odit assumenda ipsam fugiat soluta, in vero tenetur omnis
11 at magni voluptatibus adipisci.
12 </p>
13 <a href="#" class="btn btn-outline-light">Find Out More</a>
14 </div>
15 </div>
16 </div>
17 </section>
Tampilan bagian Explore dari ILKOOM Tech template
Sama seperti sebelumnya, bagian ini diawali dengan tag <section> serta class .bg-dark,
.text-white dan .py-5. Hasilnya, teks akan berwarna putih, memiliki background hitam, serta
padding level 5 di sisi top dan bottom.
Berikut terdapat class .container, .row, dan .col di baris 3 – 5. Class .text-center di baris 5
membuat semua teks memiliki rata tengah. Isi teks dibuat dari tag <h1> dengan class
.display-4 serta tag <p> dengan class .lead. Untuk tombol sendiri saya buat dari tag <a>
dengan class .btn dan .btn-outline-light di baris 13.
428
13.8. Team Profile

Selain showcase, team profile ini termasuk bagian yang sangat menarik dari template kita.
Team profile berisi profile singkat dari anggota tim ILKOOM Tech. Bagian ini saya rancang
menggunakan komponen card Bootstrap serta berbagai utility class termasuk bootstrap icon.
Kode yang dibutuhkan cukup panjang karena nantinya terdapat 4 card. Pertama, kita rancang
judul teks terlebih dahulu:
09.our_team.html
1 
2 <section id="team" class="py-5 text-center">
4 <div class="row mb-5">
5 <div class="col">
6 <h1 class="pb-3">Our Team</h1>
8 <p class="lead">Lorem ipsum dolor sit amet consectetur elit.
9 Architecto sit fuga sint magni magnam quaerat?</p>
10 </div>
11 </div>
12
14 
15 </div>
16 </div>
17 </section>
Tampilan judul team profile dari ILKOOM Tech template
Seluruh bagian team profile berada di dalam tag <section> dengan class .py-5 dan .text-
center (baris 1). Kemudian diikuti class .container untuk mengawali grid system (baris 3).
Container ini memiliki 2 buah row, satu untuk membuat judul teks "Our Team" (baris 4- 11)
serta satu lagi akan berisi komponen card (baris 13 – 15). Untuk judul teks "Our Team" tidak
akan saya bahas lagi karena sangat mirip seperti bagian lain yang sudah dirancang sebelumnya
(misalnya judul bagian product dan explore).
429
Berikut kode program untuk membuat card team:
09.our_team.html
1 <div class="col-md-6 col-lg-3">
4 <img src="img/people1.jpg" class="img-fluid rounded-circle w-50 mb-3">
5 <h3>Ilham Saputra</h3>
6 <h5 class="text-muted">Web Programmer</h5>
7 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos
8 laborum necessitatibus aperiam, eius quae labore?</p>
9 <div class="py-3">
10 <a href="#" class="text-secondary text-decoration-none fs-5 me-4">
11 <i class="bi-facebook"></i>
12 </a>
14 <i class="bi-twitter"></i>
15 </a>
16 <a href="#" class="text-secondary text-decoration-none fs-5">
17 <i class="bi-instagram"></i>
18 </a>
19 </div>
20 </div>
21 </div>
22 </div>
23
28 <h3>Sandri Fatmala</h3>
29 <h5 class="text-muted">Web Designer</h5>
35 </a>
38 </a>
41 </a>
42 </div>
43 </div>
44 </div>
45 </div>
46
430
51 <h3>Ocha Lestari</h3>
52 <h5 class="text-muted">UX Designer</h5>
58 </a>
61 </a>
64 </a>
65 </div>
66 </div>
67 </div>
68 </div>
69
74 <h3>Alex Wijaya</h3>
75 <h5 class="text-muted">Creative Producer</h5>
81 </a>
84 </a>
87 </a>
88 </div>
89 </div>
90 </div>
91 </div>
431
Tampilan card team profile ILKOOM Tech template
Terlihat tampilan team profile ini terkesan profesional. Kode programnya memang cukup
panjang karena terdapat 4 profile. Yang berbeda antara satu profile dengan profile lain hanya
di gambar, nama dan jabatan.
Mari kita bahas card pertama yang dimulai dari baris 1 sampai 22. Di bagian luar, terdapat tag
<div> dengan class .col-md-6 dan .col-lg-3. Artinya, card akan tampil full 12 segmen pada
breakpoint extra-small dan small, lalu sebesar 6 segmen di breakpoint middle, dan 3 segmen
di breakpoint large, extra-large dan extra-extra large.
Card sendiri dimulai pada baris 2 dengan class .card, yang diikuti dengan class .card-body di
baris 3. Card body ini terdiri dari 5 bagian:
 Tag <img> di baris 4 untuk menampilkan gambar anggota tim. Class yang dipakai adalah
.img-fluid agar gambar responsive, .rounded-circle supaya gambar tampil berbentuk
lingkaran, .w-50 untuk mengatur lebar gambar sebesar 50%, serta .mb-3 untuk
menambah padding bottom level 3.
 Nama anggota tim dengan tag <h3> di baris 5.
 Jabatan anggota tim dengan tag <h5> dan class .text-muted di baris 6. Class .text-
muted ini mengubah warna teks menjadi abu-abu.
 Penjelasan anggota tim dengan tag <p> di baris 7 – 8. Dalam contoh ini hanya berisi
dummy text "Lorem Ipsum".
 Kumpulan icon media social di baris 9 – 19 yang ditampung oleh tag <div> dengan class
.py-3. Di dalam tag <div> ini terdapat 3 buah tag <a> yang masing-masingnya berisi
432
icon media sosial dari bootstrap icon. Penggunaan class .text-secondary di setiap tag
<a> membuat icon berwarna abu-abu. Class .text-decoration-none untuk menghapus
efek underline untuk link, serta memperbesar ukuran icon lewat class .fs-5.
Card ini saya buat sebanyak 4 kali dengan gambar, nama serta jabatan anggota tim yang
berbeda-beda (baris 24 – 45, baris 47 – 68, serta baris 70 -91). Selain ini, kode programnya
sama persis dengan card pertama.
Silahkan ubah jendela web browser untuk melihat efek transisi pada setiap breakpoint.
13.9. Newsletter
Bagian newsletter ini sangat mirip seperti explore yang sudah kita buat sebelumnya, plus
tambahan sebuah form.
Form newsletter biasa dipakai untuk membuat fitur berlangganan email, dimana pengunjung
diminta mengisi nama dan alamat email untuk mendapatkan berita terbaru seputar ILKOOM
Tech. Namun dalam praktek ini, form newsletter tidak akan berfungsi karena fokus kita hanya
ke sisi design tampilan saja.
Berikut kode program untuk membuat newsletter:
10.newsletter.html
1 
2 <section id="newsletter" class="text-center p-5 bg-dark text-white">
4 <div class="row">
5 <div class="col">
6 <h1>Join Our Newsletter</h1>
7 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi,
8 asperiores facilis magnam possimus ipsum ex harum? Voluptates.</p>
9 </div>
10 </div>
11 <form>
13 <div class="col col-12 col-md-auto ms-auto">
14 <label for="name" class="visually-hidden">Nama</label>
16 </div>
17 <div class="col col-12 col-md-auto">
18 <label for="email" class="visually-hidden">Email</label>
19 <input type="email" class="form-control" placeholder="Alamat Email">
20 </div>
21 <div class="col col-auto mx-auto ms-md-0">
22 <button class="btn btn-secondary" type="submit">
23 Daftar
24 </button>
25 </div>
26 </div>
433
27 </form>
28 </div>
29 </section>
Tampilan bagian Newsletter dari ILKOOM Tech template
Struktur newsletter ini nyaris sama seperti explore. Diawali dengan tag <section>, lalu
beberapa tag <div> untuk membuat grid Bootstrap serta tag <h1> dan <p> untuk membuat
judul teks (baris 2 – 10).
Kode form berada di baris 11 – 27. Struktur grid form dibuat agar menjadi 2 baris untuk
breakpoint small ke bawah dan memanjang 1 baris pada breakpoint middle ke atas. Berikut
tampilan yang dimaksud:
Tampilan newsletter pada breakpoint small (kiri) dan medium (kanan)
Caranya adalah dengan menulis class .col-12 dan .col-md-auto untuk kedua inputan (baris 13
dan 17). Ini berarti kolom memanjang sebanyak 12 segmen, lalu menjadi auto di breakpoint
middle ke atas.
Tag <label> di baris 14 dan 18 menggunakan tambahan class .visually-hidden sehingga tidak
tampil di web browser. Dalam Bootstrap, sebuah tag dengan class .visually-hidden berarti
ditujukan untuk web browser jenis screen reader.
434
13.10. Blog Snippet

Blog snippet adalah bagian template ILKOOM Tech yang menampilkan cuplikan blog. Berikut
tampilan akhirnya:
Tampilan blog snippet dari ILKOOM Tech template
Untuk membuatnya saya menggunakan komponen card Bootstrap. Kode yang dipakai mirip
seperti team profile namun lebih sederhana:
11.blog_snippet.html
1 
2 <section id="blog" class="py-5 bg-light">
4 <div class="row">
6 <h1>Blog Update</h1>
10 </div>
11 </div>
12
14
17 <img class="card-img-top" src="img/blog1.jpg">
19 <h5 class="card-title">Desain Web Inspiratif 2019</h5>
435
20 <p class="card-text">Lorem ipsum dolor, sit amet consectetur

21 adipisicing elit. Facilis, autem.</p>
23 <small class="text-muted">Last updated 3 days ago</small>
24 </p>
25 </div>
26 </div>
27 </div>
28
33 <h5 class="card-title">Sejarah Perkembangan Web Desain</h5>
37 <small class="text-muted">Last updated 2 week ago</small>
38 </p>
39 </div>
40 </div>
41 </div>
42
47 <h5 class="card-title">Cara Membuat Website Sendiri</h5>
51 <small class="text-muted">Last updated 1 month ago</small>
52 </p>
53 </div>
54 </div>
55 </div>
56
57 </div>
58
59 </div>
60 </section>
Masih sama seperti bagian template lain, blog snippet ini berada dalam tag <section> dengan
class .py-5 dan .bg-light (baris 2), kemudian di ikuti tag <div> dengan class .container
sebagai pembuka grid system (baris 3).
Kode program baris 4 – 11 dipakai untuk menampilkan teks "Blog Update", dan caranya juga
sama seperti bagian template lain yang terdiri dari tag <h1>, <hr class="w-25 mx-auto"> dan
<p class="lead">.
Selanjutnya di baris 13 – 51 adalah komponen card Bootstrap. Saya menggunakan grid cards.
dengan class .row-cols-1, .row-cols-sm-2, dan .row-cols-lg-3. Ini berarti blog akan tampil
436
full 1 baris untuk breakpoint extra-small, lalu 2 blog dalam 1 baris untuk breakpoint small serta
3 blog dalam 1 baris untuk breakpoint medium ke atas.
13.11. Footer
Bagian akhir dari template ILKOOM Tech adalah footer. Di sini kita tidak menggunakan
komponen Bootstrap, namun hanya grid system, beberapa utility class dan bootstrap icon.
Berikut kode programnya:
12.footer.html
1 
2 <footer id="main-footer" class="text-white text-center bg-dark py-5">
4 <div class="row">
5 <div class="text-md-start col-md-4 me-auto">
6 <h5>ILKOOM</h5>
8 Aperiam cumque, esse modi maxime veniam nulla delectus dolorem
9 </p>
10 <small>© ILKOOM 2021</small>
11 </div>
12 <div class="text-md-start col-md-4 mt-4 mt-md-0">
13 <h5>Hubungi Kami</h5>
14 <div><i class="bi-envelope fs-5 me-3"></i>andre@ilkoom.com</div>
15 <div><i class="bi-phone fs-5 me-3"></i>(021) 123456</div>
16 <div><i class="bi-globe fs-5 me-3"></i>www.ilkoom.com</div>
17 <div class="pt-3">
18 <a href="#" class="text-white text-decoration-none me-2">
19 <i class="bi-facebook fs-5"></i>
20 </a>
22 <i class="bi-twitter fs-5"></i>
23 </a>
25 <i class="bi-instagram fs-5"></i>
26 </a>
28 <i class="bi-whatsapp fs-5"></i>
29 </a>
31 <i class="bi-github fs-5"></i>
32 </a>
33 </div>
34 </div>
35 </div>
36 </div>
37 </footer>
437
Tampilan footer dari ILKOOM Tech template
Sebagai penampung dari seluruh footer adalah tag <section> dengan class .bg-dark, .text-
white, .text-center dan .py-5 (baris 2). Hasil dari keempat class ini, bagian footer memiliki
background gelap, warna teks putih, teks rata tengah serta padding level 5 di sisi atas dan
bawah.
Footer ini terdiri dari 2 bagian, bagian kiri berisi teks "ILKOOM" serta bagian kanan yang berisi
"Hubungi Kami".
Kolom bagian kiri menggunakan class .text-md-start, .col-md-4 dan .me-auto (baris 5 – 11).
Ini artinya teks akan menjadi rata kiri untuk breakpoint middle ke atas (efek dari .text-md-
start). Secara default kolom mengambil 12 segmen, namun untuk breakpoint middle ke atas
akan mengambil 4 segmen (efek dari .col-md-4). Terakhir class .me-auto di pakai untuk
membuat offset, yakni mendorong kolom selanjutnya ke arah kanan.
Isi dari kolom kiri ini berupa tag <h5> yang berisi teks "ILKOOM", tag <p> yang berisi dummy
teks lorem ipsum, serta tag <small> yang berisi tulisan copyright. Teks "©" merupakan
kode HTML entity untuk karakter ©.
Kolom bagian kanan menggunakan class .text-md-start, .col-md-4, .mt-4 dan .mt-md-0
(baris 12 - 35). Dua class pertama sama seperti kolom kiri, yakni untuk mengatur rata teks dan
lebar segmen pada breakpoint middle ke atas. Class .mt-4 dipakai untuk membuat margin-top
level 4 pada breakpoint extra-small dan small, begitu masuk ke breakpoint middle, margin-
top ini di-set ke level 0 (dihapus) dengan class .mt-md-0. Pengaturan padding seperti ini saya
buat agar tampilan kolom menjadi rapi pada setiap breakpoint.
Isi dari kolom kanan berupa tag <h5> yang berisi teks "Hubungi Kami", yang diikuti dengan 3
bootstrap icon untuk email, telp dan website ILKOOM Tech. Di baris 17 – 33 juga
menggunakan bootstrap icon untuk berbagai media sosial yang tampil secara horizontal.
Utility class seperti .me-3 dan .me-2 berguna agar tampilan icon menjadi lebih rapi.
Berikut tampilan footer pada breakpoint small dan middle:
438
Tampilan footer ILKOOM Tech template dalam breakpoint small (kiri) dan medium (kanan)
Terlihat tampilan footer tetap menarik di setiap breakpoint.
Dengan tambahan bagian footer ini, template ILKOOM Tech sebenarnya sudah selesai. Namun
saya ingin menambah beberapa efek lain agar tampilannya makin menarik.
13.12. Scrollspy
Template yang hanya terdiri dari satu halaman saja sangat pas ditambah fitur scrollspy
Bootstrap. Menu navigasi "floating" yang selalu menempel di sisi atas jendela web browser
merupakan salah satu syarat untuk fitur ini, dan kita sudah membuatnya. Selain itu isi atribut
href dari setiap menu item sudah merujuk ke bagian id dari setiap bagian halaman.
Sebagai contoh, menu item PRODUCT memiliki nilai atribut href="#product", yang jika di klik
jendela web browser akan pindah ke bagian Product and Services (id ="product"). Begitu juga
dengan menu item TEAM yang menuju ke bagian Our Team (id="team").
Silahkan klik setiap menu, dan jendela web browser akan "lompat" ke bagian tersebut.
Jika menu TEAM di klik, tampilan akan lompat ke bagian Our Team
439
Untuk menambahkan efek scrollspy, tambah 3 atribut berikut ke dalam tag <body>:
13.scrollspy.html
<body data-bs-spy="scroll" data-bs-target="#navbarNav" data-bs-offset="200">
Atribut data-bs-spy="scroll" merupakan atribut bawaan Bootstrap untuk membuat

komponen scrollspy, begitu juga dengan atribut data-bs-target yang merujuk ke atribut id
dari menu navigasi, yakni navbarNav.
Atribut data-bs-offset="200" berguna untuk mempercepat efek scrollspy sekitar 200 pixel.
Sebagai contoh, pada saat halaman di scroll dari bagian showcase ke product, menu item yang
aktif akan pindah dari HOME ke PRODUCT begitu bagian id="product" berjarak 200 pixel dari
sisi atas web browser. Tanpa atribut data-offset="200" ini, menu item baru pindah ketika
bagian id="product" menyentuh sisi atas web browser (yang sudah tertutup oleh menu
navigasi).
Silahkan scroll halaman ke atas dan ke bawah untuk melihat efek srcollspy, bagian menu yang
aktif akan terus berpindah sesuai dengan tampilan halaman:
Menu pindah dari HOME ke PRODUCT begitu masuk ke bagian id="product"
Secara internal, setiap menu yang aktif akan memiliki class .active, dan ini sudah kita style
dengan kode CSS (pada saat merancang bagian menu navigasi).
13.13. Animate On Scroll Library (AOS)

Efek menarik lain yang sering dipakai dalam one page tamplate adalah animasi element HTML
yang muncul satu per satu ketika halaman di scroll. Atau yang cukup ekstrim, komponen
halaman ada yang "terbang" dari kiri dan kanan web browser. Animasi seperti ini juga dibuat
menggunakan JavaScript dan biasanya cukup kompleks.
440
Namun terdapat berbagai library yang bisa kita pakai. Library adalah sebutan umum dari kode
program yang ditulis oleh orang lain yang bisa di implementasikan ke kode kita saat ini.
jQuery merupakan library JavaScript, dan dalam aspek tertentu Bootstrap sendiri juga bisa
dibilang sebagai library CSS.
Library yang akan kita pakai adalah Animate On Scroll Library (disingkat sebagai AOS), yang
beralamat di michalsnik.github.io. Silahkan buka halaman tersebut dan scroll ke bawah untuk
melihat apa saja efek yang bisa dibuat.
Tampilan halaman awal Animate On Scroll Library (AOS)
Anda bisa melihat berbagai animasi menarik yang disediakan oleh AOS. Cara penggunaannya
juga sangat mudah, cukup dengan menulis atribut data-aos ke dalam element yang ingin di
animasi-kan.
Sebagai contoh, untuk membuat tag <section id="team"> tampil dengan animasi flip-up,
maka ditulis menjadi <section id="team" data-aos="flip-up"> . Sembari men-scroll
halaman, perhatikan kode yang ada. Inilah atribut yang perlu kita tulis ke dalam element
HTML:
Atribut AOS yang perlu ditulis untuk membuat efek animasi flip-up
Akan tetapi untuk bisa membuat efek ini kita perlu mengakses file CSS dan JavaScript dari
AOS. Sama seperti file Bootstrap, terdapat 2 cara untuk mengakses file library AOS, yakni
menggunakan CDN atau download manual untuk bisa dipakai offline.
441
Yang paling praktis tentu dengan CDN karena kita hanya perlu mengcopy-paste alamat URL
saja. Untuk menggunakan versi CDN, silahkan scroll halaman AOS hingga paling bawah:
Alamat file library AOS di CDN
Berikut alamatnya:
 CSS: <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 JS: <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
Tempatkan setiap tag ini dibagiannya masing-masing: file CSS di bagian <head>, serta file
JavaScript di bagian akhir tag <body>:
15.aos_cdn.html
1 ...
2 <head>
3 ...
7 <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" >
8 </head>
9 ...
10 ...
11
13 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
Kemudian tulis beberapa atribut data-aos ke bagian yang ingin di animasi. Sebagai contoh,
berikut potongan template ILKOOM Tech yang saya tambah dengan atribut data-aos:
15.aos_cdn.html
1 
2 <section id="showoff-1" data-aos="fade-up">
442
3
4 
5 <section id="showoff-2" data-aos="fade-up">
6
7 
8 <section id="product" data-aos="fade-up">
9
10 
11 <section id="explore" data-aos="fade-up">
12
13 
14 <section id="team" data-aos="fade-up">
15 <div class="col-md-6 col-lg-3" data-aos="flip-left">
16 <div class="col-md-6 col-lg-3" data-aos="flip-left">
17 <div class="col-md-6 col-lg-3" data-aos="flip-right">
18 <div class="col-md-6 col-lg-3" data-aos="flip-right">
19
20 
21 <section id="newsletter" data-aos="fade-up">
22
23 
24 <section id="blog" data-aos="fade-up">
Terakhir, kita perlu kode JavaScript untuk mengaktifkan library AOS:
1 AOS.init({
2 once: true,
3 duration: 800,
4 });
Tempatkan kode ini ke dalam tag <script>, bisa sebelum atau sesudah kode untuk membuat
smooth scrolling sebelumnya.
Sekarang, jalankan template ILKOOM Tech dan scroll perlahan ke bawah. Semua element yang
memiliki atribut data-aos akan muncul satu persatu dengan berbagai efek aminasi, sangat
menarik! Jika ingin membuat efek lain, silahkan tambah atribut data-aos ke element tersebut.
Library AOS memiliki berbagai pengaturan terkait bagaimana efek animasi berlangsung. Dalam
contoh di atas saya menggunakan 2 pengaturan: once: true dan duration: 800.
Pengaturan once: true artinya semua efek animasi berlangsung hanya 1 kali saja. Jika sudah
sampai ke bagian bawah dan kita kembali ke atas, efek animasi tidak berulang. Namun jika nilai
ini tidak ditulis, atau ditulis sebagai once: false, animasi akan berlangsung terus-menurus
setiap kali halaman di scroll.
Pengaturan duration: 800 dipakai untuk menentukan durasi animasi, yang artinya setiap
animasi berlangsung selama 800 milisecond (0,8 detik). Silahkan tukar angka ini misalnya
menjadi 500 untuk mempercepat animasi, atau menjadi lebih lama dengan mengisi nilai 1000.
Lebih lanjut tentang pengaturan library AOS bisa mengunjungi github.com/michalsnik/aos.
443
AOS versi offline

Library AOS juga tersedia dalam bentuk file offline. Cara penggunaannya sama seperti file
Bootstrap, yakni download file zip, lalu ambil file CSS dan JavaScript yang diperlukan.
Untuk mendownload file AOS, buka kembali michalsnik.github.io, scroll hingga paling bawah
dan klik tombol Download. Atau bisa juga langsung ke alamat berikut:
github.com/michalsnik/aos/archive/master.zip
Tombol untuk download file library AOS
File yang akan di download bernama aos-master.zip. Buka file ini, lalu cari folder dist. Di
dalam folder dist ini terdapat dua buah file:
 aos.css
 aos.js
Extract dan copy file aos.css ke dalam folder css template kita (belajar_bootstrap/css),
begitu juga dengan file aos.js yang di copy ke dalam file js (belajar_bootstrap/js).
Copy file aos.css ke folder css, dan file aos.js ke folder js
Setelah itu akses kedua file ini menggunakan tag <link> dan <script>, sama seperti versi
CDN:
15.aos_offline.html
1 ...
2 <head>
3 ...
444

7 <link rel="stylesheet" href="css/aos.css">
8 </head>
9 ...
10 ...
12 <script src="js/aos.js"></script>
13 <script>
14 AOS.init({
15 once: true,
16 duration: 800,
17 });
18 </script>
Untuk bagian lain tidak ada perubahan kode (sama seperti versi CDN sebelumnya). Sekarang
efek AOS bisa berjalan secara offline.
13.14. Menonaktifkan Breakpoint XXL

Salah satu fitur tambahan di Bootstrap 5 adalah mendukung hingga breakpoint XXL. Efek dari
hal ini, lebar maksimal class .container menjadi lebih besar dibandingkan Bootstrap 4, yakni
dari 1140px menjadi 1320px.
Ini lebih ke kesukaan masing-masing web designer, tapi bagi saya 1320px ini terasa terlalu
lebar. Salah satu caranya adalah membuat kode CSS untuk membatasi lebar maksimal class
.container hingga 1140px saja, atau sama dengan lebar breakpoint XL. Silahkan tambah kode
berikut ke file style.css:
1 @media (min-width: 1200px) {

2 .container {
3 max-width: 1140px;
4 }
5 }
Kode ini akan menimpa class .container bawaan Bootstrap agar tidak melebar lebih dari
1140px, atau bisa juga disebut bahwa kita menonaktifkan breakpoint XXL.
Berikut perbandingan lebar dari sebelum dan sesudah penambahan kode di atas:
445
Gambar: Breakpoint XXL aktif (atas) dan tidak aktif (bawah)
Terlihat tampilan pertama (atas) lebih lebar dibandingkan tampilan kedua (bawah). Perbedaan
ini hanya bisa terlihat di monitor dengan resolusi lebih dari 1200px, agar lebar breakpoint XXL
bisa terpenuhi.
Kembali, pembatasan ini lebih ke kesukaan masing-masing web designer dan tidak wajib
ditambahkan.
---
Daan... template ILKOOM Tech kita telah selesai. Hasilnya tidak kalah dengan template
website modern dan sudah full responsive. Silahkan luangkan waktu sejenak untuk utak-atik
kode template ini, misalnya menambah komponen Bootstrap lain seperti carousel, accordion,
dll.
Jika butuh tantangan lebih, kita akan masuk ke studi kasus kedua, yakni template ILKOOM
Community.
446
ILKOOM Community Blog Template
14. ILKOOM Community Blog Template
Kita masuk ke studi kasus kedua, yakni pembuatan template ILKOOM Community Blog.
Dalam banyak hal, template kali ini lebih lengkap (dan juga lebih kompleks) daripada template
ILKOOM Tech sebelumnya. Di sini kita akan membuat 5 halaman HTML: Home (index.html),
Blog (blog.html), Article (article.html), Gallery (gallery.html) dan Login (login.html).
Template ILKOOM Community Blog saya rancang untuk sebuah website membership, dimana
setiap member bisa membuat artikel, blog dan gallery sendiri. Tapi ini sebenarnya hanya
sebuah template "generik" berupa gabungan berbagai fitur umum biasa ada di sebuah website.
Sebelum masuk ke kode program, berikut tampilan akhir dari ILKOOM Community yang akan
kita buat:
Halaman Home
Tampilan halaman Home (index.html)
447
Tampilan halaman Home (index.html)
Halaman home ini cukup panjang dan terdiri dari 10 bagian, yakni:
 Menu Navigasi
 Main Slider
 Showoff
 Explore
 Membership
 Member Showcase
 Paid Membership Features
 Total Showcase
 Member List
 Footer
448
Beberapa bagian adalah hasil modifikasi dari template ILKOOM Tech sebelumnya, seperti
showoff, explore dan paid membership features.
Halaman Blog
Tampilan halaman Blog (blog.html)
449
Halaman blog ini berisi daftar artikel yang umum kita jumpai di website yang berbentuk blog.
Di sisi kanan terdapat sidebar yang menampilkan slider, post category, dan komentar. Di
bagian bawah daftar artikel terdapat tombol pagination untuk berpindah ke halaman
berikutnya.
Halaman Article
Tampilan halaman Article (article.html)
Sesuai namanya, halaman article ini berbentuk artikel lengkap dengan kolom komentar di sisi
bawah. Di samping kanan juga memiliki sidebar yang sama seperti pada halaman blog.
Di bagian akhir artikel terdapat profile penulis, kumpulan komentar serta form untuk mengisi
komentar.
450
Halaman Gallery
Tampilan halaman Gallery (gallery.html)
Halaman gallery terdiri dari kumpulan gambar. Khusus untuk halaman ini saya akan
menggunakan library Lightbox2. Library ini dipakai untuk membuat lightbox, yakni efek ketika
thumbnail gambar di klik, versi full akan tampil di atas halaman saat ini (mirip seperti
komponen modal Bootstrap). Saya juga yakin anda sudah sering melihat efek seperti ini:
Tampilan efek lighbox di halaman Gallery
451
Halaman Login
Tampilan halaman Login (login.html)
Halaman login ini hanya berisi sebuah form login untuk member ILKOOM Community. Namun
kita juga hanya fokus ke sisi design saja dan tidak masuk ke pemrosesan login yang
sebenarnya.
Modern Template = Bootstrap + CSS + Design

Seperti yang terlihat, tampilan ILKOOM Community Blog template ini tidak kalah dengan
sebuah template profesional. Tapi seperti yang akan kita pelajari nanti, saya menggunakan
cukup banyak kode CSS untuk membuatnya (tidak hanya Bootstrap saja).
Dalam banyak hal, Bootstrap memang memudahkan kita membuat design website, tapi untuk
bisa menghasilkan karya yang "beda", Bootstrap ini harus di padu dengan kode CSS biasa. Jika
hanya mengandalkan Bootstrap saja, design tersebut akan terlihat sangat biasa.
Baik, mari mulai masuk ke kode program.
14.1. Struktur File dan Folder

Struktur file dan folder dari template ILKOOM Community tidak berbeda dengan template
ILKOOM Tech sebelumnya, yakni 1 file HTML utama bernama index.html serta folder css,
font, img dan js.
452
Folder css berisi file bootstrap.css dan style.css. File style.css dipakai untuk membuat
kode CSS external (saat ini belum berisi kode apapun). Folder js berisi file bootstrap.
bundle.js. Sedangkan folder font berisi file css untuk membuat bootstrap icon.
Struktur file dari template ILKOOM Community
Untuk folder img, silahkan copy seluruh gambar dari folder bab_14_ILKOOM_community_
template/img yang ada di dalam file belajar_bootstrap.zip. Dalam template ini saya
menggunakan cukup banyak gambar, total terdapat 42 gambar dengan berbagai variasi
ukuran.
Seluruh gambar yang akan dipakai untuk membuat template ILKOOM Community
Gambar-gambar ini juga saya ambil dari situs pexels.com, unsplash.com, atau pixabay.com.
Template ILKOOM Community sendiri perlu cukup banyak kode program. Halaman home.html
saja butuh lebih dari 800 baris kode (2x lipat template ILKOOM Tech). Belum termasuk kode
CSS di dalam file style.css (150 baris), serta 4 halaman lain yang rata-rata berisi 300 – 400
baris kode (blog.html, article.html, gallery.html dan login.html).
Cara pembahasan kode akan sama seperti template ILKOOM Tech, dimana saya membahasnya
453
per bagian. Kecuali dinyatakan lain, setiap bagian adalah penambahan dari bagian sebelumnya.
Khusus untuk dummy teks "lorem ipsum" yang cukup panjang, akan di potong dan diganti
dengan tanda titik tiga " ... ". Anda bisa memakai shortcut emmet untuk menggenerate dummy
teks ini dari dalam VS Code (ketik "lorem" tanpa tanda kutip, lalu tekan tombol tab).
Untuk mempersingkat pembahasan, kita hanya akan fokus ke sesuatu yang baru di dalam kode
program. Saya tidak akan membahas class Bootstrap yang cukup umum, terutama utility class
seperti .text-center, .bg-primary, .bg-info, .text-white, serta class padding atau margin
seperti .py-5, .mt-2, atau .p-5. Jika anda sudah mengikuti pembahasan template ILKOOM
Tech sebelumnya, saya yakin class-class ini sudah bisa dipahami.
14.2. Template Awal

Template awal ILKOOM Community sama seperti ILKOOM Tech, berikut kode programnya:
01.index_awal.html
1 <!DOCTYPE html>
2 <html lang="id">
3 <head>
6 <title>ILKOOM - Community Blog</title>
7 <link rel="icon" href="img/favicon.png" type="image/png">
11 </head>
12 <body>
13
15 </body>
16 </html>
Selain kode standar untuk mengakses file Bootstrap dan bootstrap icon, saya juga mengubah
isi tag <tittle> menjadi ILKOOM - Community Blog (baris 6), serta menampilkan favicon.png
dengan tag <link rel="icon"> (baris 7). File CSS external juga sudah diakses di baris 10.
Tampilan gambar favicon dan title "ILKOOM - Community Blog "
454
14.3. Menu Navigasi

Untuk menu navigasi, saya tetap menggunakan komponen navbar Bootstrap dengan kode
berikut:
02.menu_navigasi.html
1 
2 <nav id="main-navbar" class="navbar navbar-expand-md navbar-dark bg-dark py-0">
4 <a class="navbar-brand" href="index.html">
5 <span class="d-none" >ILKOOM</span>
6 <img src="img/ilkoom_logo.png" class="main-logo d-none d-md-inline"
7 alt="ilkoom logo">
8 <img src="img/ilkoom_logo.png" class="small-logo d-inline d-md-none"
9 alt="ilkoom logo">
10 </a>
14 </button>
15
17 <ul class="navbar-nav ms-auto">
19 <a class="nav-link p-4 active" href="index.html">Home</a>
20 </li>
22 <a class="nav-link p-4" href="blog.html">Blog</a>
23 </li>
25 <a class="nav-link p-4" href="article.html">Article</a>
26 </li>
28 <a class="nav-link p-4" href="gallery.html">Gallery</a>
29 </li>
31 <a class="nav-link p-4" href="login.html">Login</a>
32 </li>
33 </ul>
34 </div>
35
36 </div>
37 </nav>
455
Tampilan awal menu navigasi ILKOOM Community (tanpa kode CSS)
Perintah yang ada tetap merujuk ke struktur standar komponen navbar Bootstrap. Tag <nav>
yang melingkupi seluruh navbar saya set dengan atribut id="main-navbar", ini nantinya bisa
dipakai untuk membuat selector CSS. Breakpoint middle menjadi patokan perubahan
hamburger menu dengan menu horizontal (efek dari class .navbar-expand-md).
Dalam tag <nav> ini juga terdapat class .navbar-dark dan .bg-dark, keduanya dipakai untuk
membuat tampilan navbar dengan background warna hitam dan teks putih (sedikit abu-abu).
Berikutnya terdapat komponen navbar brand di baris 4 – 10. Di sini saya menggunakan
gambar logo yang bernama ilkoom_logo.png, dan terdapat 2 buah tag <img>. Kenapa harus 2
buah? Ini berkaitan dengan efek CSS yang nanti akan dibuat. Kedua gambar ini akan tampil
bergantian.
Tag <img> pertama (baris 6 – 7) memiliki class .main-logo, .d-none, dan .d-md-inline. Class
.main-logo adalah costum class yang saya buat sendiri untuk kode CSS nanti (bukan class
Bootstrap). Perpaduan class .d-none dan .d-md-inline artinya tag <img> ini secara default
tidak tampil (display:none), dan baru akan tampil pada saat masuk ke breakpoint middle ke
atas.
Tag <img> kedua (baris 8 – 9) memiliki class .small-logo, .d-inline, dan .d-md-none. Sama
seperti class .main-logo, class .small-logo adalah costum class yang dipersiapkan untuk kode
CSS nanti. Perpaduan class .d-inline dan .d-md-none artinya tag <img> ini secara default
tampil normal (display:inline), namun begitu masuk ke breakpoint middle, tag ini akan
disembunyikan (display:none).
Dengan demikian, pada breakpoint extra-small dan small, tag <img> yang aktif adalah kedua
(small-logo). Begitu masuk ke breakpoint middle, tag <img> kedua ini akan disembunyikan
dan yang tampil adalah tag <img> pertama (main-logo).
Saya membuat struktur seperti ini karena ingin membedakan tampilan logo ketika di akses
dari smartphone dengan versi desktop.
Selanjutnya kode di baris 11 – 14 dipakai untuk membuat tombol hamburger menu. Ini sama
seperti bawaan Bootstrap.
456
Menu item ditulis pada baris 16 – 34. Saya kembali menggunakan class .ms-auto di baris 17
agar menu item di dorong ke sisi kanan. Hasilnya, di sisi kiri hanya terdiri dari gambar nav
brand saja.
Masing-masing menu item menggunakan class .p-4 agar tampilannya lebih besar. Setiap tag
<a> sudah berisi alamat link ke halaman terpisah, seperti menu BLOG yang berisi atribut
href="blog.html". Karena kita berada di halaman utama ( index.html), maka tag <a> di baris 19
memiliki tambahan class .active.
Lanjut, kita masuk ke kode CSS:
style.css
1 /* NAVBAR */
2
3 #main-navbar .nav-link{
4 border-bottom: 5px solid #212529;
5 color: #e2e1e1;
6 }
7 #main-navbar .nav-link:hover, #main-navbar a.active {
8 border-bottom: 5px solid #17a2b8;
9 color: white;
10 }
11
12 .main-logo {
13 height: 100px;
14 margin-bottom: -70px; /* Supaya logo offset ke bawah */
15 }
16 .small-logo {
17 height: 60px; /* Untuk logo kecil di footer */
18 }
Kode CSS di baris 3 – 6 dipakai untuk mengubah tampilan menu itu agar memiliki border
bottom 5 pixel, solid dengan warna #212529. Kode warna ini sama seperti warna background
navbar. Kemudian ubah warna teks menjadi #e2e1e1 (abu-abu).
Kode CSS di baris 7 – 10 dipakai untuk mengubah tampilan menu ketika di hover, atau jika
memiliki class .active, yaitu dengan border bottom 5 pixel, solid dengan kode warna #17a2b8
(hijau kebiruan). Kemudian ubah warna teks menjadi putih.
Kedua class ini pada dasarnya dipakai untuk membuat efek yang sama seperti pada contoh
tamplate ILKOOM Tech.
Kode CSS di baris 12 – 15 dipakai untuk mengubah tampilan gambar .main-logo memiliki
tinggi 100 pixel dan margin-bottom: -70px. Margin bottom dengan nilai negatif ini akan
membuat tampilan logo "melimpah" ke bawah. Dan kode CSS di baris 16 – 18 dipakai untuk
mengubah tinggi gambar .small-logo menjadi 60 pixel.
Berikut hasil akhir navbar dengan kode CSS di atas:
457
Tampilan menu navigasi ILKOOM Community untuk breakpoint extra-small, medium, dan large
Gambar di kiri atas adalah tampilan dalam breakpoint extra-small. Perhatikan ukuran logo
cukup kecil dan masuk ke dalam navbar.
Gambar di kanan atas dan bawah adalah tampilan dalam breakpoint middle dan large.
Sekarang gambar logo lebih besar dan "melimpah" ke arah bawah akibat penggunaan margin-
bottom:-70px. Trik negatif margin ini sering dipakai untuk membuat efek yang menarik.
Selain ukuran logo, kode CSS sebelumnya juga mengubah efek hover menu item. Ketika cursor
mouse berada di atas menu item (hover), akan tampil efek garis berwarna biru kehijauan di
bagian bawah.
14.4. Main Slider

Main slider adalah gambar besar yang tampil di bawah menu navigasi. Ini mirip seperti
tampilan showcase di ILKOOM Tech, tapi kali ini saya menggantinya dengan sebuah slider
yang dibuat dari komponen carousel Bootstrap.
Kode programnya cukup panjang karena terdapat 4 buah slider:
03.slider.html
1 
2 <header id="main-slide">
3
4 <div id="mySlide" class="carousel slide carousel-fade" data-bs-ride="carousel">
5
6 <div class="carousel-indicators">
7 <button type="button" data-bs-target="#mySlide" data-bs-slide-to="0"
8 class="active"></button>
9 <button type="button" data-bs-target="#mySlide" data-bs-slide-to="1">
10 </button>
458

12 </button>
14 </button>
15 </div>
16
17 <div class="carousel-inner text-white">
18 <div class="carousel-item active" id="slide1">
20 <div class="d-none d-md-block">
21 <h1 class="display-1 bg-info px-4 pb-2 d-inline-block">
22 Get<strong> Inspired</strong>
23 </h1>
24 <br>
25 <p class="bg-dark px-2 pb-1 d-inline-block">Lorem ipsum dolor, sit
26 amet consectetur adipisicing elit. Aut cumque molestias asperiores
27 ipsam officiis? Doloremque.</p>
28 </div>
29 </div>
30 </div>
31 <div class="carousel-item" id="slide2">
33 <div class="d-none d-md-block text-end">
34 <h1 class="display-1 bg-dark px-4 pb-2 d-inline-block">
35 Take<strong> Action</strong>
36 </h1>
37 <br>
38 <p class="bg-info px-2 pb-1 d-inline-block">Lorem ipsum dolor, sit
41 </div>
42 </div>
43 </div>
46 <div class="d-none d-md-block">
47 <h1 class="display-1 bg-info px-4 pb-2 d-inline-block">
48 Be<strong> Social</strong>
49 </h1>
50 <br>
51 <p class="bg-dark px-2 pb-1 d-inline-block">Lorem ipsum dolor, sit
54 </div>
55 </div>
56 </div>
59 <div class="d-none d-md-block text-end">
60 <h1 class="display-1 bg-dark px-4 pb-2 d-inline-block">
61 Find<strong> Stories</strong>
62 </h1>
63 <br>
64 <p class="bg-info px-2 pb-1 d-inline-block">Lorem ipsum dolor, sit
459

67 </div>
68 </div>
69 </div>
70 </div>
71
72 <button class="carousel-control-prev" type="button" data-bs-target="#mySlide"
73 data-bs-slide="prev">
76 </button>
77 <button class="carousel-control-next" type="button" data-bs-target="#mySlide"
78 data-bs-slide="next">
81 </button>
82
83 </div>
84 </header>
Kode untuk slider ini tidak banyak perubahan dari komponen carousel Bootstrap. Jika butuh
penjelasan lebih detail, bisa balik sejenak ke pembahasan tentang komponen tersebut.
Baris 2 berisi tag <header id="main-slide"> yang menjadi tag pembuka sekaligus sebagai
"container" yang penampung seluruh kode slider.
Baris 4 berisi tag <div> dengan class .carousel, .slide dan .carousel-fade. Inilah tag awal
pembuatan slider. Baris 6 – 15 dipakai untuk membuat indikator slider (.carousel-indicators).
Baris 17 – 70 merupakan komponen inti dari slider. Di sinilah gambar dan isi teks slider ditulis.
Akan tetapi jika diperhatikan tidak terdapat tag <img>, kenapa? Karena saya akan menginput
gambar slider dari CSS (menggunakan property background-image). Teknik ini dipakai agar
posisi teks di dalam slider bisa diatur dengan lebih fleksibel.
Jika gambar diinput langsung menggunakan tag <img> sebagaimana kode carousel standar
Bootstrap, teks slider sudah otomatis berada di sisi bawah gambar dan cukup susah untuk
dipindah.
Untuk mengakses masing-masing slider dari CSS, saya menambah atribut id ke setiap slider,
yakni id="slide1" di baris 18, id="slide2" di baris 31, id="slide3" di baris 44, dan
id="slide4" di baris 57.
Dalam setiap slider terdapat tag <h1> dan <p> yang dipakai untuk menampilkan teks. Kedua
tag memiliki beberapa class agar tampilannya lebih menarik.
Sebagai contoh untuk slide1, tag <h1> di baris 21 – 23 memiliki class .display-1, .bg-info,
.px-4 , .pb-2 dan d-inline-block. Ini membuat teks tampil dengan huruf besar (efek dari class
.display-1), berwarna hijau kebiruan (efek dari class .bg-info) memiliki jarak padding (efek
dari class .px-4 dan .pb-2), serta tampil sebagai inline-block element (efek dari class .d-
inline-block). Semua class dipakai untuk membuat efek yang cukup menarik. Hal yang sama
460
juga diterapkan untuk tag <p> di baris 25 – 27 namun dengan warna background .bg-dark.
Pasangan tag <h1> dan <p> ini berada di dalam tag <div> dengan class .d-none dan .d-md-
block (baris 20). Maka teks hanya tampil di breakpoint medium ke atas dan akan hilang ketika
masuk ke breakpoint small dan extra-small.
Sisa 3 slider selanjutnya juga memiliki class yang sama, namun secara selang-seling untuk
warna teks dan warna background (antara .bg-dark dengan .bg-info).
Terakhir, kode di baris 72 – 81 dipakai untuk menampilkan tombol panah sebagai mekanisme
memajukan dan memundurkan slider (tombol next dan prev).
Berikut tampilan dari slider ini:
Tampilan awal slider ILKOOM Community (tanpa kode CSS)
Tampilan slider tampak berantakan karena masih perlu tambahan kode CSS. Namun di sini
bisa terlihat teks untuk setiap slider. Anda bisa test klik tombol next atau prev untuk
berpindah dari satu slide ke slide berikutnya.
Masuk ke kode CSS, silahkan buka file style.css lalu update dengan kode berikut:
style.css
1 /* MAIN SLIDER - Halaman Home */
2
3 #main-navbar{
4 z-index: 100; /* Agar logo tidak tertutup slider */
5 }
6
7 #main-slide .carousel-item{
10 width: 100%;
11 height: 90vh;
13 background-position: center;
14 }
15
461
16 .bg-info{ /* Agar warna background bg-info sedikit lebih gelap */

17 background-color: #17a2b8 !important;
18 }
19
20 #main-slide h1 {
21 margin-top: 50vh; /* Posisikan teks di tengah slider */
22 }
23
24 #slide1{
25 background-image: url('../img/full-image13.jpg');
26 }
27
28 #slide2{
30 }
31
32 #slide3{
34 }
35
36 #slide4{
38 }
Kode CSS di baris 3 – 5 dipakai untuk mengatur posisi z-index menu navigasi. Seperti yang
terlihat dari tampilan gambar sebelumnya, logo ILKOOM Community yang sedikit ke bawah
tertutup oleh slider. Dengan mengatur nilai z-index menu navigasi menjadi 100, gambar logo
ini akan selalu tampil di atas slider.
Kode di baris 7 – 14 dipakai untuk mengatur ukuran slider. Lebar slider sebesar 100% dan tinggi
slider sebesar 90vh atau 90% dari tinggi layar.
Di baris 16 – 18 terdapat kode untuk mengatur ulang warna class .bg-info bawaan Bootstrap
agar lebih gelap. Ini karena saya merasa warna baru .bg-info di Bootstrap 5 terasa terlalu
terang. Perintah !important dibutuhkan karena kita ingin menimpa nilai yang sama milik
Bootstrap.
Kode di baris 20 – 22 dipakai untuk mengatur posisi teks slider menggunakan property
margin-top: 50vh, yang artinya tag <h1> slider akan terdorong sekitar 50% dari tinggi layar.
Selanjutnya kode di baris 24 – 38 berguna untuk mengatur jenis gambar background. Semua
gambar ini sudah tersedia di dalam folder img. Masing-masing gambar memiliki resolusi yang
cukup tinggi karena akan tampil memenuhi seluruh layar. Berikut hasilnya:
462
Tampilan akhir slider ILKOOM Community (dengan kode CSS)
Tampilan yang sangat menarik. Dan karena ini adalah sebuah slider, gambar akan berganti
secara berkala. Silahkan juga tes ubah ukuran web browser, ketika masuk ke breakpoint small,
teks di slider akan menghilang (karena efek class .d-none dan .d-md-block).
14.5. Showoff
Bagian showoff ini sangat mirip seperti yang ada di template ILKOOM Tech, namun kali ini
dengan tambahan sebuah tombol. Berikut kode yang dibutuhkan:
04.showoff.html
1 
2 <section id="showoff-1" class="text-muted py-5">
4 <div class="row">
6 <img src="img/image1.jpg" alt="" class="img-fluid mb-3 img-thumbnail">
7 </div>
9 <h2>Let's Build Community</h2>
10 <p class="lead">Lorem ipsum dolor sit amet consectetur adip...</p>
11 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit....</p>
12 <button class="btn btn-outline-info">Learn More</button>
13 </div>
14 </div>
15 </div>
16 </section>
17
18 
463
19 <section id="showoff-2" class="bg-light text-muted py-5">

23 <h2>Find Solution for Every Problem</h2>
24 <p class="lead">Duis condimentum augue id magna semper...</p>
25 <p>Nemo enim ipsam voluptatem quia voluptas sit aspern...</p>
26 <button class="btn btn-outline-info mb-3">Learn More</button>
27 </div>
29 <img src="img/image2.jpg" alt="" class="img-fluid mb-3 img-thumbnail">
30 </div>
31 </div>
32 </div>
33 </section>
Tampilan bagian showoff ILKOOM Community
Jika dibandingkan dengan bagian showoff dari template ILKOOM Tech, di sini saya menambah
class .img-thumbnail ke dalam tag <img> untuk membuat efek border putih (baris 6 dan 29).
Selain itu terdapat tambahan tag <button> untuk membuat tombol (baris 12 dan 26).
Sisanya, kode ini sama seperti di template ILKOOM Tech sehingga tidak akan saya bahas lagi.
Selain itu saya juga ingin menambah kode CSS untuk mengubah warna tombol "Learn More":
style.css
1 /* SHOW OFF - Halaman Home */
2
464
3 .btn-outline-info {
4 color: #17a2b8;
5 border-color: #17a2b8;
6 }
7
8 .btn-outline-info:hover {
9 background-color: #17a2b8;
11 color: white;
12 }
Alasan penambahan kode ini juga sama seperti di slider, karena saya merasa warna tombol
.btn-outline-info bawaan Bootstrap 5 terasa terlalu terang.
14.6. Explore
Bagian explore ini juga mirip seperti yang ada di template ILKOOM Tech. Berikut kode
programnya:
05.explore.html
1 
2 <section id="explore">
3 <div class="dark-overlay">
5 <div class="row">
8 <h1 class="display-4">Explore</h1>
9 <p class="lead">
10 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
11 Minus voluptate quam, rem possimus ut corrupti velit eaque
12 odit assumenda ipsam fugiat soluta, in vero tenetur omnis
13 at magni voluptatibus adipisci.
14 </p>
15 <a href="#" class="btn btn-outline-dark">Find Out More</a>
16 </div>
17 </div>
18 </div>
19 </div>
20 </div>
21 </section>
465
Tampilan bagian explore ILKOOM Community (tanpa kode CSS)
Sedikit perbedaan, terdapat tag <div class="dark-overlay"> yang melingkupi seluruh kode
explore (baris 3). Dan bisa di tebak bahwa ini saya siapkan untuk kode CSS. Silahkan buka file
style.css dan tambah kode berikut:
style.css
1 /* EXPLORE - Halaman Home */
2
3 #explore {
8 }
9 #explore .dark-overlay {
10 background-color: rgba(0,0,0,0.2);
11 width: 100%;
12 }
Tampilan bagian explore ILKOOM Community (dengan kode CSS)
Kode CSS di baris 3 – 8 dipakai untuk menambah gambar background ke dalam explore,
sedangkan kode di baris 9 – 12 dipakai untuk membuat efek overlay. Efek overlay ini sengaja
saya buat tidak terlalu gelap agar gambar background bisa tetap terlihat.
466
Gambar background untuk explore di set sebagai fixed (property CSS background-
attachment:fixed), hasilnya terdapat efek menarik pada saat halaman di scroll.
14.7. Membership
Membership adalah bagian template ILKOOM Community yang berbentuk pricing section,
yakni bagian yang biasa dipakai untuk membuat jenis dan biaya berlangganan sebuah produk.
Berikut tampilan yang di maksud:
Tampilan bagian membership ILKOOM Community
Untuk membuat tampilan ini saya menggunakan komponen card Bootstrap. Tanda checklist
dalam bulatan hitam berasal dari bootstrap icon.
Kode program yang diperlukan untuk membuatnya lumayan panjang karena terdapat 3 card
yang harus ditulis. Dengan mempertimbangkan ada yang mengetik ulang kode ini, saya akan
tampilkan seluruh kode programnya:
06.membership.html
1 
2 <section id="membership" class="py-5">
4 <div class="row">
6 <h1>Membership Levels</h1>
467

8 <p class="lead">From individuals to large enterprises, our pricing
9 plans help learners access the depth and breadth of the expert
10 content they need to solve in-the-moment challenges or learn for
11 a lifetime. Compare and pick the option that’s right for you.</p>
12 </div>
13 </div>
14
16
17 <div class="col-md-4 mt-4 ">
19 <div class="card-header bg-dark text-white">
20 <h3 class="pt-2">Premium 1 Month</h3>
21 </div>
23 <p class="h5 text-danger"><s>Rp 200.000</s></p>
24 <h3 class="card-title"><strong>Rp. 150.000</strong></h3>
25 <p class="card-text">Cum sociis natoque penatibus et magnis
26 parturient montes, nascetur ridiculus mus.</p>
28 <ul class="list-unstyled text-start">
29 <li class="m-2 ms-3">
30 <i class="bi-check-circle-fill me-2"></i>View Site Activity
31 </li>
33 <i class="bi-check-circle-fill me-2"></i>View Members Directory
34 </li>
36 <i class="bi-check-circle-fill me-2"></i>Access to Groups Directory
37 </li>
39 <i class="bi-check-circle-fill me-2"></i>Premium Online Course
40 </li>
42 <i class="bi-check-circle-fill me-2"></i>Online and Phone Support
43 </li>
44 </ul>
45 </div>
46 <div class="card-footer text-muted d-flex ">
47 <a href="#" class="btn btn-info flex-grow-1">Register</a>
48 </div>
49 </div>
50 </div>
51
52 <div class="col-md-4 mt-4">
55 <h3 class="pt-2">Premium 6 Month</h3>
56 </div>
58 <p class="h5 text-danger"><s>Rp 1.200.000</s></p>
59 <h3 class="card-title"><strong>Rp. 750.000</strong></h3>
60 <p class="card-text">Class aptent taciti sociosqu ad torquent
61 conubia nostra, per inceptos hymenaeos.</p>
468

66 </li>
69 </li>
72 </li>
75 </li>
78 </li>
79 </ul>
80 </div>
83 </div>
84 </div>
85 </div>
86
87 <div class="col-md-4 mt-4">
90 <h3 class="pt-2">Premium 1 Year</h3>
91 </div>
93 <p class="h5 text-danger"><s>Rp 2.400.000</s></p>
94 <h3 class="card-title"><strong>Rp. 1.300.000</strong></h3>
95 <p class="card-text">Morbi leo mi, nonummy eget tristique non,
96 rhoncus non leo. Aliquam erat volutpat.</p>
101 </li>
104 </li>
107 </li>
110 </li>
113 </li>
114 </ul>
115 </div>
469

118 </div>
119 </div>
120 </div>
121
122 </div>
123
124 </div>
125 </section>
Yup, butuh 125 baris kode untuk membuatnya. Tapi sebenarnya bisa lebih singkat sebab ada
beberapa baris yang harus saya pecah karena melebihi lebar buku.
Pembuatan membership dibuka oleh tag <section> dengan id="membership" di baris 2. Class
.py-5 dipakai untuk membuat padding top dan bottom level 5 agar memiliki jarak dengan
bagian template lain.
Di baris 3 terdapat class .container sebagai pembuka grid system Bootstrap. Di dalamnya
terdapat 2 row, row pertama di baris 4 – 13 adalah untuk membuat judul teks "Membership
Level", sedangkan row kedua akan berisi 3 card untuk membuat pricing section (baris 15 – 122).
Kode yang dipakai pada ketiga card mirip satu sama lain, yang berbeda hanya di bagian teks,
oleh karena itu kita akan bahas card pertama saja (baris 17 – 50).
Di baris 17, terdapat tag <div> dengan class .col-md-4 dan .mt-4, artinya card ini akan
mengambil lebar sebesar 4 segmen pada breakpoint middle ke atas. Untuk tampilan
breakpoint small dan extra-small, lebar card menjadi 12 segmen (satu baris penuh).
Card dibuka dengan tag <div> yang memiliki class .card dan .text-center, artinya semua
teks akan memiliki rata tengah (baris 18).
Baris 19 – 21 dipakai untuk membuat card header, yakni kolom bagian atas dari pricing section.
Class yang dipakai berupa .card-header, .bg-dark dan .text-white. Hasilnya, teks "Premium 1
Month" akan berwarna putih dengan background hitam.
Isi card atau card body dimulai dari baris 22. Di dalamnya terdapat tag <p> serta tag <h3> yang
dipakai untuk membuat harga layanan (baris 23 – 27). Untuk membuat efek harga tercoret,
saya menggunakan tag <s> di baris 23.
Setelah teks harga, diikuti dengan fitur-fitur layanan di baris 28 – 44. Di sini saya
menggunakan bootstrap icon .bi-check-circle-fill sebagai penanda list. Beberapa utility
class margin dipakai untuk mengatur tampilan list agar lebih rapi.
Sebagai penutup, di dalam class card footer terdapat tag <a> yang di-style menyerupai button
(baris 46 – 48). Class .d-flex yang digabung dengan .flex-grow-1 dipakai agar tombol ini
melebar memenuhi parent element.
Sisa kode program, yakni baris 52 – 85 serta baris 87 – 120 adalah kode untuk membuat card
kedua dan ketiga. Isinya kurang lebih sama seperti card pertama yang sudah kita bahas. Yang
470
membedakan hanya di bagian judul dan harga layanan. Dalam project sebenarnya, tentu
sistem harga ini akan berbeda-beda tergantung paket yang diambil oleh pelanggan web kita.
Agar warna tombol "Register" tidak terlalu terang, saya modif ulang dengan kode CSS berikut:
style.css
1 /* MEMBERSHIP - Halaman Home */
2
3 .btn-info {
4 color: white;
5 background-color: #17a2b8;
7 }
8
9 .btn-info:hover {
10 color: white;
11 background-color: #138496;
12 border-color: #117a8b;
13 }
Kode ini dipakai untuk mengubah warna dasar .btn-info bawaan Bootstrap.
14.8. Member Showcase

Member showcase adalah bagian template ILKOOM Community yang berisi foto member
yang sudah terdaftar. Struktur dasarnya mirip seperti bagian explore dengan penambahan
gambar. Berikut kode yang dibutuhkan:
07.member_showcase.html
1 
2 <section id="member-showcase" class="py-5 bg-light">
4 <div class="row">
6 <h1>Our Member</h1>
10 </div>
11 </div>
14 <img src="img/people1.jpg" class="rounded-circle img-thumbnail m-2">
471

25 </div>
26 </div>
29 <button class="btn btn-outline-info mx-auto">View More Member</button>
30 </div>
31 </div>
32 </div>
33 </section>
Tampilan bagian member showcase ILKOOM Community (tanpa CSS)
Seperti biasa, bagian ini dimulai oleh sebuah tag <section> kemudian diikuti dengan class
.container untuk membuat grid di baris 3.
Row pertama di baris 4 – 11 beris tag <h1> dengan teks "Our Member" dan sebuah tag <p> yang
berisi dummy text "Lorem ipsum".
Row kedua di baris 11 – 26 berisi 11 tag <img> yang menampilkan gambar profile dari setiap
member. Tag <img> ini memiliki class .rounded-circle agar gambar tampil berbentuk
lingkaran, class .img-thumbnail untuk membuat border putih, dan class .m-2 untuk memberi
jarak margin level 2 di semua sisi.
Row ketiga di baris 27 – 31 dipakai untuk membuat tombol "View More Member" menggunakan
tag <button>.
Cukup dengan HTML, saya akan tambah sedikit kode CSS untuk memperkecil ukuran gambar
dan memberikan efek hover. Buka file style.css dan update dengan kode berikut:
style.css
1 /* MEMBER SHOWCASE - Halaman Home */
2
3 #member-showcase img {
472
4 width: 100px;
5 }
6
7 #member-showcase img:hover {
8 filter: brightness(120%);
9 }
Kode CSS di baris 3 – 5 dipakai untuk mengatur lebar gambar menjadi 100 pixel. Berikutnya di
baris 7 – 9 dipakai untuk membuat efek hover dengan mengubah brightness gambar menjadi
120%. Efeknya, gambar akan menjadi lebih terang ketika di hover. Property filter sendiri
merupakan salah satu property baru CSS3 yang bisa dipakai untuk membuat berbagai efek
image filter.
Berikut tampilan akhir bagian member showcase setelah penambahan kode CSS di atas:
Tampilan bagian member showcase ILKOOM Community (dengan kode CSS)
Jika merasa ukuran gambar terlalu kecil, bisa diatur dari kode CSS sebelumnya.
14.9. Paid Membership Features

Paid membership features adalah bagian dari template ILKOOM Community yang berisi fitur
unggulan jika seseorang berminat menjadi member. Tampilan ini mirip seperti bagian product
and services di template ILKOOM Tech, dimana saya menggunakan bootstrap icon yang
diikuti dengan teks penjelasan.
Berikut tampilan akhir dari paid membership features:
473
Tampilan bagian paid membership features ILKOOM Community
Kode program yang diperlukan cukup panjang karena terdapat total 6 feature (yang diulang
sebanyak 6 kali):
08.paid_member_feature.html
1 
2 <section id="feature" class="py-5">
4 <div class="row">
6 <h1>Paid Membership Features</h1>
8 <p class="lead">Get benefit from our membership features</p>
9 </div>
10 </div>
12
13 <div class="col-md-6 col-lg-4 d-flex">
14 <div class="me-3">
15 <i class="bi-shield-shaded fs-2"></i>
16 </div>
18 <h4>Restrict User Access</h4>
19 <p class="text-muted">Nam libero tempore,...</p>
20 </div>
21 </div>
22
25 <i class="bi-person-plus-fill fs-2"></i>
474
26 </div>
28 <h4>Unlimited Membership</h4>
29 <p class="text-muted">Temporibus autem quibusdam...</p>
30 </div>
31 </div>
32
35 <i class="bi-credit-card fs-2"></i>
36 </div>
38 <h4>Popular Payment Gateways</h4>
39 <p class="text-muted">Proin ex lacus, vehicula a...</p>
40 </div>
41 </div>
42
45 <i class="bi-laptop fs-2"></i>
46 </div>
48 <h4>Great User Interface</h4>
49 <p class="text-muted">Vestibulum ante ipsum primis...</p>
50 </div>
51 </div>
52
55 <i class="bi-link-45deg fs-2"></i>
56 </div>
58 <h4>Third Party Integration</h4>
59 <p class="text-muted">Duis commodo leo vel massa...</p>
60 </div>
61 </div>
62
65 <i class="bi-plus-square fs-2"></i>
66 </div>
68 <h4>Tons of Add-ons</h4>
69 <p class="text-muted">Morbi bibendum arcu sit...</p>
70 </div>
71 </div>
72
73 </div>
74 </div>
75 </section>
Kode ini terdiri dari 2 row, row pertama di baris 4 – 10 dipakai untuk membuat teks "Paid
Membership Features", strukturnya sama seperti bagian template yang sudah sering kita
475
pakai.
Row kedua mulai dari baris 11 sampai 75. Di sini terdapat 6 kolom yang mirip satu sama lain.
Kita akan bahas kolom pertama.
Di baris 13, terdapat tag <div> yang dipakai sebagai penampung semua kode kolom. Tag ini di-
set dengan class .col-md-6, .col-lg-4, dan .d-flex. Artinya di breakpoint extra-small dan
small kolom akan tampil 1 baris penuh (12 segmen). Begitu masuk ke breakpoint middle, lebar
kolom menjadi 6 segmen. Untuk breakpoint large ke atas, lebar kolom menjadi 4 segmen.
Tambahan class .d-flex dipakai untuk mengubah struktur kolom menjadi flexbox. Hasilnya,
tag <div> di baris 14 – 16 yang berisi bootstrap icon akan tampil berdampingan dengan tag
<div> di baris 17 – 21. Sisa 5 kolom selanjutnya menggunakan struktur yang sama dengan
kolom ini. Bedanya hanya di bagian text judul tag <h4> dan jenis gambar icon.
14.10. Total Showcase

Total showcase terdiri dari gabungan bootstrap icon dengan teks. Bagian ini cocok dipakai
untuk menampilkan statistik member. Berikut tampilannya:
Tampilan bagian total showcase ILKOOM Community
Dan berikut kode program yang dipakai:
09.total_showcase.html
1 
2 <section id="total-showcase" class="py-5 bg-dark text-white d-none d-md-block">
4 <div class="row text-center">
5
7 <div class="text-info mb-1">
8 <i class="bi-chat-dots fs-1"></i>
9 </div>
10 <p class="h5 mb-0">Activity</p>
11 <p class="h3"><strong>4,302</strong></p>
12 </div>
13
476

16 <i class="bi-person fs-1"></i>
17 </div>
18 <p class="h5 mb-0">Member</p>
20 </div>
21
24 <i class="bi-broadcast-pin fs-1"></i>
25 </div>
26 <p class="h5 mb-0">Online</p>
27 <p class="h3"><strong>540</strong></p>
28 </div>
29
32 <i class="bi-people fs-1"></i>
33 </div>
34 <p class="h5 mb-0">Groups</p>
36 </div>
37
40 <i class="bi-ui-checks fs-1"></i>
41 </div>
42 <p class="h5 mb-0">Forums</p>
44 </div>
45
48 <i class="bi-megaphone-fill fs-1"></i>
49 </div>
50 <p class="h5 mb-0">Topics</p>
52 </div>
53
54 </div>
55 </div>
56 </section>
Kode ini tidak lain berisi perulangan 6 kolom grid system. Masing-masing kolom memiliki
class .col-2 yang akan mengambil lebar sebesar 2 segmen di semua breakpoint.
Bootstrap icon menggunakan class .fs-1 agar tampil lebih besar. Untuk teks, menggunakan 2
buah tag <p> dengan class .h5 dan .h3. Saya memutuskan untuk tidak langsung menggunakan
tag <h5> karena isi teks bukanlah sebuah judul. Jadi lebih pas menggunakan tag <p> biasa.
477
14.11. Member List

Bagian member list berisi profil singkat dari setiap member yang bergabung. Dalam beberapa
hal, member list ini adalah versi update dari team profile yang ada di template ILKOOM Tech.
Berikut tampilan akhir dari member list:
Tampilan bagian member list ILKOOM Community
Untuk membuatnya, kita memakai komponen card Bootstrap plus sedikit kode CSS.
Kode program yang diperlukan terbilang sangat panjang (192 baris), tapi ini juga hanya
perulangan karena saya akan menampilkan 6 member. Berikut kodenya:
10.member_list.html
1 
2 <section id="member-list" class="py-5 bg-light text-center">
4 <div class="row">
6 <h1>Member List</h1>
10 </div>
11 </div>
12
13 <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
478
14
15 <div class="col mt-3">
17 <img class="card-img-top" src="img/thumbnail1.jpg">
19 <img src="img/people1.jpg" class="rounded-circle img-thumbnail">
20 <h5 class="card-title">Ilham Saputra</h5>
21 <ul class="list-unstyled text-start my-4">
23 <i class="bi-clock-fill me-2"></i>Bergabung di November 2010
24 </li>
26 <i class="bi-briefcase-fill me-2"></i>CEO PT. Serba Jaya Sentosa
27 </li>
29 <i class="bi-house-fill me-2"></i>Bandung
30 </li>
32 <i class="bi-envelope-fill me-2"></i>ilhamsaputra@gmail.com
33 </li>
34 </ul>
38 <small class="text-muted">Last seen 3 minutes ago</small>
39 </p>
40 </div>
41 </div>
42 </div>
43
49 <h5 class="card-title">Shakila Yuliarti</h5>
52 <i class="bi-clock-fill me-2"></i>Bergabung di Januari 2016
53 </li>
55 <i class="bi-briefcase-fill me-2"></i>CS PT. Elektro Makmur Jaya
56 </li>
58 <i class="bi-house-fill me-2"></i>Surabaya
59 </li>
61 <i class="bi-envelope-fill me-2"></i>shakila@yahoo.co.id
62 </li>
63 </ul>
67 <small class="text-muted">Last seen 2 days ago</small>
68 </p>
479
69 </div>
70 </div>
71 </div>
72
78 <h5 class="card-title">Diana Rahayu</h5>
81 <i class="bi-clock-fill me-2"></i>Bergabung di Juni 2014
82 </li>
84 <i class="bi-briefcase-fill me-2"></i>Marketing Tokobaju.com
85 </li>
87 <i class="bi-house-fill me-2"></i>Pekanbaru
88 </li>
90 <i class="bi-envelope-fill me-2"></i>diana_123@gmail.com
91 </li>
92 </ul>
96 <small class="text-muted">online</small>
97 </p>
98 </div>
99 </div>
100 </div>
101
107 <h5 class="card-title">Prayitna Warsa Ardianto</h5>
110 <i class="bi-clock-fill me-2"></i>Bergabung di Maret 2017
111 </li>
113 <i class="bi-briefcase-fill me-2"></i>Owner PT. Aneka Komputer
114 </li>
116 <i class="bi-house-fill me-2"></i>Jakarta
117 </li>
119 <i class="bi-envelope-fill me-2"></i>prayitna001@outlook.com
120 </li>
121 </ul>
480

126 </p>
127 </div>
128 </div>
129 </div>
130
136 <h5 class="card-title">Edi Kurniawan</h5>
139 <i class="bi-clock-fill me-2"></i>Bergabung di Desember 2012
140 </li>
142 <i class="bi-briefcase-fill me-2"></i>Teknisi CV. Komputika
143 </li>
145 <i class="bi-house-fill me-2"></i>Bekasi
146 </li>
148 <i class="bi-envelope-fill me-2"></i>kurniawanedi@gmail.com
149 </li>
150 </ul>
154 <small class="text-muted">Last seen 10 minutes ago</small>
155 </p>
156 </div>
157 </div>
158 </div>
159
165 <h5 class="card-title">Zamira Novitasari</h5>
168 <i class="bi-clock-fill me-2"></i>Bergabung di Juni 2016
169 </li>
171 <i class="bi-briefcase-fill me-2"></i>CS Traveloka.com
172 </li>
174 <i class="bi-house-fill me-2"></i>Makassar
175 </li>
177 <i class="bi-envelope-fill me-2"></i>zamira@tiketku.com
178 </li>
481
179 </ul>
184 </p>
185 </div>
186 </div>
187 </div>
188
189 </div>
190
191 </div>
192 </section>
Bagian awal kode program (baris 4 – 11) berguna untuk menampilkan judul teks "Member List"
dan sedikit teks lorem ipsum.
Proses pembuatan card dimulai dari baris 13 sampai 189. Di sini saya menggunakan row
colums, yakni menentukan jumlah segmen langsung dari row. Class yang dipakai adalah .row-
cols-1, .row-cols-md-2, dan .row-cols-lg-3. Artinya, secara default 1 kolom akan tampil 1
baris, begitu masuk ke breakpoint middle akan tampil 2 kolom dalam satu baris, dan ketika
masuk ke breakpoint large ke atas, akan tampil 3 kolom dalam satu baris.
Setiap kolom berisi satu card, kita akan bahas card pertama.
Komponen card pertama ada di baris 16 – 41. Di baris 17 terdapat tag <img> dengan class
.card-img-top yang berguna untuk menampilkan gambar di bagian atas card.
Di baris 18 terdapat class .card-body yang menandakan bagian card body. Card body ini saya
awali dengan tag <img> untuk menampilkan gambar profil member ILKOOM Community. Class
yang digunakan sama seperti yang di pakai pada bagian member showcase, yakni class
.rounded-circle dan .img-thumbnail untuk tampilan gambar bulat dengan border putih.
Di baris 20 berisi tag <h5> dengan class .card-title untuk menampilkan nama member.
Baris 21 – 34 berisi list bootstrap icon. List ini menyajikan data singkat tentang member
ILKOOM Community berupa tanggal bergabung, jabatan, kota tempat tinggal, dan alamat
email. Semua data ini dilengkapi dengan icon yang berbeda-beda. Beberapa class margin
dipakai agar tidak terlalu rapat.
Baris 35 – 39 berisi teks singkat mengenai status dan waktu online member. Keduanya dibuat
menggunakan tag <p>.
Untuk card kedua hingga keenam kode programnya sama persis, yang berubah hanya di
gambar background, gambar profil, nama member, serta isian data member.
Berikut tampilan dari kode HTML ini:
482
Tampilan bagian member list ILKOOM Community (tanpa CSS)
Saya merasa gambar profil terlalu besar dan ingin posisinya masuk setengah ke card header.
Untuk itu kita perlu sedikit kode CSS:
style.css
1 /* MEMBER LIST - Halaman Home */
2
3 #member-list .card-body img {
4 width: 125px;
5 margin-top: -80px;
6 }
Kode ini bertujuan agar ukuran gambar profil menjadi lebih kecil dengan lebar 125 pixel. Selain
itu margin-top:-80px akan "mendorong" gambar profil ke atas sebesar 80 pixel. Hasil akhirnya
bisa di lihat pada bagian awal pembahasan member list ini.
14.12. Footer
Bagian footer template ILKOOM Community juga hasil modifikasi dari footer ILKOOM Tech.
Berikut tampilannya:
483
Tampilan footer ILKOOM Community
Pada template ILKOOM Tech sebelumnya, bagian footer hanya berisi 2 kolom (sisi kiri dan
kanan), sedangkan kali ini terdapat 4 kolom. Berikut kode yang diperlukan:
11.footer.html
1 
2 <footer id="main-footer" class="text-white bg-dark py-4">
4 <div class="row">
5 <div class="col-md-3 text-center text-md-start">
6 <a href="index.html">
7 <img src="img/ilkoom_logo.png" style="height: 60px;" >
8 </a>
10 Aperiam cumque, esse modi maxime veniam nulla delectus dolorem
11 </p>
12 </div>
13
14 <div class="col-md-3 text-center">
15 <h5>Community</h5>
17 <li><a href="#" class="text-white text-decoration-none">
18 Activity</a></li>
20 Members</a></li>
22 Groups</a></li>
24 Forums</a></li>
25 </ul>
26 </div>
27
29 <h5>Our Services</h5>
32 Our mission</a></li>
34 Help/Contact Us</a></li>
36 Privacy Policy</a></li>
484
38 Cookie Policy</a></li>
40 Terms & Conditions</a></li>
41 </ul>
42 </div>
43
45 <h5>Hubungi Kami</h5>
46 <div style="white-space:nowrap;">
47 <i class="bi-envelope fs-5 me-2 me-lg-3" ></i>andre@ilkoom.com</div>
49 <i class="bi-phone fs-5 me-2 me-lg-3"></i>(021) 123456</div>
51 <i class="bi-globe fs-5 me-2 me-lg-3"></i>www.ilkoom.com</div>
52 </div>
53 </div>
54
55 <div class="row mt-3 mt-md-0">
56 <div class="col-md-3 me-md-auto text-center text-md-start">
57 <small>© ILKOOM 2018</small>
58 </div>
63 </a>
66 </a>
69 </a>
72 </a>
75 </a>
76 </div>
77 </div>
78 </div>
79
80 </div>
81 </footer>
Bagian footer ini diawali tag <footer> dengan class .text-white, .bg-dark dan .py-4 (baris 2).
Artinya, teks akan berwarna putih dengan background gelap serta memiliki padding top dan
padding bottom level 4.
Di baris 3, terdapat tag <div> dengan class .container yang dipakai untuk membuat grid
sistem. Container ini terdiri dari 2 row, row pertama di baris 4 – 53, dan row kedua di baris 55
– 78.
485
Row pertama terdiri dari 4 kolom yang masing-masingnya di set dengan class .col-md-3 (baris
5, 14, 28, dan 44).
Kolom pertama di baris 5 – 12 dipakai untuk menampilkan gambar logo ILKOOM Community
dengan ukuran kecil (baris 7). Gambar yang dipakai tetap sama dengan logo di bagian menu
navigasi, tapi lebarnya saya set sebesar 60 pixel menggunakan kode CSS inline
style="height:60px;". Kode CSS ini bisa saja di tulis ke dalam file style.css (lebih bagus),
tapi agar pembahasannya tidak terlalu panjang, saya tulis saja sebagai inline style CSS.
Di bawah logo terdapat tag <p> yang berisi dummy teks lorem ipsum (baris 9 - 10). Dalam
template aslinya, teks ini bisa diganti dengan visi dan misi website.
Kolom kedua di baris 14 – 26 berisi daftar link, begitu juga dengan kolom ketiga di baris 28 –
42, serta kolom keempat di baris 44 – 53. Khusus di kolom keempat ini terdapat bootstrap
icon. Tambahan kode CSS inline style="white-space:nowrap;" berfungsi untuk menahan
pasangan icon dan teks agar tidak terpisah jika ruang tidak cukup.
Row kedua memiliki 2 kolom. Kolom pertama (baris 56 – 58) dipakai untuk membuat teks
copyright. Di kolom ini terdapat class .me-md-auto untuk membuat efek offset dengan
mendorong kolom berikutnya ke arah kanan, namun hanya di breakpoint middle ke atas.
Kolom kedua (baris 59 – 76) dipakai untuk menampilkan icon media sosial. Daftar icon ini
sama seperti yang ada di template ILKOOM Tech.
Bagian footer ini menyempurnakan halaman Home template ILKOOM Community Blog. Total
terdapat sekitar 790 baris kode yang jika tanpa Bootstrap mungkin akan lebih panjang lagi
(terutama di sisi kode CSS). Berikutnya kita akan bahas halaman pendukung ILKOOM
Community, yang diawali dengan halaman Blog.
14.13. Blog Page

Untuk halaman blog ini, silahkan buat file baru bernama blog.html lalu copy seluruh kode dari
halaman home yang baru saja selesai kita buat ( index.html) ke dalam file blog.html ini.
Kemudian hapus kode dari slider hingga member list, artinya di dalam file blog.html ini hanya
terdapat bagian navbar dan footer saja.
Edit bagian navbar, pindahkan class .active dari menu item Home ke Blog:
1 ...
3 <a class="nav-link p-4" href="index.html">Home</a>
4 </li>
6 <a class="nav-link p-4 active" href="blog.html">Blog</a>
7 </li>
486
10 </li>
11 ...
Sekarang kita mulai mengisi halaman Blog.
Blog Page – Header Image

Bagian pertama yang ingin saya buat adalah header image. Ini mirip seperti bagian explore di
halaman Home, yakni berupa teks yang di belakangnya terdapat gambar.
Tempatkan kode berikut setelah menu navigasi:
12.blog_header.html
1 
2 <header id="blog-header" class="header-image text-white d-none d-md-block">
3 <div class="header-overlay">
5 <div class="row">
6 <div class="col">
7 <h1 class="display-1">Blog</h1>
9 Soluta harum aperiam in facilis dicta.</p>
10 </div>
11 </div>
12 </div>
13 </div>
14 </header>
Struktur kode ini sudah sering kita pakai. Di baris 2 terdapat tag <section> yang diikuti tag
<div> dengan class .header-overlay. Sesuai dengan namanya, class .header-overlay ini akan
dipakai untuk membuat efek overlay dari CSS.
Di baris 4 terdapat class .container untuk membuat grid sistem, yang diikuti dengan class
.row dan .col. Isi teks berada di baris 7 – 9 berupa tag <h1> dengan class .display-1 serta
sebuah tag <p>.
Jika dilihat di web browser, belum tampak tampilan apa-apa. Meskipun sebenarnya teks sudah
ada namun tersembunyi oleh background yang juga berwarna putih.
487
Tampilan header image di halaman blog ILKOOM Community (tanpa kode CSS)
Berikutnya, buka file style.css dan update dengan kode CSS berikut:
style.css
1 /* HEADER IMAGE - Untuk selain halaman Home */
2
3 .header-image {
7 height: 300px;
8 }
9
10 .header-overlay {
11 background-color: rgba(0,0,0,0.2);
12 width: 100%;
13 height: 300px;
14 }
15
16 .header-image h1{
17 margin-top:120px;
18 }
19
20 /* HEADER IMAGE - Gambar untuk setiap halaman */
21
22 #blog-header{
24 background-position-y: -100px;
25 }
Kode di baris 3 – 8 dipakai untuk mengatur ukuran gambar background di header image, yakni
setinggi 300px. Kode di baris 10 – 14 dipakai untuk membuat efek overlay. Dan di baris 16 – 18
berfungsi untuk mendorong teks tag <h1> sebesar 120 pixel dari sisi atas header image.
488
Gambar background sendiri saya tulis di baris 22 – 25. Sebenarnya gambar ini bisa saja di
input ke class .blog-header di baris 3, namun sengaja di pisahkan agar satu kelompok dengan
header di halaman lain. Yup, untuk halaman lain juga akan menggunakan header image seperti
ini, bedanya hanya di jenis gambar saja.
Property background-position-y:-100px dipakai untuk mendorong gambar background

sedikit ke atas.
Berikut tampilan akhir dari header image untuk halaman blog:
Tampilan header image di halaman blog ILKOOM Community (dengan kode CSS)
Karena gambar background ini menggunakan property CSS background-attachment:fixed ,

nantinya akan terlihat efek yang cukup menarik saat halaman di scroll. Silahkan ubah nilai
background-position-y di kode CSS sebelumnya untuk melihat fungsi dari nilai -200px
tersebut.
Blog Page – Breadcrumb

Setelah header image, berikutnya saya ingin membuat breadcrumb yang berfungsi sebagai
"penunjuk" posisi user di struktur website. Berikut kode program yang diperlukan:
13.blog_breadcrumb.html
1 
2 <section id="blog">
489
4 <div class="row">
6
7 
8 <nav>
9 <ol class="breadcrumb bg-white ms-0 mt-4 mb-4">
10 <li class="breadcrumb-item">
11 <a href="index.html" class="text-info text-decoration-none">
12 Home</a>
13 </li>
14 <li class="breadcrumb-item active">Blog</li>
15 </ol>
16 </nav>
17 <hr>
18
19 </div>
20 </div>
21 </div>
22 </section>
Tampilan breadcrumb di halaman blog ILKOOM Community
Kode untuk membuat breadcrumb ada di baris 8 – 16, dimana saya menggunakan komponen
breadcrumb bawaan Bootstrap. Dengan melihat teks breadcrumb ini, user bisa mengetahui
bahwa ia berada di bagian blog yang 1 tingkat setelah home.
Di baris 2 – 5 saya membuat struktur grid untuk blog. Tag <section> dengan id="blog"
nantinya akan menampung bagian utama blog, termasuk sidebar. Kode yang akan kita tulis
sepanjang bahasan halaman blog ini semuanya akan berada di dalam tag <section>.
Tag <div> dengan class .col-md-8 adalah penampung dari bagian kiri blog, sedangkan di
bagian kanan nanti akan terdapat sidebar dengan class .col-md-4 (saat ini belum kita buat).
Posisi breadcrumb ini ada di bagian kiri, yakni di dalam class .col-md-8.
Agar warna class .text-info tidak terlalu terang, akan saya timpa dengan kode CSS berikut:
style.css
1 /* BREADCRUMB */
2
490
3 .text-info {
4 color: #17a2b8 !important;
5 }
6
7 a.text-info:hover, a.text-info:focus {
8 color: #117a8b !important;
9 }
Blog Page – Blog List

Blog list merupakan bagian utama dari halaman blog.html, di sini akan tampil daftar semua
blog yang sudah ditulis oleh member ILKOOM Community. Berikut tampilan dari blog list ini:
Tampilan blog list di halaman blog ILKOOM Community
Untuk setiap blog list, terdapat gambar di sisi kiri diikuti dengan judul serta cuplikan konten di
sisi kanan. Di akhir teks terdapat meta data berupa nama penulis, tanggal dan jumlah
komentar.
Kode yang dibutuhkan untuk membuat 1 blog list ini sebenarnya tidak panjang, tapi karena
saya ingin membuat 6 cuplikan blog, butuh lebih dari 100 baris. Berikut kodenya:
14.blog_blog_list.html
4 <div class="row">
6
491

8 ...
9
10 
11 <div class="row py-2 d-flex">
13 <img src="img/thumbnail1.jpg" alt="" class="img-fluid mt-2">
14 </div>
15 <div class="col-md-7 text-center text-md-start mt-3 mt-md-0">
16 <h3><a href="article.html" class="text-info">
17 Lorem Ipsum Dolor Sit Amet</a></h3>
18 <p>Lorem ipsum dolor sit amet consectetur adipisicing...</p>
19 <div class="text-muted">
20 <small>Zamira Novitasari</small> -
21 <small> 25 September 2018 </small> -
22 <small> 10 Comments</small>
23 </div>
24 </div>
25 </div>
26 <hr>
27
31 </div>
34 Nullam Eget Nisl Mauris Felis</a></h3>
35 <p>Nullam eget nisl. Mauris dolor felis, sagittis at...</p>
37 <small>Edi Kurniawan</small> -
40 </div>
41 </div>
42 </div>
43 <hr>
44
48 </div>
51 Quisque Porta Nam Sed Tellus</a></h3>
52 <p>Quisque porta. Nam sed tellus id magna elementum...</p>
54 <small>Diana Rahayu</small> -
55 <small> 17 Agustus 2018 </small> -
57 </div>
58 </div>
59 </div>
60 <hr>
61
492

65 </div>
68 Totam Aperiam Eaque Quasi</a></h3>
69 <p>Totam rem aperiam, eaque ipsa quae ab illo inventore...</p>
71 <small>Prayitna Warsa Ardianto</small> -
72 <small> 29 Juni 2018 </small> -
74 </div>
75 </div>
76 </div>
77 <hr>
78
82 </div>
85 Duis Commodo Leo Sagittis</a></h3>
86 <p>Duis commodo leo vel massa sagittis, sit amet...</p>
88 <small>Shakila Yuliarti</small> -
89 <small> 11 Februari 2018 </small> -
91 </div>
92 </div>
93 </div>
94 <hr>
95
99 </div>
102 Nunc Volutpat Nisl Sed Ipsum</a></h3>
103 <p>Nunc volutpat nisl sed ipsum tempor, sit amet...</p>
105 <small>Diana Rahayu</small> -
106 <small> 26 November 2017 </small> -
108 </div>
109 </div>
110 </div>
111 <hr>
112
113 </div>
114 </div>
115 </div>
116 </section>
493
Di awal, saya kembali menulis tag <section> dengan id="blog" untuk menjelaskan posisi dari
blog list ini. Berbeda dengan halaman home (index.html) yang setiap bagiannya saling
terpisah, sebagian besar isi halaman blog berada di dalam 1 tag <section> saja, karena
semuanya butuh grid sistem Bootstrap.
Setiap blog list pada dasarnya adalah sebuah .row, yup ini adalah row di dalam row.
Perhatikan bahwa di baris 4 juga terdapat tag <div> dengan class .row. Untuk membuat
tampilan yang cukup kompleks, kita memang akan sering memakai grid sistem "bersarang",
yakni row di dalam row di dalam row.
Kode untuk membuat blog list mulai di baris 11, tepat setelah breadcrumb. Kita akan bahas
kode di blog list pertama saja (baris 11 – 26).
Di baris 11, class yang dipakai adalah .row, .py-2 dan .d-flex. Artinya, ini adalah sebuah row
dengan margin top dan bottom level 2 dan isi row ditampilkan sebagai flexbox (efek dari class
.d-flex). Akibatnya, semua kolom yang ada di dalam row akan tampil berdampingan.
Di dalam row ini terdapat 2 buah kolom, yakni .col-md-5 di baris 12 – 14 yang berisi tag <img>
untuk gambar serta .col-md-7 di baris 15 – 24 yang berisi teks.
Untuk kolom kedua ini, diawali dengan judul artikel yang dibuat dari tag <h3> dan <a>. Artinya,
judul artikel ini adalah sebuah link. Di baris 16, link saya set menuju ke halaman article.html
yang akan kita buat setelah ini.
Di baris 19 – 23 terdapat 3 buah tag <small> yang dipakai untuk menampilkan nama penulis,
tanggal terbit, serta jumlah komentar. Semuanya berada di dalam tag <div> dengan class
.text-muted sehingga tampil dengan warna abu-abu.
Kode yang sama di ulang sebanyak 5 kali dengan gambar serta judul artikel yang berbeda-
beda. Sebagai pembatas antar blog list, saya menempatkan sebuah tag <hr>.
Di Bootstrap 5, semua link secara default memiliki garis bawah (underline). Efek ini terasa
kurang pas, sehingga saya ingin menghapusnya dan membuat agar underline hanya tampil
saat link di hover saja. Untuk keperluan ini, silahkan tambah kode berikut ke file style.css:
style.css
1 /* BLOG LIST - mengatur efek underscore di link */
2
3 #blog a {
4 text-decoration: none;
5 }
6
7 #blog a:hover {
8 text-decoration: underline;
9 }
Kode ini akan mengatur efek underline untuk semua tag <a> yang ada di dalam id="blog".
494
Blog Page – Pagination

Pagination adalah komponen tambahan sebagai pelengkap untuk blog list. Bagian ini biasa
dipakai untuk blog yang punya banyak artikel dan dipecah ke dalam beberapa halaman. Di sini
saya akan menggunakan komponen pagination bawaan Bootstrap. Berikut tampilannya:
Tampilan pagination di halaman blog ILKOOM Community
Berikut kode program yang dibutuhkan:
15.blog_pagination.html
4 <div class="row">
6
8 ...
9
10 
11 ...
12
13 
14 <ul class="pagination justify-content-center">
15 <li class="page-item disabled">
16 <a class="page-link text-decoration-none" href="#">1</a>
17 </li>
18 <li class="page-item">
19 <a class="page-link text-info text-decoration-none" href="#">2</a>
20 </li>
22 <a class="page-link text-info text-decoration-none" href="#">3</a>
23 </li>
25 <a class="page-link text-info text-decoration-none" href="#">Next</a>
26 </li>
27 </ul>
28
29 </div>
495
30
31 </div>
32 </div>
33 </div>
34 </section>
Posisi penulisan pagination ini ada setelah blog list terakhir (baris 14 – 27). Saya tidak akan
membahas kodenya lagi karena ini merupakan komponen bawaan Bootstrap. Tambahannya
adalah terdapat class .text-info untuk mengubah warna teks, serta class .text-decoration-
none untuk menghapus efek underline.
Pada praktek website yang sebenarnya, pagination ini akan di-generate dengan kode PHP. Ini
karena pagination berhubungan erat dengan jumlah total artikel yang biasanya disimpan
dalam database. PHP-lah yang nanti akan menghitung berapa angka pagination yang harus
ditampilkan.
Blog Page – Sidebar Slider

Sesuai dengan namanya, sidebar slider adalah sebuah slider yang saya tempatkan di bagian
sidebar. Slider ini berisi 4 populer post yang paling sering dikunjungi (diumpamakan
demikian). Untuk membuatnya, kita akan pakai komponen carousel Bootstrap.
Berikut tampilan dari sidebar slider ini:
Tampilan sidebar slider (kanan) di halaman blog ILKOOM Community
Berikut kode program yang diperlukan:
16.blog_sidebar_slider.html
4 <div class="row">
6
496
8 ...
9
10 
11 ...
12
14 ...
15
16 </div>
17
18 
19 <div id="sidebar" class="col-md-4 mt-4 ">
20
21 
24 <h3>Popular Post</h3>
26
29 <img class="w-100 img-thumbnail" src="img/thumbnail1.jpg">
30 <div class="carousel-caption pb-0">
31 <a href="#" class="text-white">
32 <p class="bg-dark d-inline-block px-1">
33 Lorem Ipsum Dolor Sit Amet</p>
34 </a>
35 </div>
36 </div>
42 Totam Rem Aperiam, Eaque</p>
43 </a>
44 </div>
45 </div>
51 Aenean Id Metus Ullamcorper</p>
52 </a>
53 </div>
54 </div>
60 Mauris Dolor Felis, Sagittis At</p>
61 </a>
62 </div>
497
63 </div>
64 </div>
65
66 <button class="carousel-control-prev" type="button"
67 data-bs-target="#mySlide" data-bs-slide="prev">
70 </button>
71 <button class="carousel-control-next" type="button"
72 data-bs-target="#mySlide" data-bs-slide="next">
75 </button>
76
77 </div>
78 </div>
79 </div>
80
81 </div>
82 </div>
83 </div>
84 </section>
Di sini kita sudah masuk ke bagian sidebar, yakni bagian yang tampil di sisi kiri halaman
(berdampingan dengan blog list). Seluruh sidebar ada di dalam tag <div> dengan class .col-
md-4 (baris 17), yang artinya sidebar akan mengambil 4 segmen di breakpoint middle ke atas.
Kode program untuk membuat slider berada di baris 22 – 79. Secara umum kode yang dipakai
tidak banyak berbeda dengan kode dasar komponen carousel Bootstrap. Karena itu tidak akan
saya bahas lagi.
Tambahannya ada di bagian carousel-caption, yakni teks yang tampil di slider. Saya
menggunakan class .bg-dark, .d-inline-block, dan .px-1 (baris 30). Ketiga class ini
menghasilkan teks dengan background warna hitam dan padding level 1 di sumbu x. Efeknya
kurang lebih sama seperti teks yang tampil di slider utama (halaman home).
Blog Page – Sidebar Post Category

Masih di bagian sidebar, saya ingin membuat daftar kategori artikel atau post. Tampilan ini
dibuat dari perpaduan komponen list group dan badge Bootstrap. Berikut hasilnya:
498
Tampilan sidebar post category (kanan) di halaman blog ILKOOM Community

4 <div class="row">
6
8 ...
9 
10 ...
12 ...
13
14 </div>
15
16 
18
20 ...
21
22 
25 <h3 class="text-center">Post Category</h3>
26 <ul class="list-group list-group-flush mt-3">
27 <li class="list-group-item d-flex justify-content-between
28 align-items-center">
29 <a href="#" class="text-info">Ekonomi</a>
30 <span class="badge badge-primary badge-pill bg-info">10</span>
31 </li>
34 <a href="#" class="text-info">Politik</a>
499

36 </li>
39 <a href="#" class="text-info">Teknologi</a>
41 </li>
44 <a href="#" class="text-info">Music</a>
46 </li>
49 <a href="#" class="text-info">Programming</a>
51 </li>
54 <a href="#" class="text-info">Lingkungan</a>
56 </li>
57 </ul>
58 </div>
59 </div>
60
61 </div>
62
63 </div>
64 </div>
65 </section>
Karena bagian dari sidebar, post category ini berada di dalam tag <div id="sidebar">, tepat
setelah sidebar slider.
Komponen dasar post category adalah list group. List group dibuat dari tag <ul> dan <li>,
dimana tag <ul> di set dengan class .list-group, dan setiap tag <li> di set dengan class
.list-group-item.
Di dalam tag <li> saya menempatkan tag <a> untuk membuat judul kategori, yang sekaligus
berfungsi sebagai link. Di sebelah tag <a> ini terdapat tag <span> untuk menampilkan jumlah
artikel dalam bentuk angka, angka ini di style menggunakan komponen badge Bootstrap
dengan class .badge, .badge-primary, .badge-pill dan .bg-info.
Tampilan seperti ini sebenarnya sudah pernah kita bahas ketika mempelajari list group dalam
bab Button Related Component, namun supaya badge berjejer di sisi sebelah kanan, saya
menambahkan class flexbox Bootstrap ke dalam tag <li>, yakni .d-flex, .justify-content-
between dan .align-items-center. Hasilnya, badge akan di dorong ke sisi sebelah kanan,
terpisah dengan judul kategori yang dibuat dari tag <a>.
Total terdapat 6 jenis kategori yang dibuat menggunakan 6 buah tag <li>.
500
Blog Page – Sidebar Latest Comments

Sidebar latest comments berisi cuplikan komentar terbaru dari member ILKOOM
Community. Berikut tampilannya:
Tampilan sidebar latest comments (kanan) di halaman blog ILKOOM Community
18.blog_latest_comments.html
4 <div class="row">
7 ...
8 
9 ...
11 ...
12 </div>
13
14 
16
18 ...
20 ...
21
22 
23 <div id="latest-comments" class="row">
25 <h3 class="text-center">Latest Comments</h3>
501
26
27 <div class="d-flex py-3 border-bottom">
28 <img class="me-3 rounded-circle img-thumbnail"
29 src="img/people6.jpg" style="width:50px; height:50px;">
30 <div>
31 <a href="#" class="text-dark">
32 <p class="mb-0">Cras sit amet nibh libero in gravida nulla,
33 Nulla vel metus.</p>
34 <small class="text-muted align-self-end">
35 15 September 2018</small>
36 </a>
37 </div>
38 </div>
39
43 <div>
45 <p class="mb-0">Fusce tellus. Fusce dui leo, imperdiet in,
46 aliquam sit amet, feugiat eu, orci.</p>
48 29 Juni 2018</small>
49 </a>
50 </div>
51 </div>
52
56 <div>
58 <p class="mb-0"> Class aptent taciti sociosqu ad litora
59 torquent per conubia nostra, per inceptos hymenaeos.</p>
61 30 Mei 2018</small>
62 </a>
63 </div>
64 </div>
65
66 <div class="d-flex py-3">
69 <div>
71 <p class="mb-0">Mauris elementum mauris vitae tortor.
72 Praesent dapibus.</p>
74 7 Maret 2018</small>
75 </a>
76 </div>
77 </div>
78
79 </div>
80 </div>
502
81
82 </div>
83
84 </div>
85 </div>
86 </section>
Bagian latest comments ini ditulis setelah post category di dalam tag <div id="sidebar">.
Kita akan bahas komentar pertama yang terdapat di baris 27 – 38.
Seluruh kode untuk membuat komentar berada di dalam tag <div> dengan class .d-flex, .py-
3 dan .border-bottom (baris 27). Karena di-set dengan .d-flex, maka isi tag <div> ini akan
ditampilkan sebagaimana aturan flexbox, misalnya secara default semua flex item akan
berjejer dari kiri ke kanan (sejajar sumbu x).
Class .py-3 dipakai untuk membuat margin top dan bottom level 3, dan class .border-bottom
dipakai untuk membuat border di sisi bawah komentar sebagai pembatas dengan komentar
lainnya.
Setelah itu terdapat tag <img> untuk menampilkan gambar profile dari member yang
memberikan komentar (baris 28 - 29). Tag <img> ini menggunakan class .me-3, .rounded-
circle dan .img-thumbnail. Hasilnya, terdapat padding right level 3, gambar tampil berbentuk
bulatan dan memiliki border putih. Selain itu terdapat inline style CSS yang saya pakai untuk
mengatur ukuran gambar, yakni style="width:50px; height:50px;" . Artinya lebar dan tinggi
gambar adalah sebesar 50 pixel x 50 pixel.
Selanjutnya ada tag <div> (baris 30 – 37), di sinilah isi teks komentar berada. Seluruh
komentar saya tempatkan ke dalam tag <a> agar bisa di klik. Dalam web sebenarnya, ketika
komentar di klik, akan terbuka artikel tempat komentar itu berada. Komentar sendiri dibuat
dari tag <p> serta terdapat tambahan tag <small> yang berisi tanggal komentar ditulis.
Dalam contoh ini saya membuat 4 buah komentar yang semuanya menggunakan kode
program seperti di atas. Yang berubah hanyalah gambar profile serta teks isi komentar.
Bagian latest comments ini menyempurnakan halaman blog.html, dan kita akan lanjut ke
halaman article.html.
14.14. Article Page

Halaman index.html dan blog.html sudah selesai, sekarang kita masuk ke article.html.
Halaman artikel akan berisi sebuah artikel lengkap dengan bagian profile member (yang
menulis artikel tersebut), serta bagian komentar. Idealnya, semua cuplikan blog yang ada di
halaman blog.html dibuatkan halaman artikelnya, tapi kali ini kita hanya merancang 1 halaman
saja.
Dalam banyak hal, halaman artikel ini mirip seperti halaman blog, terutama bagian sidebar
503
yang akan sama seperti halaman blog.
Sama seperti halaman blog, untuk memulai silahkan buat file baru bernama article.html, lalu
copy seluruh kode dari halaman home (index.html). Kemudian hapus semua kode dari slider
hingga member list, artinya di dalam file article.html ini hanya terdapat bagian navbar dan
footer saja.
Pertama, kita akan edit menu navigasi, yakni memindahkan class .active ke menu item
Article:
1 ...
3 <a class="nav-link p-4" href="blog.html">Blog</a>
4 </li>
6 <a class="nav-link p-4 active" href="article.html">Article</a>
7 </li>
10 </li>
11 ...
Article Page – Header Image

Sama seperti halaman blog, halaman article ini juga akan dimulai dengan sebuah header
image. Kode yang dipakai nyaris sama, perbedaannya hanya di jenis gambar dan isi teks.
19.article_header.html
2 <header id="article-header" class="header-image text-white d-none d-md-block">
5 <div class="row">
6 <div class="col">
7 <h1 class="display-1">Article</h1>
10 </div>
11 </div>
12 </div>
13 </div>
14 </header>
Tag <header> kali ini menggunakan atribut id="article-header", yang akan dipakai untuk
kode CSS.
Silahkan buka file style.css, lalu update dengan tambahan kode berikut:
504
style.css
2 ...
3 ...
4 #article-header{
7 }
Tampilan header image di halaman article ILKOOM Community (dengan kode CSS)
Kode CSS yang dipakai mirip seperti #blog-header sebelumnya. Namun kali ini menggunakan
gambar yang berbeda dan dengan judul teks "Article".
Article Page – Breadcrumb

Setelah header image, di halaman article ini saya juga ingin menempatkan breadcrumb.
20.article_breadcrumb.html
1 
2 <section id="article">
4 <div class="row">
6
8 <nav>
11 <a href="index.html" class="text-info text-decoration-none">
12 Home</a>
13 </li>
505
15 <a href="blog.html" class="text-info text-decoration-none">
16 Blog</a>
17 </li>
18 <li class="breadcrumb-item active">Quisque porta Nam tellus</li>
19 </ol>
20 </nav>
21 <hr>
22
23 </div>
24 </div>
25 </div>
26 </section>
Tampilan breadcrumb di halaman article ILKOOM Community
Dengan melihat urutan breadcrumb, pengunjung bisa mengetahui bahwa ia berada di artikel
"Quisque porta Nam tellus" yang berada di dalam blog, dimana blog itu sendiri ada di bawah
halaman home.
Di atas struktur breadcrumb terdapat tag <section id="article">, yang diikuti dengan class
.container, .row, dan .col-md-8. Ini adalah struktur yang sama seperti di halaman blog.html.
Dalam class .col-md-8 inilah isi artikel serta beberapa bagian lain akan kita tulis.
Article Page – Main Article

Main artikel tidak lain berisi kumpulan paragraf sebagai isi dari artikel itu sendiri. Bagian ini
berada di dalam class .col-md-8 dan ditulis setelah bagian breadcrumb.
Berikut tampilannya:
506
Tampilan main article di halaman article ILKOOM Community
21.article_main.html
4 <div class="row">
507
6
8 ...
9
10 
11 <article class="py-2">
12 <h1>Quisque porta Nam sed tellus</h1>
14 <small> Ilyas Maulana </small> -
17 </div>
18 <img src="img/full-image8.jpg" alt="" class="img-fluid p-4">
19 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
20 <p>Aliquam in lorem sit amet leo accumsan lacinia. Fusce te...</p>
22 <p>"Class aptent taciti sociosqu ad litora torquent
23 per conubia, inceptos hymenaeos"</p>
25 <cite>John Doe</cite> (CEO of Example.com)
26 </footer>
27 </blockquote>
28 <p>Ut enim ad minima veniam, quis nostrum exercitationem ul...</p>
29 <p>Vivamus porttitor turpis ac leo. Aliquam in lorem sit am...</p>
30 <p>Duis condimentum augue id magna semper rutrum. Excepteur...</p>
31 </article>
32 <hr>
33
34 </div>
35 </div>
36 </div>
37 </section>
Seluruh artikel berada di dalam tag <article> dengan class .py-2 untuk membuat padding top
dan bottom level 2 (baris 11). Tag <article> sendiri merupakan semantic tag HTML5 yang
tidak memiliki style bawaan, sama seperti tag <section>, <header> dan <footer>. Kita bisa saja
menggunakan tag <div>, tapi karena ini berisi teks artikel akan lebih pas menggunakan tag
<article>.
Judul artikel dibuat menggunakan tag <h1> di baris 12. Setelah itu di baris 13 – 17 saya
menampilkan meta data artikel berupa nama penulis, tanggal terbit serta jumlah komentar.
Semuanya berada di dalam tag <small> agar teks tampil lebih kecil. Class . text-muted di tag
<div> akan mengubah warna teks menjadi abu-abu (baris 13).
Mengawali isi artikel terdapat tag <img> di baris 18. Menampilkan 1 gambar sebelum isi artikel
sering kita jumpai. Selain mempercantik tampilan artikel, gambar ini juga berfungsi sebagai
ilustrasi dari pesan yang akan disampaikan. Jika artikel ini tentang berita kemenangan tim
sepak bola indonesia (kejadian yang sebenarnya cukup langka), maka gambar ini bisa diisi
dengan foto pemain timnas indonesia yang sedang merayakan kemenangan.
Sisa kode berikutnya hanyalah kumpulan tag <p> yang berisi dummy teks lorem ipsum. Sebagai
508
"pemanis" terdapat sebuah kutipan yang dibuat dari tag <blockquote> di baris 21 – 27.
Di akhir artikel saya menambah tag <hr> sebagai pemisah dengan bagian berikutnya.
Article Page – Author

Di bawah artikel, saya ingin menampilkan foto dan profil singkat penulis artikel (author). Ini
sering dibuat sebagai info tambahan sekaligus ajang promosi dari penulis artikel. Berikut
tampilan yang akan kita buat:
Tampilan author di halaman article ILKOOM Community
Berikut kode yang dibutuhkan:
22.article_author.html
4 <div class="row">
6
8 ...
10 ...
11
12 
13 <div class="d-flex align-items-start py-4">
14 <img class="me-3 img-thumbnail img-fluid" src="img/people9.jpg">
15 <div>
16 <h3><a href="#" class="text-info text-decoration-none">
17 Ilyas Maulana</a></h3>
18 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
19 scelerisque ante sollicitudin. Cras purus odio, vestibulum in
20 vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
21 nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
22
509
23 <div class="pt-4" style="white-space:nowrap;">

24 <a href="#" class="text-info text-decoration-none me-2">
26 </a>
29 </a>
32 </a>
35 </a>
38 </a>
39 </div>
40
41 </div>
42 </div>
43 <hr>
44
45 </div>
46 </div>
47 </div>
48 </section>
Bagian author ini berada persis setelah main article. Untuk membuatnya saya men-set tag
<div> sebagai .d-flex dan .align-items-start (baris 13). Sebagai flex item, terdapat tag
<img> yang akan tampil di sisi kiri (baris 14), serta tag <div> yang berisi profil singkat penulis di
sebelah kanan (baris 15 – 39).
Isi dari tag <div> ini terdiri dari tag <h3> di baris 16 untuk nama penulis, serta biografi singkat
yang saya ganti dengan dummy text lorem ipsum. Kemudian terdapat icon media social yang
dibuat dari kumpulan bootstrap icon (baris 23 – 39). Setiap icon berada dalam tag <a>
sehingga bisa di klik untuk mengunjungi halaman media social penulis (dengan mengisi atribut
href dari tag <a>). Struktur icon ini mirip seperti yang dipakai pada bagian footer.
Article Page – Comments

Commments adalah tempat pengunjung untuk menulis komentar atau pendapat mengenai
konten yang ada di artikel. Berikut tampilan komentar yang akan kita buat:
510
Tampilan comments di halaman article ILKOOM Community
Untuk membuat bagian komentar ini saya banyak memanfaatkan flexbox. Kodenya cukup
panjang karena ada 4 komentar serta 1 form untuk menambah komentar baru di bagian bawah.
23.article_comment.html
511
4 <div class="row">
6
8 ...
10 ...
11 
12 ...
13
14 
15 <section class="py-4">
16 <h2>Comments</h2>
17
18 <div class="d-flex mt-4">
19 <a href="#" class="flex-shrink-0 me-3">
20 <img class="rounded-circle img-thumbnail"
22 </a>
23 <div>
24 <div class="d-flex justify-content-between">
25 <h5 class="mt-0">Ulya Nasyiah</h5>
26 <small class="text-muted">15 September 2018</small>
27 </div>
28 <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel...</p>
29 <div><a href="#" class="text-info">Reply</a></div>
30
31 <div class="d-flex align-items-start mt-4">
35 </a>
36 <div class="mb-3 w-100">
38 <h5 class="mt-0">Bahuwarna Pradana</h5>
40 </div>
41 <p>Nemo enim ipsam voluptatem quia voluptas sit aspern...</p>
43 </div>
44 </div>
45
50 </a>
51 <div class="mb-3 w-100">
53 <h5 class="mt-0">Elisa Farida</h5>
55 </div>
56 <p>Class aptent taciti sociosqu ad litora torquent per...</p>
57 <p>Aliquam in lorem sit amet leo accumsan lacinia. Mae...</p>
512
59 </div>
60 </div>
61
62 </div>
63 </div>
64 <hr>
65
70 </a>
71 <div>
73 <h5 class="mt-0">Candra Adika</h5>
75 </div>
76 <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatu....</p>
77 <div class="my-2"><a href="#" class="text-info">Reply</a></div>
78 </div>
79 </div>
80 <hr>
81 </section>
82
83 
84 <section class="pt-3 pb-5">
85 <h4>Leave a Reply</h4>
86 <p>Your email address will not be published. Required fields
87 are marked *</p>
88 <form>
89 <div class="mb-3">
90 <label for="isianKomentar" class="form-label">Comment *</label>
91 <textarea class="form-control" id="isianKomentar"></textarea>
92 </div>
95 <input type="text" class="form-control" id="inputName"
96 placeholder="Name *">
97 </div>
99 <input type="email" class="form-control" id="inputEmail"
100 placeholder="Email *">
101 </div>
102 </div>
103 <input type="submit" class="btn btn-info" value="Post Comment">
104 </form>
105 </section>
106
107 </div>
108 </div>
109 </div>
110 </section>
Kode untuk membuat comments ini ditempatkan setelah bagian author, yang diawali dengan
513
tag <section> di baris 15 hingga 81.
Kita akan bahas komentar pertama dari baris 18 – 29. Sebagai pembuka terdapat class .d-flex
di baris 18. Dengan demikian semua isi tag <div> ini akan di proses sebagai flexbox.
Flex item pertama berupa tag <a> dengan class .flex-shrink-0. Ini dipakai agar tag <a> tidak
ikut mengecil jika lebar flex container diperkecil. Di dalamnya terdapat tag <img> untuk
membuat gambar profil. Ukuran gambar saya set dengan lebar 50 pixel dan tinggi 50 pixel
menggunakan inline style CSS style="width:50px; height:50px;" (baris 21).
Berikutnya di baris 23 – 44 terdapat flex item kedua. Pada bagian ini terdapat cukup banyak
element, yang diawali tag <div> di baris 24 – 27. Tag ini juga di set dengan class .d-flex, yang
artinya ini adalah nested flexbox (flexbox di dalam flexbox).
Tag <h5> dan <small> dipakai untuk membuat nama member yang pemberi komentar serta
tanggal komentar ditulis. Nama member akan berada di sisi kiri, serta tanggal di sebelah kanan
sebagai efek dari class .justify-content-between.
Isi komentar berada di dalam tag <p> yang diwakilkan oleh dummy teks lorem ipsum (baris 28).
Kemudian terdapat tag <div> yang berisi tag <a>Reply</a> di baris 29. Ini berfungsi untuk
membuat link "Reply". Agar bisa berfungsi, link ini nantinya harus dikombinasikan dengan
JavaScript atau PHP di sisi server.
Di baris 31 terdapat lagi tag <div> dengan class .d-flex. Posisinya masih ada di dalam flex
item kedua yang dimulai dari baris 23. Struktur seperti ini saya buat karena tag <div> ini berisi
komentar balasan dan posisinya akan dibuat agak menjorok ke arah dalam.
Komentar di baris 31 – 44 serta komentar ketiga di baris 46 – 60 adalah komentar balasan yang
kodenya sama seperti komentar utama. Tag <hr> di baris 64 saya tulis sebagai tanda pemisah
antar setiap komentar baru (yang bukan komentar balasan).
Komentar keempat berada di baris 66 – 79 dan merupakan komentar tunggal yang tidak
memiliki balasan.
Setelah bagian comments, saya membuat sebuah form (baris 84 – 105). Form ini dipakai untuk
membuat komentar baru dimana pengunjung harus mengisi nama, email dan text komentar.
Pengaturan posisi form dibuat menggunakan grid sistem serta beberapa class margin untuk
membuat jarak antar inputan form.
Form komentar yang kita buat ini hanyalah tampilan saja. Agar bisa berfungsi, harus
dikombinasikan dengan bahasa pemrograman server seperti PHP. Nantinya data dari form
akan di proses oleh PHP untuk disimpan ke dalam database MySQL.
Article Page – Sidebar

Bagian sidebar untuk halaman article akan sama persis seperti halaman blog. Sebagai
pembeda, saya akan tambah sebuah gambar iklan yang di set dengan class .sticky-top.
514
Silahkan copy seluruh kode sidebar yang ada di halaman blog.html ke halaman article.html.
Berikut gambaran struktur akhir halaman article.html:
24.article_sidebar.html
4 <div class="row">
6
8 ...
10 ...
11 
12 ...
13 
14 ...
15 
16 ...
17
18 </div>
19
20 
22
24 ...
26 ...
27 
28 ...
29
30 
31 <div class="row py-4 sticky-top">
33 <h3>Advertisement</h3>
34 <a href="#">
35 <img class="me-3 img-fluid" src="img/ads.jpg" >
36 </a>
37 </div>
38 </div>
39
40 </div>
41 </div>
42 </div>
43 </section>
Bagian sidebar ini sama persis dengan yang ada di halaman blog.html, sehingga tidak akan
saya bahas lagi.
Di baris 31 – 38 terdapat tambahan kode program untuk membuat "iklan" atau advertisement.
515
Di sini saya membuat sebuah tag <div> dengan class .row, .py-4, dan .sticky-top. Artinya ini
adalah sebuah row dengan padding top dan bottom level 4 serta di set sebagai sticky-top.
Isi dari iklan ini hanya sebuah gambar dengan nama ads.jpg (baris 35). Gambar ini berada di
dalam tag <a> sehingga berfungsi sebagai link. Jika gambar di klik, user akan dibawa ke
halaman web si pengiklan. Berikut tampilannya:
Tampilan advertisement di halaman article ILKOOM Community
Kebetulan iklan yang saya pakai adalah perangkat Google Nexus 7 (hanya sekedar contoh).
Silahkan scroll halaman ke atas dan ke bawah untuk melihat efek dari class .sticky-top.
Sedikit tambahan untuk efek link, silahkan tambah kode berikut ke file :
style.css
1 /* ARTICLE LIST - mengatur efek underscore di link */
2
3 #article a {
4 text-decoration: none;
5 }
6
7 #article a:hover {
8 text-decoration: underline;
9 }
Kode ini berguna untuk menghapus garis bawah / underline, dan hanya muncul saat link di
hover. Sampai di sini halaman article.html sudah selesai.
14.15. Gallery Page

Sesuai namanya, halaman gallery akan berisi kumpulan gambar. Di sini saya akan memakai
library Lightbox2 untuk membuat efek light box. Lengkapnya akan kita bahas sesaat lagi.
516
Silahkan buat file baru bernama gallery.html, lalu copy seluruh kode dari halaman home
(index.html). Kemudian hapus semua kode dari slider hingga member list, artinya di dalam file
gallery.html ini hanya terdapat bagian navbar dan footer saja.
Pertama, edit menu navigasi dengan memindahkan class .active ke menu item Gallery:
1 ...
4 </li>
6 <a class="nav-link p-4 active" href="gallery.html">Gallery</a>
7 </li>
9 <a class="nav-link p-4" href="login.html">Login</a>
10 </li>
11 ...
Gallery Page – Header Image

Sama seperti halaman blog dan article, di halaman gallery ini saya juga ingin membuat header
image. Kode yang dipakai nyaris sama, bedanya hanya di jenis gambar dan isi teks.
25.gallery_header.html
2 <header id="gallery-header" class="header-image text-white d-none d-md-block">
5 <div class="row">
6 <div class="col">
7 <h1 class="display-1">Gallery</h1>
10 </div>
11 </div>
12 </div>
13 </div>
14 </header>
Tag <header> kali ini menggunakan atribut id="gallery-header", yang akan dipakai untuk
kode CSS.
style.css
2
3 ...
517
4 #gallery-header{
7 }
Kode CSS yang dipakai juga sama seperti #blog-header dan #article-header. Yang berbeda
hanya di jenis gambar dan dengan selector #gallery-header.
Tampilan header image di halaman gallery ILKOOM Community (dengan kode CSS)
Gallery Page – Breadcrumb

Untuk halaman gallery ini saya juga ingin membuat breadcrumb. Berikut kodenya:
26.gallery_breadcrumb.html
1 
2 <section>
4 <div class="row">
5 <div class="col">
6
8 <nav>
11 <a href="index.html" class="text-info text-decoration-none">Home</a>
12 </li>
13 <li class="breadcrumb-item active">Gallery</li>
14 </ol>
15 </nav>
16 <hr>
17
18 </div>
518
19 </div>
20 </div>
21 </section>
Tampilan breadcrumb di halaman gallery ILKOOM Community
Kode ini sedikit berbeda dengan yang ada di halaman blog dan artikel. Kali ini keseluruhan
breadcrumb berada di dalam tag <section> sendiri. Ini karena saya tidak menggunakan
sidebar di halaman gallery.
Gallery Page – Gallery

Halaman gallery ini hanya memiliki 1 bagian utama, yakni gallery itu sendiri. Gallery ini berisi
kumpulan tag <img> yang ditempatkan ke dalam grid system.
27.gallery_gallery.html
1 
2 <section id="gallery" class="py-5">
4 <h1 class="text-center">Photo Gallery</h1>
5 <p class="text-center">Check out our photos</p>
6 <div class="row row-cols-auto row-cols-sm-2 row-cols-md-3
7 row-cols-xxl-4 mb-4">
8
9 <div class="col mt-4 mx-auto">
10 <a href="img/full-image1.jpg">
11 <img src="img/thumbnail1.jpg" class="img-fluid img-thumbnail">
12 </a>
13 </div>
14
18 </a>
19 </div>
20
519
24 </a>
25 </div>
26
30 </a>
31 </div>
32
36 </a>
37 </div>
38
42 </a>
43 </div>
44
48 </a>
49 </div>
50
54 </a>
55 </div>
56
60 </a>
61 </div>
62
63 </div>
64
66 <button class="btn btn-large btn-info">Load More</button>
67 </div>
68
69 </div>
70 </section>
520
Tampilan gallery di halaman gallery ILKOOM Community
Kode yang diperlukan cukup panjang karena terdapat 9 kali perulangan untuk 9 gambar.
Namun strukturnya lebih sederhana dibandingkan halaman-halaman kita yang lain.
Seluruh gallery berada dalam tag <section> dengan id="gallery" (baris 2). Kemudian diikuti
class .container untuk membuat grid system. Tag <h1> dan <p> di baris 4-5 dipakai untuk
menampilkan judul teks "Photo Gallery" dan "Check out our photos".
Di baris 6 terdapat class .row dengan tambahan class .row-cols-auto, .row-cols-sm-2, .row-
cols-md-3, dan .row-cols-xxl-4. Semua class ini dipakai untuk membagi gallery menjadi 1
gambar untuk setiap baris di breakpoint extra small, 2 gambar setiap baris di breakpoint small,
3 gambar di setiap baris untuk breakpoint middle dan large, serta 4 gambar di setiap baris
untuk breakpoint extra large.
Masing-masing gambar berada dalam tag <div> dengan class .col, mt-4 dan mx-auto. Class
.col tanpa jumlah segmen ini diperlukan karena kita memakai cara penulisan row columns,
dengan jumlah kolom ditentukan dari class row pada baris 6-7 sebelumnya. Class .mx-auto
berguna agar posisi kolom berada di tengah jika terdapat ruang kosong di sisi kiri dan kanan.
Setiap tag <img> memiliki class .img-fluid dan .img-thumbnail untuk membuat efek gambar
responsive dan border putih. Tag <img> ini juga berada di dalam tag <a> yang berfungsi
sebagai link.
Jika diperhatikan, atribut href dalam tag <a> menuju ke file gambar. Untuk tampilan gallery
ini, saya menyiapkan 2 versi gambar: gambar kecil / thumbnail, serta gambar berukuran besar.
521
Isi atribut src dari setiap tag <img> berisi gambar versi kecil / thumbnail. Sedangkan isi
atribut href di tag <a> berisi alamat gambar versi full. Dengan demikian ketika gambar
thumbnail di klik, akan tampil gambar versi besar.
Untuk memberikan hover yang lebih menarik, saya ingin menambah sedikit kode transform
CSS. Silahkan buka file style.css dan tambah kode berikut:
style.css
1 /* GALLERY IMAGE - untuk efek hover */
2
3 #gallery img:hover {
4 transform: scale(1.1);
5 transition-property: transform ;
6 transition-duration: .5s;
7 }
Dengan ini, maka ketika gambar thumbnail di hover, gambar akan sedikit "membesar" sebagai
efek dari property transform CSS3 di baris 4. Efek transform yang dipakai adalah scale(1.1),
yakni mengubah ukuran gambar menjadi 1,1 kali dari ukuran saat ini (membesar sekitar 10%).
Agar efeknya lebih perlahan, dikombinasikan dengan property transition CSS3 di baris 5 dan 6,
artinya efek transform akan berjalan dalam waktu 0.5 detik.
Gambar pertama terlihat sedikit membesar saat cursor mouse berada diatasnya (hover)
Sampai di sini halaman gallery kita sebenarnya sudah selesai. Tapi saya ingin menambah fitur
light box agar lebih menarik.
Gallery Page – Light Box

Secara default, ketika gambar gallery di klik, web browser akan dimuat ulang (reload) untuk
menampilkan gambar yang ada atribut href tag <a> (versi besar). Untuk kembali ke gallery, kita
harus men-klik tombol back di web browser. Tidak ada yang salah dari cara ini karena seperti
itulah tag <a> bekerja.
522
Akan tetapi kebanyakan web modern menyediakan user interface yang lebih baik, yakni
memakai fitur yang dikenal sebagai light box. Ketika gambar thumbnail di klik, gambar ukuran
besar akan tampil sebagai jendela modal, bukan di halaman baru.
Efek light box dibuat menggunakan kode JavaScript yang tidak semua orang bisa
melakukannya. Diperlukan skill JavaScript yang cukup "mumpuni" untuk bisa merancangnya
sendiri.
Untungnya, tersedia banyak library yang tinggal pakai. Salah satu yang cukup praktis adalah
Lightbox2 yang dikembangkan oleh Lokesh Dhakar.
Cara penggunaannya mirip seperti library AOS yang kita praktekkan saat pembuatan template
ILKOOM Tech, yakni akses file .css dan .js, lalu tambah atribut yang diperlukan ke dalam tag
HTML.
Dokumentasi library lightbox2 berada di alamat lokeshdhakar.com/projects/lightbox2,

silahkan buka untuk melihat seperti apa efek yang bisa dibuat serta kode program yang
diperlukan:
Contoh tampilan lightbox2
Untuk bisa mengintegrasikan lightbox2, download file yang dibutuhkan dari link berikut:
github.com/lokesh/lightbox2/archive/refs/tags/v2.11.3.zip11.
Atau bisa juga buka alamat github.com/lokesh/lightbox2/releases (1), lalu klik tombol "Source
code (zip)" (2) pada versi terakhir. Kali ini saya akan download versi 2.11.3
11 https://github.com/lokesh/lightbox2/archive/refs/tags/v2.11.3.zip
523
Download file master lightbox2 di github.com/ashleydw/lightbox
File lightbox2-2.11.3.zip berukuran sekitar 232 kb. Buka file ini dan masuk ke dalam folder
dist. Lalu copy 3 file berikut:
1. File css/lightbox.css ke dalam folder belajar_bootsrap/css/.
2. File js/lightbox-plus-jquery.js ke dalam folder belajar_bootsrap/js/.
3. Folder images ke dalam folder belajar_bootsrap/.
Copy file lightbox2
524
Kemudian update bagian header dan akhir tag body agar file css dan js ini bisa diakses:
28.gallery_lightbox.html
1 <!DOCTYPE html>
2 <html lang="id">
3 <head>
4 ...
7 <link rel="stylesheet" href="css/lightbox.css">
9 </head>
10 <body>
11 ...
12 ...
14 <script src="js/lightbox-plus-jquery.js"></script>
15 </body>
16 </html>
Selanjutnya, tambah atribut data-lightbox="image-gallery" ke dalam seluruh tag <a>. Ini

diperlukan agar ketika link <a> di klik, akan "ditangkap" oleh lightbox2:
28.gallery_lightbox.html
1 
2 <section id="gallery" class="py-5">
3 ...
5 <a href="img/full-image1.jpg" data-lightbox="image-gallery" >
7 </a>
8 </div>
9
11 <a href="img/full-image2.jpg" data-lightbox="image-gallery">
13 </a>
14 </div>
15 ...
16 ...
17 ...
19 <a href="img/full-image9.jpg" data-lightbox="image-gallery">
21 </a>
22 </div>
23 </section>
Isi dari atribut data-lightbox ini boleh bebas karena hanya berfungsi untuk mengelompokkan
gallery. Semua tag <a> yang memiliki atribut data-lightbox="image-gallery" akan masuk ke
dalam satu kelompok gallery.
525
Persiapan sudah selesai, save kode di atas dan coba klik salah satu gambar thumbnail.
Sekarang gambar akan tampil di atas halaman saat ini:
Tampilan gallery dengan efek lighbox2 di halaman gallery ILKOOM Community
Di sisi kiri dan kanan gambar terdapat tombol panah untuk beralih ke gambar sebelum dan
sesudah (mirip seperti yang ada di carousel Bootstrap). Untuk menutup lightbox ini, klik sekali
di luar gambar atau tanda silang di kanan bawah. Saya yakin anda sudah sering melihat efek
ini, web duniailkom pun menggunakan lightbox pada setiap artikel.
14.16. Login Page

Halaman terakhir dari template ILKOOM Community adalah login.html. Tidak ada hal baru
yang akan kita buat, halaman ini akan berisi sebuah form login saja.
Untuk memulai silahkan buat file baru bernama login.html, copy seluruh kode dari halaman
home (index.html). Kemudian hapus semua kode dari slider hingga member list, artinya di
dalam file login.html ini hanya terdapat bagian navbar dan footer saja.
Pertama, kita akan edit menu navigasi untuk memindahkan class .active ke menu item Login:
1 ...
3 <a class="nav-link p-4" href="gallery.html">Gallery</a>
4 </li>
6 <a class="nav-link p-4 active" href="login.html">Login</a>
7 </li>
8 ...
526
Login Page – Header Image

Sama seperti halaman blog, article dan gallery, di halaman login ini saya juga akan membuat
header image. Kode yang dipakai nyaris sama, perbedaannya hanya di jenis gambar dan isi
teks.
29.login_header.html
2 <header id="login-header" class="header-image text-white d-none d-md-block">
5 <div class="row">
6 <div class="col">
7 <h1 class="display-1">Login</h1>
10 </div>
11 </div>
12 </div>
13 </div>
14 </header>
Tag <header> kali ini menggunakan atribut id="login-header", yang dipakai untuk kode CSS.
style.css
2
3 ...
4 #login-header{
7 }
Kode yang dipakai sama seperti header sebelumnya. Namun kali ini menggunakan gambar
yang berbeda dan judul teks "Login". Nilai property background-position-y di set menjadi -
100px untuk penyesuaian posisi gambar.
527
Tampilan header image di halaman login ILKOOM Community (dengan kode CSS)
Login Page – Breadcrumb

Halaman login juga saya buatkan breadcrumb yang mirip seperti di halaman gallery, yakni
breadcrumb pada satu segmen terpisah. Berikut kode programnya:
30.login_breadcrumb.html
1 
2 <section>
4 <div class="row">
5 <div class="col">
6
8 <nav>
11 <a href="index.html" class="text-info
12 text-decoration-none">Home</a>
13 </li>
14 <li class="breadcrumb-item active">Login</li>
15 </ol>
16 </nav>
17 <hr>
18
19 </div>
20 </div>
21 </div>
22 </section>
528
Tampilan breadcrumb di halaman login ILKOOM Community
Dari tampilan breadcrumb ini terlihat bahwa halaman login berada di bawah home.
Login Page – Form Login

Bagian utama halaman login berisi sebuah form. Berikut kode yang diperlukan:
31.login_form.html
1 
2 <section id="login" class="py-5">
4 <div class="row">
5
6 <div class="col-sm-8 col-md-6 col-lg-5 mx-auto">
7 <h4 class="text-center mb-4">Account Login</h4>
8 <form action="index.html">
9 <div class="form-floating mb-3">
10 <input type="email" class="form-control" id="floatingInput"
11 placeholder="name@example.com">
12 <label for="floatingInput">Email address</label>
13 </div>
14 <div class="form-floating mb-3">
15 <input type="password" class="form-control" id="floatingPassword"
17 <label for="floatingPassword">Password</label>
18 </div>
19 <div class="d-flex ">
20 <input type="submit" class="btn btn-info flex-fill" value="Login">
21 </div>
22 </form>
23 </div>
24
25 </div>
26 </div>
27 </section>
529
Tampilan form login di halaman login ILKOOM Community
Kode pembuatan form dimulai oleh tag <section> dengan atribut id="login" dan class .py-5
di baris 2. Class ini dipakai untuk membuat padding top dan padding bottom level 5.
Di baris 3 dan 4 terdapat class .container dan .row untuk membuat grid system. Ukuran
kolom saya set dengan class .col-sm-8, .col-md-6, dan .col-lg-5 (baris 6). Artinya untuk
breakpoint small, form akan mengambil 8 segmen. Untuk breakpoint middle sebanyak 6
segmen, dan untuk breakpoint large ke atas sebanyak 5 segmen. Class .mx-auto sendiri
dipakai agar form tampil di tengah halaman.
Inputan form dibuat dengan tampilan floating labels, dipadu dengan beberapa class margin
agar tidak terlalu rapat.
Dan... halaman login.html sudah selesai.
---
Dengan berakhirnya kode untuk halaman login.html, maka template ILKOOM Community
juga sudah lengkap. Total kita membuat 5 halaman: Home, Blog, Article, Gallery dan Login.
Bagian menu navigasi juga sudah berfungsi semua karena masing-masing file sudah tersedia.
Jika menemui kendala untuk "merangkai" semua kode yang ada, versi lengkap dari template ini
juga tersedia di folder bab_14_ILKOOM_community_template_final pada file
belajar_bootstrap.zip.
Silahkan luangkan waktu sebentar untuk mempelajari semua kode-kode ini. Jika butuh 1 atau 2
530
hari, itu tidak masalah. Saya sendiri butuh 1 – 2 minggu untuk merancang template ILKOOM
Community.
Anda juga bisa modifikasi atau menambah fitur-fitur baru. Misalkan bagaimana dengan
membuat efek library AOS ke dalam halaman home seperti di template ILKOOM Tech? Atau
bagaimana dengan membuat sebuah bagian FAQ di bawah halaman login menggunakan
komponen accordion / collapse Bootstrap? Silahkan berkreasi.
Bisa juga dengan mengganti semua dummy teks lorem ipsum dengan teks asli. Dalam tahap ini
anda akan lihat bahwa sebuah template memiliki batasan panjang teks. Misalnya untuk judul
artikel di halaman blog yang jika terlalu panjang menjadi kurang pas. Solusinya, bisa ganti
judul teks atau sesuaikan ukuran font.
Mencari gambar yang pas juga sangat berpengaruh ke tampilan akhir. Template ILKOOM
Community tampak menarik karena memakai gambar yang "pas" dengan warna teks, serta
resolusi gambar yang besar. Setiap gambar saya crop satu persatu agar tidak pecah (pekerjaan
yang memang cukup membosankan).
Saya sering melihat template yang seharusnya bagus, jadi terlihat "kacau" karena pemilihan
gambar yang kurang sesuai. Misalnya gambar pecah karena resolusi terlalu rendah atau
ukuran gambar yang tidak proporsional. Dalam merancang template, kemampuan
programming baru setengah dari skill yang diperlukan. Setengah lagi adalah skill design.
Sama seperti template ILKOOM Tech, jika breakpoint extra large terasa terlalu besar, bisa
dibatasi dengan menambah kode CSS berikut:
style.css
1 /*-- Nonaktifkan XXL Breakpoint (opsional) --*/
2
3 @media (min-width: 1200px) {
4 .container {
5 max-width: 1140px;
6 }
7 }
Kode ini lebih ke opsional saja, tergantung selera setiap designer.
531
Penutup
Penutup
Sepanjang buku ini kita telah membahas banyak hal terkait Bootstrap, mulai dari cara
penggunaan Bootstrap mulai dari grid system, utility class, berbagai komponen bawaan
Bootstrap, bootstrap icon hingga studi kasus pembuatan template.
Namun dengan total 500 halaman lebih, apa yang kita pelajari barulah sedikit dari cakupan
Bootstrap yang sesungguhnya. Berikut beberapa langkah lanjutan yang bisa anda pilih untuk
memperdalam ilmu web design:
Latihan Buat Template

Berbekal materi dalam buku ini, skill yang di dapat seterusnya bisa membuat template
Bootstrap sendiri seperti ILKOOM Tech dan ILKOOM Community. Terutama jika disertai
dengan skill CSS yang cukup.
Tipsnya, ambil inspirasi dari template yang sudah ada. Situs marketplace template seperti
themeforest.net menyajikan ribuan template profesional. Kita bisa tiru design yang ada untuk
dibuat menggunakan Bootstrap. Lebih bagus lagi jika design tersebut di "improve" supaya
tampil lebih baik lagi.
Ketika membuat template ILKOOM Community, saya juga terinspirasi dari template
aardvark.ghostpool.com/original (didapat dari hasil browsing template themeforest),
kemudian digabung dengan tampilan dari template lain plus modifikasi sana-sini. Hasilnya
malah lebih menarik daripada template tersebut.
Jika dirasa terlalu sulit, silahkan skip dan cari template yang lebih sederhana. Intinya adalah
latihan membuat berbagai bentuk komponen website.
Alternatif lain bisa juga mempelajari template gratisan yang tersedia di internet, misalnya tes
ketik di Google "free bootstrap 5 template", banyak template gratis yang bisa di download.
Namun tidak semua template ini mudah dipahami. Sebagian besar template modern
menggunakan library tambahan yang bukan berasal dari Bootstrap, seperti library AOS dan
lighbox2 yang kita pakai di studi kasus bab terakhir. Memahami kode orang lain juga cukup
sulit, apalagi jika tidak ada dokumentasi serta penjelasan maksud dari kode tersebut.
Yang paling pas, silahkan buat sendiri kode sendiri dan jadikan web yang sudah ada sebagai
sumber inspirasi (bukan sekedar copy paste).
532
Penutup
themeforest.net menyediakan ribuan template professional
Tingkatkan Skill CSS dan Desain

Bootstrap memang memudahkan kita untuk membuat design web, tapi skill CSS tetap yang
utama. Seperti dalam studi kasus di akhir buku ini, saya tetap butuh kode CSS untuk mengatur
posisi dan menginput gambar background.
CSS3 membawa banyak fitur baru yang terus bertambah, seperti CSS flexbox. Saat ini secara
perlahan flexbox sudah menggantikan teknik float dalam perancangan web. Ditambah lagi
dengan CSS grid yang menjadi "senjata baru" dalam merancang desain web .
Mempelajari berbagai trik-trik CSS juga disarankan, seperti teknik negatif margin yang kita
pakai untuk menggeser posisi gambar, atau teknik overlay untuk mengubah tampilan gambar
background.
Web desain juga terdiri dari 2 bagian besar: coding dan desain. Tanpa skill desain, template
yang dihasilkan juga tidak akan menarik. Misalnya bagaimana cara memadukan 2 warna yang
berbeda, berapa ukuran segmen yang pas untuk sidebar, berapa jarak yang harus di buat
antara satu komponen dengan komponen lain, mencari font yang sesuai, dst.
Skill design ini juga bisa didapat dengan banyaknya latihan membuat template serta
mempelajari template yang sudah ada (yang kita anggap menarik). Beberapa web yang secara
khusus membahas web design diantaranya: css-tricks.com, creativebloq.com, dan
smashingmagazine.com.
533
Penutup
Advanced Bootstrap
Apa yang kita pelajari di buku ini bisa dibilang baru setengah dari materi Bootstrap itu sendiri.
Setengah lagi saya sebut sebagai "Advanced Bootstrap". Advanced Bootstrap ini berisi teknik
Bootstrap lanjutan, yakni memodifikasi "daleman" Bootstrap.
Sebagai contoh, pilihan warna komponen Bootstrap sangat terbatas. Untuk warna background
saja hanya tersedia 10 pilihan, yakni .bg-primary, .bg-secondary, .bg-warning, dst. Bagaimana
jika kita ingin memakai warna lain?
Salah satu cara adalah dengan menimpa property CSS yang dipakai Bootstrap. Jika saya ingin
semua komponen Bootstrap yang menggunakan warna .bg-info dan .text-info ditukar
menjadi warna biru dongker atau biru navy dengan kode rgb #000080, bisa memakai kode CSS
berikut:
1 .bg-info {
2 background-color: #000080 !important;
3 }
4 .text-info {
5 color: #000080 !important;
6 }
Sekarang semua komponen Bootstrap yang menggunakan kedua class tersebut warnanya
sudah berubah. Namun bagaimana dengan class .btn-info? Maka kita harus tambah kode CSS
lagi.
Cara di atas tidak salah dan memang bisa dipakai, akan tetapi ini bukan cara yang disarankan
oleh Bootstrap. Untuk mengubah kode warna komponen, Bootstrap menyarankan mengedit
langsung kode CSS Bootstrap yang ditulis dalam format Sass.
Sass (sass-lang.com) yang merupakan singkatan dari Syntactically Awesome Style Sheets,
adalah sebuah format penulisan kode CSS dengan berbagai fitur tambahan seperti perulangan
(konsep yang belum tersedia di CSS).
Sass ditulis dalam file ber-ekstensi .scss yang nantinya di proses ulang menjadi file .css.
Karena itu pula Sass ini disebut sebagai CSS preprocessor. Jika kita ingin mengubah langsung
kode CSS Bootstrap, maka mau tidak mau harus belajar lagi tentang Sass.
Selain itu beberapa komponen Bootstrap sangat butuh kode JavaScript. Misalnya jendela
modal yang butuh tambahan kode JavaScript.
Inilah yang saya sebut sebagai advanced Bootstrap, yakni materi lanjutan Bootstrap yang tidak
bisa dipelajari langsung karena punya "syarat" skill tambahan.
Framework CSS Lain

Bootstrap bukan satu-satunya framework CSS. Di luar sana terdapat puluhan framework CSS
534
Penutup
lain sebagai alternatif. Anda bisa mempelajari framework ini agar punya skill yang lebih
beragam. Setiap framework punya kelebihan dan kekurangan masing-masing. Kadang ada
tampilan yang lebih mudah dibuat jika menggunakan framework A dibandingkan framework B.
Berikut beberapa pilihan framework CSS yang cukup terkenal:
✔ TailwindCSS (tailwindcss.com), framework "inline CSS" yang belakangan sangat

populer.
✔ Materialize (materializecss.com), framework CSS yang menggunakan konsep Material

Design dari Google.
✔ Bulma (bulma.io), framework CSS yang berbasis flexbox.
✔ PureCSS (purecss.io), framework CSS minimalis dengan ukuran file yang kecil
✔ Semantic UI (semantic-ui.com)
Di luar daftar ini masih banyak framework lain, tapi 5 daftar ini sudah lebih dari cukup.
Memahami secara mendalam 2 atau 3 framework lebih baik daripada tahu banyak tapi hanya
kulitnya saja.
Tampilan halaman web Tailwind CSS
Server Side Programming

Khusus bagi yang ingin mempelajari web development (proses pembuatan web) secara
keseluruhan, bisa lanjut ke server side programming seperti PHP dan MySQL.
Web programming bisa di dibagi ke dalam 2 bidang besar: front-end dan back-end.
Front-end adalah bidang yang fokus mempelajari sisi tampilan luar dari sebuah website, yakni
535
Penutup
design nya saja. Skill dasar yang harus dikuasai adalah HTML, CSS dan JavaScript (opsional).
Materi Bootstrap yang kita bahas dalam buku ini adalah materi tingkat lanjut HTML + CSS.
Back-end adalah bidang yang fokus mempelajari cara pemrosesan web di server, misalnya
memproses form yang diisi user, menyimpan data ke database, mengelola hak akses, dsb. Skill
dasar yang harus dikuasai adalah PHP dan MySQL, selain itu ada alternatif bahasa lain seperti
JavaScript (Node.js), ASP.Net, atau Python (Django).
Karena saking banyaknya materi yang harus dipelajari, banyak yang terpaksa harus fokus ke
salah satu bidang, yakni front-end saja atau back-end saja. Namun tidak ada salahnya jika
ingin mempelajari 2 bidang ini sekaligus yang dikenal sebagai full stack web developer (front-
end + back-end).
Dengan memahami kedua bagian ini, anda bisa membuat web lengkap yang siap pakai. Sebagai
contoh, template ILKOOM Community yang kita rancang barulah sisi design saja. Agar setiap
user bisa mendaftar dan menulis artikel sendiri, maka harus "dibawa" ke sisi server untuk
dibuatkan kode PHPnya.
Saya tidak mengharuskan setiap web designer paham PHP, tapi ini bisa menjadi nilai tambah
tersendiri.
---
Akhir kata, semoga materi yang ada di buku Bootstrap Uncover ini bisa bermanfaat. Mohon
maaf jika ada kata-kata yang salah dan kekurangan di sana-sini. Apabila ada saran atau koreksi
materi, bisa menghubungi duniailkom@gmail.com atau via WA di 083180285808.
Terimakasih atas dukungannya dengan membeli versi asli eBook Bootstrap Uncover. Semoga
ilmu yang di dapat berkah dan bermanfaat. Sampai jumpa di buku Duniailkom selanjutnya :)
536
Daftar Pustaka
Daftar Pustaka
Sepanjang penulisan buku Bootstrap Uncover, saya mengumpulkan bahan dari berbagai
sumber. Anda bisa mengunjungi daftar pustaka ini untuk menambah pengetahuan seputar
Bootstrap dan CSS.
 Bootstrap Documentation: https://getbootstrap.com/docs
 CSS Tricks: https://css-tricks.com
 W3schools Bootstrap Tutorial: https://www.w3schools.com/bootstrap4/default.asp
 Brad Traversy, Bootstrap 4 From Scratch With 5 Projects, Packt Publishing 2018
537

Bootstrap 5 Uncover - Panduan Belajar Framework Bootstrap (Ver 1.1)

Uploaded by

Copyright:

Available Formats

You might also like

Bootstrap 5 Uncover - Panduan Belajar Framework Bootstrap (Ver 1.1)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap 5 Uncover - Panduan Belajar Framework Bootstrap (Ver 1.1)

Uploaded by

Copyright:

Available Formats

1

✔ Bootstrap 4 Uncover – Oktober 2018

✔ Bootstrap 5 Uncover – Juni 2021

✔ Bootstrap 5 Uncover – Juni 2021

✔ Mini Update Bootstrap 5.2 – Desember 2022

Cover Photo by Vanessa Loring on Pexels

Ucapan Terima kasih․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 13

2. Text Editor Visual Studio Code․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 27

5. Bootstrap Utilities & Helpers․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 99

6. Bootstrap Content․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 154

7. Button Related Component․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 196

8. Navigation Related Component․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 232

9. Display Related Component․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 267

10. Form Styling․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 332

11. Flex Utilities․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 369

12. Bootstrap Icon․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 404

13. ILKOOM Tech Template․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 410

14. ILKOOM Community Blog Template․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 447

Daftar Pustaka․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․ 537

Padang Panjang, 2022

Terima kasih untuk tidak memperbanyak / mengedarkan / mencopy eBook ini

Untuk yang membeli dari Duniailkom, saya ucapkan banyak terimakasih :)

✔ Mencetak eBook ini untuk keperluan pribadi dan dibaca sendiri.

✔ Mencopy eBook ini ke laptop/smartphone/tablet milik sendiri.

Anda tidak dibolehkan untuk:

✗ Membagikan eBook ini kepada murid/siswa/mahasiswa (jika digunakan untuk bahan

Tips Menghapal Kode Bootstrap

Begitu juga dengan programming, kode-kode program jumlahnya sangat banyak.

1. Berkenalan dengan Bootstrap

1.1. Pengertian Bootstrap

Tampilan website resmi Bootstrap di getbootstrap.com

Kenapa harus pakai framework seperti Bootstrap? Ada beberapa alasan:

Bootstrap merupakan sebuah "front-end framework". Artinya Bootstrap secara khusus

1.2. Sejarah Bootstrap

Tampilan website Bootstrap ketika versi 1.4 (sumber gambar: scotch.io)

1.3. Apa Saja Yang Baru di Bootstrap 5?

Berikut beberapa perubahan / fitur baru di Bootstrap 5:

➢ Tidak lagi butuh library jQuery.

➢ Penambahan breakpoint xxl (extra extra large).

➢ Penambahan komponen Offcanvas dan Placeholder (Bootstrap 5.2)

➢ Penyesuaian class untuk form serta fitur floating label.

1.4. Bootstrap Alternatif

✔ Tailwind CSS: https://tailwindcss.com

✔ Semantic UI: https://semantic-ui.com

✔ Material Design: https://material.io

✔ Pure CSS: https://purecss.io

Preview template ILKOOM Tech dan ILKOOM Community

# Terimakasih sudah membeli eBook / buku asli dari Duniailkom #

~ Semoga ilmu yang didapat berkah, halal dan bermanfaat. Terimakasih ~

2. Text Editor Visual Studio Code

2.1. Instalasi Visual Studio Code

Gambar: Tampilan website resmi Visual Studio Code di https://code.visualstudio.com

Gambar: Tampilan awal text editor VS Code

Gambar: Menambahkan folder ke VS Code

Gambar: Folder belajar_bootstrap sudah terintegrasi dengan VS Code

Gambar: Mencoba fitur shortcut Emmet di VS Code

Perintah div>p>strong akan menghasilkan kode berikut:

Perintah div*5 akan menghasilkan kode berikut:

Perintah h1+div.container>p akan menghasilkan kode berikut: