Jurusan Teknologi Informasi Politeknik Negeri Malang

Jobsheet-14: Bootstrap
Mata Kuliah Desain dan Pemrograman Web
Pengampu: Tim Ajar Desain dan Pemrograman Web
November 2020

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/docs/4.5/getting-started/download/
2 Scroll ke bagian “Compiled CSS dan JS” dan pilih tombol Download.

3 Buat folder latihanBootstrap di dalam folder praktik_php yang digunakan pada praktikum-
praktikum sebelumnya.
Extract file “bootstrap-4.5.3-dist.zip”. Berikut adalah isi dari bootstrap-4.5.3-dist

Copy folder css dan js dan paste di folder latihanBootstrap.

4 Buat file index.html di dalam folder latihanBootstrap.

2
 5 Buka file index.html melalui 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.
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 latihanBootstrap.
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.

3
 Tambahkan <script> untuk mengaktifkan Javasript. jQuery harus didahulukan, lalu
Popper.js, dan kemudian plugin JavaScript dari Bootstrap.
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 latihanBootstrap. 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
 4 Ubah kembali kode pada bagian body di container.html seperti di bawah ini.

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:

5
 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
 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 latihanBootstrap. 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 latihanBootstrap. 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 latihanBootstrap. 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 latihanBootstrap. 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
8
 pada browser (soal no 7)

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 latihanBootstrap. 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 latihanBootstrap. 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 latihanBootstrap. 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:

11
 Langkah Keterangan
1 Buat file button.html di dalam folder latihanBootstrap. 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 latihanBootstrap. 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 latihanBootstrap. 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. 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