Jurusan Teknologi Informasi Politeknik Negeri Malang

Program Studi D4 Teknik Informatika

Pertemuan ke-14: Bootstrap
Mata Kuliah Desain dan Pemrograman Web
Tim Ajar Desain dan Pemrograman Web

Topik
- Pengenalan Bootstrap

Tujuan
Mahasiswa diharapkan mampu:
1. Memahami konsep Bootstrap
2. Mengetahui penerapan Bootstrap untuk desain tampilan website

Pendahuluan

Pendahuluan Bootstrap

Bootstrap adalah framework (kerangka kerja) front-end untuk pengembangan web yang lebih cepat dan lebih mudah.
Bootstrap mencakup template desain berbasis HTML dan CSS untuk membuat komponen antarmuka pengguna yang
umum seperti formulir, tombol, navigasi, dropdown, peringatan, modals, tab, akordeon, carousel, tooltips, dan
sebagainya. Bootstrap menyediakan class-class CSS yang sudah terintegrasi dengan javascript dan jQuery. Sehingga
kita cukup memanggil class-class yang sudah disediakan ketika ingin menciptakan website yang memiliki desain
menarik.

Bootstrap memudahkan penggunanya untuk untuk membuat tata letak web yang fleksibel dan responsif. Bootstrap
awalnya dibuat oleh seorang desainer dan pengembang di Twitter pada pertengahan 2010. Sebelum menjadi open-
source framework, Bootstrap dikenal sebagai Twitter blueprint. Saat ini, versi 4.3 merupakan versi terakhir dan stabil
dari Bootstrap.

Keuntungan menggunakan Bootstrap antara lain:

- Menghemat banyak waktu: kita dapat menghemat banyak waktu dan tenaga menggunakan template dan kelas
desain Bootstrap yang telah ditentukan sebelumnya dan berkonsentrasi pada pekerjaan pengembangan lainnya.
- Fitur responsive: dengan menggunakan Bootstrap kita dapat dengan mudah membuat situs web responsif yang
muncul lebih tepat pada perangkat dan resolusi layar yang berbeda tanpa perubahan markup.
- Desain yang konsisten: semua komponen Bootstrap berbagi template dan gaya desain yang sama, sehingga desain
dan tata letak halaman web akan konsisten.
- Mudah digunakan: Bootstrap sangat mudah digunakan, siapapun dengan pengetahuan dasar tentang HTML, CSS
dan JavaScript dapat memulai pengembangan dengan Bootstrap.
- Kompatibel dengan berbagai browser: Bootstrap dibuat dengan mempertimbangkan browser modern sehingga
kompatibel dengan semua browser seperti Chrome, Firefox, Safari, Internet Explorer, dll.
- Open Source: Bootstrap sepenuhnya gratis untuk diunduh dan digunakan.

1
Praktikum Bagian 1. Memulai Bootstrap

Terdapat beberapa cara untuk menggunakan Bootstrap, diantaranya adalah mendownload package Bootstrap di
website resmi atau menggunakan CDN (Content Delivery Network).

- Melalui Download File Bootstrap

Ikuti langkah-langkah berikut untuk penggunaan Bootstrap dengan download package secara manual di website
getbootstrap.com.
Langkah Keterangan
1 Download Bootstrap di website resmi: https://getbootstrap.com/
Klik tombol download.
2 Selanjutnya pilih versi 4 dan scroll ke bagian “Compiled CSS dan JS” dan pilih tombol Download.

3 Buat folder minggu14 di dalam xampp/htdocs.

Extract file “bootstrap-4.6.1-dist.zip”. Berikut adalah isi dari bootstrap-4.6.1-dist

Copy folder css dan js dan paste di folder minggu14.

4 Buat file index.html di dalam folder minggu14.

2
 5 Buka file index.html melalui browser. Dan lakukan screenshot hasil browser.
6 Masukkan code untuk menyisipkan Bootstrap pada index.html seperti di bawah ini. (Ubah kalimat
dengan nama Anda)

Keterangan:
- Tag <meta name="viewport"> berfungsi untuk menyesuaikan tampilan web terhadap layar
pengguna. Tag ini wajib bila kita ingin membuat web yang responsif.
- Tag <link rel="..."> berfungsi untuk menyisipkan file CSS bootstrap ke dalam dokumen HTML.
7 Buka kembali file index.html melalui browser. Tunjukkan hasil screenshot index.html dan berikan
juga screenshot pada langkah 5. Jelaskan perbedaan dengan hasil pada langkah ke-5 (soal no 1)

- Melalui CDN
Penambahkan Bootstrap melalui CDN (Content Delivery Network / Jaringan Pengiriman Konten) menawarkan
keuntungan kinerja dengan mengurangi waktu pemuatan, karena file dihosting di beberapa server yang tersebar di
seluruh dunia. Sehingga ketika pengguna meminta file, file akan disajikan dari server terdekat. Kekurangan
penggunaan CDN adalah kita harus tersambung ke internet.
Ikuti langkah-langkah berikut untuk penggunaan Bootstrap dengan CDN.
Langkah Keterangan
1 Buka file index.html di dalam folder minggu14.
Ubah bagian <link rel= … > dengan memasukkan link CSS Bootstrap.
2 Komponen Bootstrap banyak memerlukan penggunaan JavaScript agar berfungsi, antara lain
jQuery, Popper.js, dan plugin JavaScript.
Tambahkan <script> untuk mengaktifkan Javasript. jQuery harus didahulukan, lalu Popper.js, dan
kemudian plugin JavaScript dari Bootstrap.

3
 3 Kode pada index.html akan terlihat seperti berikut.

4 Buka kembali file index.html melalui browser. Maka hasilnya akan memiliki tampilan dengan
template Bootstrap.

Praktikum Bagian 2. Container Bootstrap

Bootstrap juga membutuhkan elemen penampung (container) untuk membungkus konten website. Ada dua kelas
container yang bisa dipilih:
1. Kelas .container: menyediakan container dengan lebar tetap yang responsif.
Lebar container (max-width) akan berubah pada berbagai ukuran layar:

2. Kelas .container-fluid: menyediakan container dengan lebar penuh, yang mencakup seluruh lebar viewport
(lebarnya selalu 100%).

Ikuti langkah-langkah berikut untuk membuat container pada Bootstrap:

Langkah Keterangan
1 Buat file container.html di dalam folder minggu14. Copy isi dari file index.html
2 Ubah kode pada bagian body menjadi seperti di bawah ini.

3 Jalankan container.html pada browser. Ubah ukuran browser menjadi lebih kecil, jelaskan apa yang
terjadi dan beri screenshoot hasil pada browser (soal no 2)

4 Ubah kembali kode pada bagian body di container.html seperti di bawah ini.

4
 5 Jalankan container.html pada browser. Ubah ukuran browser menjadi lebih kecil. Beri screenshoot
hasil pada browser dan jelaskan perbedaannya dengan langkah ke-3 (soal no 3)

Praktikum Bagian 3. Sistem Grid Bootstrap

Bootstrap menggunakan Grid System untuk menghasilkan halaman website yang responsif. Konsep design layout
website menggunakan grid system bootstrap yaitu dengan cara membagi sebuah halaman website menjadi beberapa
baris dan kolom. Sistem grid Bootstrap dibangun dengan flexbox dan berisi 12 kolom. Dengan penentuan jumlah grid
ini, maka website yang dibangun menggunakan bootstrap akan responsif menyesuaikan dengan lebar ataupun resolusi
layar dari perangkat yang mengakses. Kita dapat mengelompokkan kolom untuk membuat kolom yang lebih lebar.
Pastikan bahwa jumlahnya grid adalah 12 atau kurang, kita tidak harus menggunakan semua (12 kolom) yang tersedia.

Gambar 1 Sistem Grid Pada Bootstrap

Sistem grid Bootstrap 4 memiliki lima kelas:

1. .col- (perangkat ekstra kecil - lebar layar kurang dari 576 piksel)
2. .col-sm- (perangkat kecil - lebar layar sama dengan atau lebih besar dari 576 piksel)
3. .col-md- (perangkat sedang - lebar layar sama dengan atau lebih besar dari 768 piksel)
4. .col-lg- (perangkat besar - lebar layar sama dengan atau lebih besar dari 992px)
5. .col-xl- (perangkat xlarge - lebar layar sama dengan atau lebih besar dari 1200 piksel)
Setiap kelas akan di-scale-up, jadi jika ingin menyetel lebar yang sama untuk sm dan md, hanya perlu menentukan sm.
Kita juga dapat membuat kolom dengan lebar yang sama untuk semua perangkat (ekstra kecil, kecil, sedang, besar,
dan ekstra besar) hanya dengan menggunakan class .col, tanpa menentukan nomor kolom apa pun.

Beberapa aturan sistem grid Bootstrap 4:

 Row (baris) harus ditempatkan dalam .container atau .container-fluid untuk alignment dan padding yang tepat
 Gunakan row untuk membuat kelompok kolom horizontal
 Konten harus ditempatkan dalam kolom
5
 Kelas standar seperti .row dan .col-sm-4 tersedia untuk membuat tata letak kisi dengan cepat
 Grid kolom dibuat dengan menentukan jumlah dari 12 kolom yang tersedia. Misalnya, tiga kolom yang sama akan
menggunakan tiga .col-sm-4
 Lebar kolom dalam persentase, sehingga selalu dapat menyesuaikan dan berukuran relatif terhadap elemen
induknya

Ikuti langkah-langkah berikut untuk membuat kolom grid Bootstrap:

Langkah Keterangan
1 Buat file grid.html di dalam folder minggu14. Copy isi dari file index.html
2 Ubah kode pada bagian body menjadi seperti di bawah ini.

3 Jalankan grid.html pada browser. Jelaskan apa yang terjadi dan beri screenshoot hasil pada browser
(soal no 4)

4 Buat file grid2.html di dalam folder minggu14. Copy isi dari file index.html
5 Ubah kode pada bagian body menjadi seperti di bawah ini.

6
 6 Jalankan grid2.html pada browser. Jelaskan apa yang terjadi serta perbedaannya dengan langkah 3,
dan beri screenshoot hasil pada browser (soal no 5)

Untuk mengontrol berapa banyak kolom yang harus muncul di samping satu sama lain, kita dapat menggunakan
kelas .row-cols- *:
Langkah Keterangan
1 Buat file grid3.html di dalam folder minggu14. Copy isi dari file grid2.html
2 Ubah kode pada bagian body menjadi seperti di bawah ini.

3 Jalankan grid3.html pada browser. Jelaskan apa yang terjadi dan beri screenshoot hasil pada
browser (soal no 6)

7
Praktikum Bagian 4. Tabel Pada Bootstrap

Bootstrap menyediakan beberapa class yang dapat di gunakan dalam tabel atau tag <table>, yaitu sebagai berikut:
class keterangan
table class default sehingga tampilannya sama dengan tabel biasa tetapi class table harus di
sertakan ketika menggunakan class bootstrap.
table-stripped digunakan untuk menampilkan tabel dengan format “belang-belang”, atau warna
barisnya berbeda/strip
table-bordered digunakan untuk membuat garis, border/bingkai pada sebuah tabel
table-hover digunakan untuk membuat tabel berubah warna pada setiap barisnya ketika kursor
berada diatas baris

Pada baris atau tag <tr> dan cell (tabel data) atau <td> juga terdapat beberapa kelas yang dapat kita gunakan. Class-
class tersebut adalah sebagai berikut:
class keterangan
active digunakan untuk menampilkan baris ataupun cell yang sedang aktif/terpilih,
warnanya default abu-abu
success digunakan untuk menampilkan baris yang sudah berhasil diperbaharui(sukses),
warnanya hijau
Info digunakan untuk menampilkan baris berupa informasi, warnanya biru
warning digunakan untuk menampilkan baris berwarna oranye
danger digunakan untuk menampilkan baris berwarna merah

Ikuti langkah-langkah berikut untuk memahami cara mendesain tabel dengan Bootstrap:
Langkah Keterangan
1 Buat file tabel.html di dalam folder minggu14. Copy isi dari file grid2.html
2 Ubah kode pada bagian body menjadi seperti di bawah ini.

3 Jalankan tabel.html pada browser. Jelaskan hasil pengamatanmu dan beri screenshoot hasil pada
browser (soal no 7)

8
Praktikum Bagian 5. Pengaturan Gambar pada Bootstrap

Bootstrap menyediakan class untuk pengaturan gambar sehingga kita dapat dengan mudah
menampilkan gambar dengan bentuk rounded, circle dan thumbnail maupun responsif
mengikuti resolusi layar pengguna. Class-class untuk pengaturan gambar dalam bootstrap adalah sebagai berikut:
class Keterangan
.rounded Untuk membuat gambar berbentuk bulat/melengkung pada empat sudutnya
.rounded-circle Untuk membuat gambar berbentuk lingkaran
.img-thumbnail Untuk membuat gambar thumbnail yang memiliki jarak pemisah seperti bingkai
.img-fluid Untuk membuat tampilan gambar responsif

Ikuti langkah berikut untuk memahami pengaturan gambar pada Bootstrap:

Langkah Keterangan
1 Buat file image.html di dalam folder minggu14. Copy isi dari file index.html
2 Ubah kode pada bagian body menjadi seperti di bawah ini.

3 Jalankan image.html pada browser. Ubah ukuran browser menjadi lebih kecil. Jelaskan hasil
pengamatanmu dan beri screenshoot hasil pada browser (soal no 8)

9
Praktikum Bagian 6. Membuat Jumbotron dengan Bootstrap

Jumbotron merupakan kotak abu-abu besar untuk menunjukkan beberapa konten atau informasi khusus. Di dalam
jumbotron, kita dapat meletakkan elemen HTML yang valid, termasuk kelas Bootstrap lainnya.
Langkah Keterangan
1 Buat file jumbotron.html di dalam folder minggu14. Copy isi dari file index.html
2 Ubah kode pada bagian body menjadi seperti di bawah ini.

3 Jalankan jumbotron.html pada browser. Jelaskan hasil pengamatanmu dan beri screenshoot hasil
pada browser (soal no 9)

Praktikum Bagian 7. Membuat Alert dengan Bootstrap

Bootstrap sudah tersedia class khusus untuk menampilkan alert. Penggunaanya cukup memanggil class alert kemudian
menambahkan jenis class alert yang ingin digunakan. Jenis-jenis class alert yang dapat digunakan untuk membuat
pesan peringatan dengan bootstrap adalah sebagai berikut:
class Keterangan
alert-success untuk menampilkan pesan ketika proses dalam form sudah berhasil dieksekusi(sukses).
Alert yang ditampilkan dengan warna background hijau.
alert-info untuk menampilkan sebuah informasi, bantuan ataupun tips dalam pengisian sebuah
form. Alert yang ditampilkan dengan warna background biru.
alert-warning untuk menampilkan pesan peringatan. Alert yang ditampilkan dengan warna
background kuning.
alert-danger untuk menampilkan pesan ketika sebuah proses dalam form gagal ataupun terjadi
kesalahan pengisian. Alert yang ditampilkan dengan warna background merah.
Untuk menutup pesan peringatan, tambahkan kelas .alert-dismissible ke container alert. Kemudian tambahkan class
= "close" dan data-dismiss = "alert"

Langkah Keterangan
1 Buat file alert.html di dalam folder minggu14. Copy isi dari file index.html
2 Ubah kode pada bagian body menjadi seperti di bawah ini.

10
 3 Jalankan alert.html pada browser. Jelaskan hasil pengamatanmu dan beri screenshoot hasil pada
browser (soal no 10)

Praktikum Bagian 8. Membuat Button dengan Bootstrap

Button/tombol digunakan untuk submit (mengirimkan) dan reset (mengosongkan) isi data dalam sebuah form. Button
juga dapat digunakan sebagai link atau tautan. Agar tampilan sebuah website lebih menarik dan interaktif, bootstrap
menyediakan beberapa class. Berikut adalah class yang digunakan untuk mengatur ukuran button.
class keterangan
btn-lg Untuk membuat button ukuran besar
btn-md Untuk membuat button ukuran sedang
btn-sm Untuk membuat button ukuran kecil
btn-xs Untuk membuat button ukuran sangat kecil
btn-block Untuk membuat button yang lebarnya mengikuti lebar kolom

Berdasarkan warna, bootstrap juga menyediakan beberapa jenis class, yaitu:

class keterangan
btn-default Untuk membuat button berwarna default/putih
btn-primary Untuk membuat button berwarna biru
btn-success Untuk membuat button berwarna hijau
btn-info Untuk membuat button berwarna biru muda
btn-warning Untuk membuat button berwarna kuning
btn-danger Untuk membuat button berwarna merah
btn-link Untuk membuat button tanpa warna hanya tulisan

Untuk menggunakan class button diatas, terlebih dahulu harus menyertakan class btn sebelum class untuk
menentukan ukuran button dan warna button. Semua class Button tersebut dapat kita gunakan dalam tag <button>,
<a> dan tag <input>.

Ikuti langkah berikut untuk mendesain button:

Langkah Keterangan
11
 1 Buat file button.html di dalam folder minggu14. Copy isi dari file index.html
2 Ubah kode pada bagian body menjadi seperti di bawah ini.

3 Jalankan button.html pada browser. Jelaskan hasil pengamatanmu dan beri screenshoot hasil pada
browser (soal no 11)

Praktikum Bagian 9. Membuat Navbar dengan Bootstrap

Navbar umumnya berada di bagian atas sebuah website dan pada navbar inilah ditampilkan menu utama sebuah
website. Jika sebuah website memiliki banyak menu, maka dropdown menu adalah solusi untuk menata menu-menu
tersebut berdasarkan kelompok ataupun kategori.
Bootstrap sudah menyediakan class untuk navbar dan dropdown menu, sehingga kita dapat dengan mudah membuat
navbar dan dropdown menu yang responsif.
Penggunaan class navbar sedikit berbeda dengan penggunaan class sebelumnya dimana class tersebut berada dalam
tag <div>. Beda halnya dengan Navbar, class navbar berada diluar class container ataupun bisa dikatakan class
container berada dalam class navbar. Class navbar memiliki posisi bagian terluar dari sebuah halaman website.

Langkah Keterangan
1 Buat file navbar.html di dalam folder minggu14. Copy isi dari file index.html
2 Ubah kode pada bagian body menjadi seperti di bawah ini.

12
3 Jalankan navbar.html pada browser. Jelaskan hasil pengamatanmu dan beri screenshoot hasil pada
browser (soal no 12)

4 Buat file navbar2.html di dalam folder minggu14. Copy isi dari file navbar.html
5 Ubah kode pada bagian body menjadi seperti di bawah ini.

6 Jalankan navbar2.html pada browser. Jelaskan hasil pengamatanmu dan beri screenshoot hasil pada
browser (soal no 13)

13
Tugas:
Buatlah sebuah halaman web statis dengan menggunakan Bootstrap.
Tema mengenai kebudayaan Indonesia.
Halaman tersebut minimal terdiri terdiri dari:
- Navbar
- Gambar
- Jumbotron
Jika dapat menambahkan elemen lain dari Bootstrap, maka akan mendapat nilai tambahan (pelajari dari:
https://www.w3schools.com/bootstrap4/default.asp)

Referensi :
1) Kaban, Roberto. (2017). Design Website Responsive dengan Bootstrap. Medan: itgeek.id.
2) https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
3) https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/

14