Modul Dasar Bootstrap 5

Bagus Ali Akbar

MATA KULIAH PEMROGRAMAN WEB (FRAMEWORK)

FAKULTAS ILMU KOMPUTER

UNIVERSITAS SUBANG
2021
 •••

DAFTAR ISI

BAGIAN I INTRODUCTION ........................................................................6

Definisi Bootstrap ............................................................................. 6
BAGIAN II DOWNLOAD & CONFIGURATION ..........................................8
Download ........................................................................................ 8
Struktur File Bootstrap ...................................................................... 8
Mari Mencoba ................................................................................ 1
Pendukung Bootstrap ..................................................................... 3
Browser dan devices.................................................................. 3
HTML5 .......................................................................................... 3
Mobile Friendly ........................................................................... 3
Responsive Images .................................................................... 4
Containers .................................................................................. 4
Grid System ................................................................................. 4
BAGIAN III LATIHAN-LATIHAN .................................................................6
1. CONTENT ...................................................................................... 6
Reboot ........................................................................................ 6
Heading ...................................................................................... 7
Lists .............................................................................................. 8
Abbreviations ........................................................................... 11
Small .......................................................................................... 12
Strong / Bold ............................................................................. 12
Italic ........................................................................................... 13
Alignment Classes .................................................................... 13
Emphasis Classes ...................................................................... 14
Address ..................................................................................... 14
Blockquotes .............................................................................. 15
Naming a source ..................................................................... 15
Pull-right........................................ Error! Bookmark not defined.
Code ......................................................................................... 16
Image ........................................................................................ 17
Table.......................................................................................... 18
2. COMPONENTS ........................................................................... 26
Alerts.......................................................................................... 26
Button ........................................................................................ 29
Form .......................................................................................... 30
BAGIAN IV MEMBUAT HALAMAN FRONT END ...................................... 35
1. Langkah I (Membuat File Baru).............................................. 35

1
 •••

2. Langkah II (Membuat Navigasi Menu) ................................. 35

3. Langkah III (Menambahkan Bagian Header) ...................... 36
4. Langkah IV (Menambahkan Section untuk Artikel) ............. 36
5. Langkah V (Menambahkan Section untuk About dan Arsip
Artikel) ............................................................................................ 37
6. Langkah VI (Menambahkan Footer)..................................... 37
BAGIAN V MEMBUAT HALAMAN LOGIN............................................... 39
1. Langkah I (Membuat File Baru).............................................. 39
2. Langkah II ................................................................................ 39

2
•••

3
 •••

BOOTSTRAP??

NO BOOTSTRAP BOOTSTRAP

4
 •••

SIRENDA SILMA (ELAYANAN) V 1.0

PANTES / SIDESI SILMA (ELAYANAN) V 2.0

ELEARNING SMS CENTER

MANAGEMENT FILE SIPERO

5
SITUKIN SI PERTAMBANGAN
 •••

BAGIAN I INTRODUCTION
Bootstrap awalnya dibuat dan dikembangkan oleh pekerja// programmer
Twitter, yaitu Mark Octo dan Jacob Thornton sejak tahun 2011. Saat itu
memang para programmer di Twitter menggunakan berbagai macam
tools dan library yang mereka kuasai dan disukai untuk melakukan
pekerjaannya, sehingga tidak ada standarisasi dalam penamaan suatu
class. Akibatnya sulit untuk dikelola, maka dari itu keduanya membuat
suatu tools ataupun framework yang digunakan bersama dilingkukan
internal twitter.

Sejak diluncurkan pada bulan agustus 2011, bootstrap telah berevolusi dari
proyek yang hanya basis css menjadi sebuah framework yang lebih
lengkap yang juga berisi javascript plugin, icon, Forms, dan button.

Pada januari 2012, Bootstrap merealease Versi 2.0 yang didalamnya sudah
memasukan fitur responsive layout, dan sejak itu penggunaan Bootstrap
sangat banyak sekali sehingga menjadi proyek Github yang sangat
banyak di copy hingga 20.000 kali.

Dua tahun setelah itu tepatnya pada bulan agustus 2014 bootstrap
kembali mengeluarkan versi terbaru yaitu versi 3.0 yang didalamnya sudah
mengakomodasi konsep Mobile first artinya didalam pembuatan dan
pengembangan mulai dari layar yang terkecil dahulu (mobile /
handphone/ smartphone) dan secara bertahap pada tampilan yang
paling besar.

Dan baru-baru ini bootstrap merilis versi 4.0 (sebelumnya pada tahun 2017
sudah dirilis versi betanya) sebagai penyempurnaan dokumentasi dan
menambah beberapa fitur tambahan yang saat ini sedang booming yaitu
dengan memberikan tampilan lebih baik bagi para pengembang
ecommerce , dan tampak lebih stabil dan dengan ini maka versi 2.0 dan
3.0 tidak akan ada lagi support atau update dalam penggunaannya.

Seiring berjalan nya perkembangan bootstrap akhirnya Kembali merilis versi

baru yaitu versi 5.0. dipercaya pada versi 5.0 kali ini boostrap
menghadirkan beberapa perubahan yg cukup banyak diantaranya:
Desain tampilan baru, tidak lagi menggunakan jquery, peningkatan fitur
customization, perubahan pada form, sistem grid yg ditingkatkan.

Definisi Bootstrap

Library (pustaka / kumpulan fungsi-fungsi) dari Framework CSS yang dibuat

khusus untuk bagian pengembangan fontend dari suatu website. Didalam

6
 •••

library tersebut terdapat berbagai jenis file yang diantaranya HTML, CSS,
dan Javascript. Seperti kutipan yg ada diwebsite bootstrap bahwa
bootstrap “the world’s most popular front-end open source toolkit”.
semuanya sudah ada dalam frameworknya sehingga para develop /
pengembang hanya tinggal membuat / menyisipkan class nya yang ingin
dipakai seperti membuat tombol, grid navigasi dan lain sebagainya.

Bootstrap telah menyediakan kumpulan aturan dan komponen class

interface dasar sebagai modal dalam pembuatan web yang telah
dirancang sangat baik untuk memberikan tampilan yang sangat menarik,
bersih, ringan dan memudahkan bagi penggunanya. Dan penggunaan
bootstrap ini kita juga diberikan keleluasan selama pengembangan
website, anda bisa merubah dan menambah class sesuai dengan
keinginan.
Ada beberapa alasan mengapa menggunakan Bootstrap :
• Anda tidak perlu menuliskan baris kode CSS, HTML dan JavaScript yang
terlalu Panjang.
• Ada banyak pilihan class seperti button, navigation, form. Dll
• Responsive
• CSS dan JavaScript yang ringan.
• Penggunaan Bootstrap sangat menghemat waktu.
• Tampilan Modern.

Bootstrap awalnya dikembangkan oleh Developer Twitter, lalu dibuat open

source agar semua orang dapat berkontribusi di dalamnya.

Repositori resmi Bootstrap di Github

7
 •••

BAGIAN II DOWNLOAD & CONFIGURATION

Download

Untuk bisa bekerja dengan Bootstrap kita harus mendownload Bootstrap

pada halaman resmi Bootstrap : http://getbootstrap.com/ . halamannya
akan terlihat seperti dibawah ini.

Nanti akan mendownload file bernama bootstrap-5.1.1-dist.zip

Bootstrap dirancang dengan beberapa teknologi pendukung seperti CSS

dan JavaScript dan beberapa komponen lain yang disusun untuk
menghasilkan desain halaman website yang modern.

Struktur File Bootstrap

Setelah mendownload Bootstrap jika kita melihat hasil download maka kita
akan mendapatkan Struktur Bootstrap seperti Gambar dibawah ini, struktur
bootstrap tersebut menggambarkan susunan beberapa jenis file yang
mendukung teknologi Bootstrap yang terdiri dari file CSS dan JS.

bootstrap/ │ ├── bootstrap-grid.rtl.css

├── css/ │ ├── bootstrap-grid.rtl.css.map
│ ├── bootstrap-grid.css │ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-grid.min.css │ ├── bootstrap-reboot.css
│ ├── bootstrap-grid.min.css.map │ ├── bootstrap-reboot.css.map

8
 •••

│ ├── bootstrap-reboot.min.css │ ├── bootstrap.rtl.css

│ ├── bootstrap-reboot.min.css.map │ ├── bootstrap.rtl.css.map
│ ├── bootstrap-reboot.rtl.css │ ├── bootstrap.rtl.min.css
│ ├── bootstrap-reboot.rtl.css.map │ └── bootstrap.rtl.min.css.map
│ ├── bootstrap-reboot.rtl.min.css └── js/
│ ├── bootstrap-reboot.rtl.min.css.map ├── bootstrap.bundle.js
│ ├── bootstrap-utilities.css ├── bootstrap.bundle.js.map
│ ├── bootstrap-utilities.css.map ├── bootstrap.bundle.min.js
│ ├── bootstrap-utilities.min.css ├── bootstrap.bundle.min.js.map
│ ├── bootstrap-utilities.min.css.map ├── bootstrap.esm.js
│ ├── bootstrap-utilities.rtl.css ├── bootstrap.esm.js.map
│ ├── bootstrap-utilities.rtl.css.map ├── bootstrap.esm.min.js
│ ├── bootstrap-utilities.rtl.min.css ├── bootstrap.esm.min.js.map
│ ├── bootstrap-utilities.rtl.min.css.map ├── bootstrap.js
│ ├── bootstrap.css ├── bootstrap.js.map
│ ├── bootstrap.css.map ├── bootstrap.min.js
│ ├── bootstrap.min.css └── bootstrap.min.js.map
│ ├── bootstrap.min.css.map

File bootstrap.min.css adalah file yang sudah dikompres —ukurannya lebih

kecil—dan siap digunakan untuk produksi (production).

Sedangkan file bootstrap.css biasanya digunakan untuk development. Jika

kita ingin memodifikasi Bootstrap, kita bisa lakukan dari file ini.

1
 •••

Mari Mencoba

Ekstrak file yang kita download tadi, kemudian di rename folder menjadi
“bootstrap”. Seperti gambar di bawah ini.

Direname menjadi

Selanjutnya buat file baru bernama index.html, simpan di dalam folder

bootstrap lalu ketikkan kode berikut ini :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<!-- Tag meta untuk menentukan karakter encoding yang
digunakan, biasanya UTF-8 -->
<meta charset="utf-8">
<!-- Tag meta untuk melakukan sekala secara responsif
terhadap viewport -->
<meta name="viewport" content="width=device-width, initial-
scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<!-- Judul Web -->
<title>Belajar Bootstrap 5</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- Menyisipkan JQuery dan Javascript Bootstrap -->

<script src="js/bootstrap.min.js"></script>
</body>
</html>

Hasilnya seperti gambar di bawah ini

1
 •••

Penjelasan :

Perhatikan kode HTML yang baru saja kita buat, ada beberapa kode di
sana yang harus di perhatikan.
Kita mulai dari tag <head>
<!-- Tag meta untuk menentukan karakter encoding yang digunakan,
biasanya UTF-8 -->
<meta charset="utf-8" />

<!-- Tag meta untuk melakukan sekala secara responsif terhadap

viewport -->

<meta name="viewport" content="width=device-width, initial-

scale=1">

<!-- Menyisipkan Bootstrap -->

<link rel="stylesheet" href="css/bootstrap.min.css"/>

<!-- Judul Web -->

<title>Belajar Bootstrap 5</title>

Sebenarnya yang wajib dalam Bootstrap adalah yang dua ini :

<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
Tag <meta name="viewport"> berfungsi untuk menyesuaikan tampilan web
terhadap layar pengguna. Jadi jika dibuka di layar yang lebih kecil, ia
akan melakukan sekala sesuai ukuran lebar layarnya. Tag ini wajib, bila
kita ingin membuat web yang responsif.
Selanjutnya tag <link rel="..."> berfungsi untuk menyisipkan file CSS
bootstrap ke dalam dokumen HTML.
Selain dengan cara ini, kita juga bisa menyisipkan Bootstrap melalui CDN :
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-
skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
crossorigin="anonymous"></script>

Namun, saat kita tidak terkoneksi internet. Kita tidak akan bisa
menggunakannya.
Berikutnya, perhatikan pada bagian <body>
Pada <body>, kita membuat komponen <header> dengan isi .
<h1>Hello, world!</h1>
Terakhir, kita membuat tag untuk menyisipkan javascript Bootstrap.

2
 •••

<!-- Menyisipkan Javascript Bootstrap -->

<script src="js/bootstrap.min.js"></script>

Pendukung Bootstrap

Browser dan devices

Secara umum, Bootstrap mendukung versi terbaru dari setiap browser.

Perhatikan bahwa peramban (seperti Opera Mini, mode Turbo Opera
Mobile, UC Browser Mini, Amazon Silk) tidak didukung.

Mobile Devices.

Desktop Browsers

HTML5

Bootstap terdiri dari HTML dan CSS sehingga dalam document yang
dibuat diharuskan untuk mengggunakan HTML5 doctype dalam
setiap project, seperti script berikut :
<!DOCTYPE html>
<html lang="en">
...
</html>

Seperti yang sudah disampaikan diatas bahwa Bootstrap menggunakan

document HTML versi 5, dan tentunya semua fie yang akan kita buat dalam
latihan pendukung modul ini menggunakan HTML5.

Mobile Friendly

Bootstrap didesain agar aplikasi yang anda buat mampu berjalan di

perangkat mobile seperti Tablet, iPad, Handphone dan perangkat mobile
lainnnya, kemampuan untuk bisa berjalan dalam aplikasi mobile ini disebut
dengan Mobile Friendly.

3
 •••

Untuk memastikan aplikasi dapat berjalan dengan baik di perangkat mobile

untuk kemampuan render dan zoom pastikan dalam tag <HEAD> HTML
anda menggunakan script berikut ini :

<head>
<meta name=”viewport” content=”width=device-width, initial
scale=1.0”>
</head>

Responsive Images

Bootstrap Selain memberi dukungan untuk isi halaman website yang

mampu berjalan di perangkat mobile dalam artian seluruh isi halaman
website akan menyesuaikan ukuran layar dari perangkat yang digunakan
jika besar maka isi halaman website menyesuaikan menjadi skala besar,
jika ukuran layar kecil halaman website otomatis menjadi kecil. Dalam hal
ini gambar yang ada di halaman website pun mampu menyesuaikan
ukurannya dengan menggunakan teknologi Bootstrap, lalu bagai
mana caranya ? yaitu dengan menggunakan tag berikut untuk
menampilkan image :
<img src="..." class="img-responsive" alt="Responsive image">

Containers

Untuk membuat layout halaman website menjadi center, dengan cara

mudah memberikan perintah <div class=”container”> … </div>.
Penggunaan class container sangat efektif dalam menyusun body atau
content dari sebuah website.

Grid System

Grid system merupakan pengaturan ukuran yang di tampilkan pada

monitor. Grid system berfungsi untuk membuat pengaturan untuk lebar dari
masing-masing komponen web sehingga kita dapat dengan bebas
mengatur responsive halaman website yang kita buat dengan bootstrap.
Bootstrap memiliki 12 grid. Yang nantinya kita akan dapat menggunakan
class berikut ini untuk mengatur keresponsive an halaman website dengan
mengaturnya menggunakan 12 grid bootstrap.

4
 •••

Sebagai contoh disini kita sudah mempunyai rancangan grid seperti

gambar berikut :

Untuk mendapatkan gambar seperti diatas silahkan ketikan script dibawah

ini, lalu simpan dengan nama grid.html . Simpan didalam folder bootstrap.
<!DOCTYPE html>
<html>
<head>
<!-- Judul Web -->
<title>Belajar Bootstrap 5</title>
<!-- Tag meta untuk melakukan sekala secara responsif
terhadap viewport -->
<meta name="viewport" content="width=device-width, initial-
scale=1">
<!-- Menyisipkan Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-grid.css"/>
</head>
<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>

5
 •••

<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</header>
<!-- Menyisipkan JQuery dan Javascript Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Sebagai latihan buatlah halaman seperti gambar di bawah ini dengan

menggunakan grid system

BAGIAN III LATIHAN-LATIHAN

1.CONTENT

Reboot

Reboot, kumpulan perubahan CSS elemen-spesifik dalam satu file

bootstrap untuk memberikan baseline yang elegan, konsisten, dan
sederhana untuk dikembangkan.

6
 •••

Reboot dibangun berdasarkan Normalisasi, menyediakan banyak elemen

HTML dengan gaya yang agak didasari hanya menggunakan pemilih
elemen. Penataan tambahan dilakukan hanya dengan kelas. Sebagai
contoh, kami mereboot beberapa style <table> untuk baseline yang lebih
sederhana dan kemudian menyediakan .table, .table-bordered, dan
banyak lagi.

Heading

Didalam dukumen bootstrap semua heading HTML <h1> sampai <h6>

bisa digunakan dengan menggunakan class .h1 sampai .h6

Latihan1.html
<!DOCTYPE html>
<html>
<head>
<title>Heading</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap juga memperbolehkan heading dengan format tag <small>
dengan cara memanggil class .small dalam file css, berikut contoh script
:

7
 •••

Latihan2.html
<!DOCTYPE html>
<html>
<head>
<title>Heading Small</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Lists

Tag <lists> digunakan untuk menampilkan daftar urutan point yang di

anggap penting, tag <lists> terdiri dari tiga, unordered list, ordered list
dan description list.

Unordered Lists

Digunakan untuk membuat list dalam bentuk point point bullet atau
symbol tertentu. Susunan dasar tag unordered seperti berikut :
Latihan3.html
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<h1>Contoh Unordered</h1>
<ul>
<li>Urutan pertama</li>
<li>Uruan kedua</li>
<li>Urutan ketiga</li>
<li>Urutan keempat</li>
<li>Urutan kelima
<ul>
<li>Urutan pertama dari bagian lima</li>
<li>Urutan kedua dari bagian lima</li>
<li>Urutan ketiga dari bagian lima</li>
</ul>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
8
 •••

<li>Urutan ke empat dari bagian lima</li>

</ul>
</li>
<li>Urutan keenam</li>
<li>Urutan ketujuh</li>
<li>Urutan kedelapan</li>
</ul>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Unstyled

Digunakan untuk membuat list dalam bentuk bebas tanpa model list,
untuk menggunakan tag ini cukup menggunakan class list-unstyled
dalam tag <ul> :

Latihan4.html
<!DOCTYPE html>
<html>
<head>
<title>Unordered List (Unstyled)</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<h1>Contoh Unstyled</h1>
<ul class="list-unstyled">
<li>Unstyled baris pertama</li>
<li>Unstyled baris kedua</li>
<li>Unstyled baris ketiga</li>
<li>Unstyled baris keempat</li>
<li>Unstyled baris kelima
<ul>
<li>Baris pertama tanpa unstyled</li>
<li>Baris kedua tanpa unstyled</li>
<li>Baris ketiga tanpa unstyled</li>
<li>Baris kelima tanpa unstyled</li>
</ul>
</li>
<li>Unstyled baris keenam</li>
<li>Unstyled baris ketujuh</li>
<li>Unstyled baris kedelapan</li>
</ul>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Inline

Tag ini digunakan untuk membuat list yang tersusun dalam satu baris
penggunaanya dalam program cukup menggunakan class list-inline
dalam tag <ul> :

9
 •••

Latihan5.html
<!DOCTYPE html>
<html>
<head>
<title>Unordered List (Inline)</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<h1>Contoh Inline</h1>
<ul class="list-inline">
<li class="list-inline-item">HTML5</li>
<li class="list-inline-item">Bootstrap</li>
<li class="list-inline-item">CodeIgniter</li>
</ul>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Ordered Lists

Digunakan untuk membuat list dalam bentuk susunan angka yang

sudah terurut. Susunan dasar tag Ordered seperti berikut :

Latihan6.html
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<h1>Contoh Ordered</h1>
<ol>
<li>Urutan ke satu</li>
<li>Uruan ke dua</li>
<li>Urutan ke tiga</li>
<li>Urutan ke empat</li>
<li>Urutan ke lima</li>
</ol>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Description Lists

Tag ini digunakan untuk membuat deskripsi dari pernyataan yang dianggap
penting, susunan tag ini sangat mudah digunakan seperti tag HTML yang
lainnya.

<dl>

10
 •••

<dt>...</dt>
<dd>...</dd>
</dl>
Tag <dt> digunakan untuk bagian header description, dan tag <dd>
digunakan untuk menjelaskan bagian isi dari description.

Latihan7.html
<!DOCTYPE html>
<html>
<head>
<title>Description</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<h1>Contoh Description</h1>
<dl>
<dt>HTML5</dt>
<dd>HTML5 merupakan script text yang digunakan untuk
membangun halaman website</dd>
<dt>Bootstrap</dt>
<dd>Bootstrap merupakan script yang dapat digunakan untuk
memmbangun halamam website.</dd>
<dd>Bootstrap juga merupakan script yang dapat digunakan
untuk membangun website yang responsive.</dd>
<dt>CodeIgniter</dt>
<dd>Bootstrap merupakan aplikasi Framework yang di gunakan
untuk membuat halaman website yang interaktif.</dd>
</dl>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Abbreviations

Abbreviations atau singkatan suatu class yang dapat di gunakan untuk

membuat singkatan dalam dokumen HTML.
Dalam penulisannya memiliki format tag :
<abbr title="…">………</abbr>

Latihan8.html

<!DOCTYPE html>
<html>
<head>
<title>Abbreviations</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<p>Ini contoh pemakaian singkatan dalam Bootstrap</p>
<abbr title="Nomor Induk Mahasiswa">NIM</abbr>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
11
 •••

Small

Small tag memberikan efek huruf dengan ukuran lebih kecil dari bagian
dokumen, cara penggunaan tag <small> sangat sederhana seperti
contoh latihan9.html
Latihan9.html
<!DOCTYPE html>
<html>
<head>
<title>Small Tag</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<p>Berikut contoh penggunaan tag small</p>
<small>Ini contoh small tag dengan huruf yang lebih
kecil</small>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Strong / Bold

Tag strong digunakan untuk memberikan efek font dengan format tebal
Latihan10.html
<!DOCTYPE html>
<html>
<head>
<title>Stong Tag</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<p>Berikut contoh penggunaan tag strong</p>
<strong>Ini contoh penggunaan strong</strong>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

12
 •••

Italic

Tag em digunakan untuk memberikan efek font dengan format miring

Latihan11.html
<!DOCTYPE html>
<html>
<head>
<title>Italic Class</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<p>Berikut contoh penggunaan italic</p>
<p class="fst-italic">Ini contoh penggunaan italic</p>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Alignment Classes

Alignment Classes bisa digunakan untuk memberikan format dokumen

rata kiri, rata tengah dan rata kanan.
Latihan12.html

<!DOCTYPE html>
<html>
<head>
<title>Alignmet Classess</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<p class="text-start"> Ini contoh teks rata kiri</p>
<p class="text-center">Ini contoh teks rata tengah</p>
<p class="text-end">Ini Contoh teks rata kanan </p>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

13
 •••

Emphasis Classes

Bootstrap menyediakan beberapa kelas emphasis yang memiliki atribut

warna yang dapat digunakan di berbagai keperluan.
Latihan13.html
<!DOCTYPE html>
<html>
<head>
<title>Emphasis</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<p class="text-muted">Contoh teks muted</p>
<p class="text-primary">Contoh teks primary</p>
<p class="text-sucsess">Contoh teks success</p>
<p class="text-info">Contoh teks info</p>
<p class="text-warning">Contoh teks warning</p>
<p class="text-danger">Contoh teks danger</p>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Address

tag <address> digunakan untuk memberikan informasi alamat seseorang

atau organisasi didalam halaman website, cara penulisan script bisa
menggabungkan dengan tag lain seperti tag <strong> dan tag <br> untuk
setiap akhir baris script untuk memberikan efek baris baru pada setiap
kalimat, perhatikan contoh
Latihan14.html
<!DOCTYPE html>
<html>
<head>
<title>Address</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<address>
<strong>Bagus Ali Akbar.</strong><br>
Jl. R.A Kartini KM3<br>
Wanareja, 747474<br>
<abbr title="Phone">P:</abbr> 081112221
</address>
<address>
<strong>Bagus Ali Akbar</strong><br>
<a
href="mailto:[email protected]?Subject=Hello%20bagu
s" target="_top">[email protected]</a>
</address>
<script src="js/bootstrap.min.js"></script>
</body>
</html> 14
 •••

Blockquotes

Tag <blockquotes> digunakan jika kita ingin memberikan kutipan pada

tulisan yang di pasang pada halaman website, seperti tag yang lain,
pemakaian tag bisa mengkombinasikan dengan tag lain seperti tag <p>
Latihan15.html

<!DOCTYPE html>
<html>
<head>
<title>Blockquote</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<blockquote class="blockquote">
<p>Lorem Ipsum adalah contoh teks atau dummy dalam
industri percetakan dan penataan huruf atau typesetting.
Lorem Ipsum telah menjadi standar contoh teks sejak tahun
1500an, saat seorang tukang cetak yang tidak dikenal
mengambil sebuah kumpulan teks dan mengacaknya untuk
menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan
selama 5 abad, tapi juga telah beralih ke penataan huruf
elektronik, tanpa ada perubahan apapun.</p>
</blockquote>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Naming a source

Didalam penggunaan naming source ini tag <blockquote> digabung

dengan tag <p> serta serta tag <cite title=”sourcetitle”>… </cite>
serta tag <small>.

Latihan16.html
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Naming Source</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<blockquote>
<p>Seharusnya tingginya tingkat pendidikan dan status sosial
mampu membuat hati seseorang menjadi lembut, jauh dari sikap
angkuh dan sombong.</p>
</blockquote>
<figcaption class="blockquote-footer">
dikutip dari perkataan <cite title="Kutipan">Bagus Ali
Akbar</cite>
</figcaption>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
15
 •••

Blockquote Alignment

Dalam blockquote bisa menggunakan alignment <figure class=”text-

center”> untuk membuatkan efek kutipan menjadi posisi ditengah, cara
penggunaan tag ini hampir sama dengan Latihan16.html hanya
berbeda dalam penggunaan kelas saja, berikut contoh penggunaan class
text-class.

Latihan17.html

<!DOCTYPE html>
<html>
<head>
<title>Blockquote Naming Source</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<figure class="text-center">
<blockquote class="blockquote">
<p>Seharusnya tingginya tingkat pendidikan dan status
sosial mampu membuat hati seseorang menjadi lembut, jauh dari
sikap angkuh dan sombong.</p>
<figcaption class="blockquote-footer">
dikutip dari perkataan <cite title="Kutipan">Bagus
Ali Akbar</cite>
</figcaption>
</blockquote>
</figure>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Code

Kadang kita perlu menampilkan kode program kita dalam halaman

website, untuk memenuhi keperluan ini ada sebuah tag yang dapat
kita pakai yaitu Tag <code> contoh penggunaan, silahkan perhatikan
latihan18.html berikut:
Latihan18.html

<!DOCTYPE html>
<html>
<head>
<title>Code</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
Contoh pemakaian tag code yang dapat menampilkan kode HTML
dalam halaman, <code>&lt;body&gt;</code> dan bersatu
dengan teks yang bukan HTML.
<script src="js/bootstrap.min.js"></script>
</body>
</html>
16
 •••

Image

Bootstrap memiliki beberapa class untuk menampilkan image (gambar)

Aligning images

Class ini akan memberikan posisi pada image nya

Latihan19.html
<!DOCTYPE html>
<html>
<head>
<title>Aligning Images</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<h2>Rounded Corners</h2>
<p>Kampus 1 Univesitas Subang</p>
<img src="logo.png" class="rounded float-start"
alt="Univesitas Subang">
<img src="logo.png" class="rounded float-end"
alt="Univesitas Subang">
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Class img-thumbnail

Latihan20.html
<!DOCTYPE html>
<html>
<head>
<title>Img Thumbnail</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<h2>Img Thumbnail</h2>
<p>Kampus 1 Univesitas Subang</p>
<img src="logo.png" class="img-thumbnail" alt="Univesitas
Subang">
<script src="js/bootstrap.min.js"></script>
</body>
</html>

17
 •••

Table

Dalam perancangan halaman website table merupakan salah satu

komponen yang dapat membuat halaman terlihat lebih rapih, bootstap
mendukung pembuatan table dengan beberapa tag sebagai berikut :

Tag Keterangan
<table> Menampilkan data dalam format tabular
<thead> Untuk menampilkan judul setiap kolom
<tbody> Element container untuk baris t dalam kolom table
<tr> Element untuk menampilkan baris table
<td> Untuk menampilkan data table
<th> Untuk menampilkan judul kolom

Untuk menampilkan table menggunakan bootstrap, dengan struktur

sebagai berikut :

<table class=”table”>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>

Untuk memberikan dukungan tampilan yang bagus, bootstrap

menyediakan beberapa class diantaranya :

Striped Table

<table class="table table-striped"> ... </table>

Latihan21.html

<!DOCTYPE html>
<html>
<head>
<title>Stripped Table</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<table class="table table-striped">
<thead>

18
 •••

<tr>
<th>NIM</th>
<th>Nama</th>
<th>Telepon</th>
</tr>
</thead>
<tbody>
<tr>
<td>D1A.17.001</td>
<td>Bagus</td>
<td>0123</td>
</tr>
<tr>
<td>D1A.17.002</td>
<td>Ali</td>
<td>01234</td>
</tr>
<tr>
<td>D1A.17.003</td>
<td>Akbar</td>
<td>0823176</td>
</tr>
<tr>
<td>D1A.17.004</td>
<td>Bagus Ali Akbar</td>
<td>081277</td>
</tr>
</tbody>
</table>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Bordered Table

<table class="table table-bordered"> ... </table>

Latihan22.html

<!DOCTYPE html>
<html>
<head>
<title>Bordered Table</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>NIM</th>
<th>Nama</th>
<th>Telepon</th>
</tr>
</thead>

19
 •••

<tbody>
<tr>
<td>D1A.17.001</td>
<td>Bagus</td>
<td>0123</td>
</tr>
<tr>
<td>D1A.17.002</td>
<td>Ali</td>
<td>01234</td>
</tr>
<tr>
<td>D1A.17.003</td>
<td>Akbar</td>
<td>0823176</td>
</tr>
<tr>
<td>D1A.17.004</td>
<td>Bagus Ali Akbar</td>
<td>081277</td>
</tr>
</tbody>
</table>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Borderless Table

<table class="table table-borderless"> ... </table>

Latihan23.html

<!DOCTYPE html>
<html>
<head>
<title>Bordered Table</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<table class="table table-borderless">
<thead>
<tr>
<th>NIM</th>
<th>Nama</th>
<th>Telepon</th>
</tr>
</thead>
<tbody>
<tr>
<td>D1A.17.001</td>
<td>Bagus</td>
<td>0123</td>
</tr>

20
 •••

<tr>
<td>D1A.17.002</td>
<td>Ali</td>
<td>01234</td>
</tr>
<tr>
<td>D1A.17.003</td>
<td>Akbar</td>
<td>0823176</td>
</tr>
<tr>
<td>D1A.17.004</td>
<td>Bagus Ali Akbar</td>
<td>081277</td>
</tr>
</tbody>
</table>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Hoverable Table

<table class="table table-hover"> ... </table>

Latihan24.html
<!DOCTYPE html>
<html>
<head>
<title>Hoverable Table</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<table class="table table-hover">
<thead>
<tr>
<th>NIM</th>
<th>Nama</th>
<th>Telepon</th>
</tr>
</thead>
<tbody>
<tr>
<td>D1A.17.001</td>
<td>Bagus</td>
<td>0123</td>
</tr>
<tr>
<td>D1A.17.002</td>
<td>Ali</td>
<td>01234</td>
</tr>
<tr>
<td>D1A.17.003</td>
<td>Akbar</td>
<td>0823176</td>
</tr>
21
 •••

</tr>
<tr>
<td>D1A.17.004</td>
<td>Bagus Ali Akbar</td>
<td>081277</td>
</tr>
</tbody>
</table>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Contextual Classes

Digunakan untuk warna baris dan kolom pada table. Berikut beberapa
class yang digunakan untuk membuat table dengan efek Contextual
Classes.

Latihan25.html
<!DOCTYPE html>
<html>
<head>
<title>Contextual Classes</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<table class="table">
<thead>
<tr>
<th class="table-active">NIM</th>
<th class="table-active">Nama</th>
<th class="table-active">Telepon</th>
</tr>
</thead>
<tbody>
<tr class="table-default">
<td>D1A.17.001</td>
<td>Bagus</td>
<td>0123</td>
</tr>
<tr class="table-primary">
<td>D1A.17.002</td>
<td>Ali</td>
<td>01234</td>
</tr>
<tr class="table-secondary">
<td>D1A.17.003</td>
<td>Akbar</td>
<td>0823176</td>
</tr>
<tr class="table-success">
<td>D1A.17.004</td>
<td>Bagus Ali Akbar</td>
<td>081277</td>
</tr>

22
 •••

<tr class="table-danger">
<td>D1A.17.005</td>
<td>Bagus Ali</td>
<td>011277</td>
</tr>
<tr class="table-warning">
<td>D1A.17.004</td>
<td>Bagus Akbar</td>
<td>089182</td>
</tr>
<tr class="table-info">
<td>D1A.17.005</td>
<td>Ali Akbar</td>
<td>0872621</td>
</tr>
<tr class="table-light">
<td>D1A.17.006</td>
<td>Bagus Ali Akbar</td>
<td>081277</td>
</tr>
<tr class="table-dark">
<td>D1A.17.007</td>
<td>Bagus Ali Akbar</td>
<td>081277</td>
</tr>
</tbody>
</table>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Background Variant

Latihan26.html

<!DOCTYPE html>
<html>
<head>
<title>Backgroud Table</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>NIM</th>
<th>Nama</th>
<th>Telepon</th>
</tr>
</thead>
<tbody>
<tr class="bg-primary">
<td>D1A.17.002</td>
<td>Ali</td>
<td>01234</td>
</tr>

23
 •••

<tr class="bg-success">
<td>D1A.17.004</td>
<td>Bagus Ali Akbar</td>
<td>081277</td>
</tr>
<tr class="bg-danger">
<td>D1A.17.005</td>
<td>Bagus Ali</td>
<td>011277</td>
</tr>
<tr class="bg-warning">
<td>D1A.17.004</td>
<td>Bagus Akbar</td>
<td>089182</td>
</tr>
<tr class="bg-info">
<td>D1A.17.005</td>
<td>Ali Akbar</td>
<td>0872621</td>
</tr>
</tbody>
</table>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Bisa juga menambahkan class table-dark dan table-light

<table class="table table-dark"> ... </table>

<table class="table table-light"> ... </table>

Latihan27.html
<!DOCTYPE html>
<html>
<head>
<title>Backgroud Table</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<table class="table table-dark">
<thead>
<tr>
<th>NIM</th>
<th>Nama</th>
<th>Telepon</th>
</tr>
</thead>
<tbody>
<tr class="bg-primary">
<td>D1A.17.002</td>
<td>Ali</td>
<td>01234</td>
</tr>
<tr class="bg-success">
<td>D1A.17.004</td>

24
 •••

<td>Bagus Ali Akbar</td>

<td>081277</td>
</tr>
<tr class="bg-danger">
<td>D1A.17.005</td>
<td>Bagus Ali</td>
<td>011277</td>
</tr>
<tr class="bg-warning">
<td>D1A.17.004</td>
<td>Bagus Akbar</td>
<td>089182</td>
</tr>
<tr class="bg-info">
<td>D1A.17.005</td>
<td>Ali Akbar</td>
<td>0872621</td>
</tr>
</tbody>
</table>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Responsive Table

<div class="table-responsive">
<table class="table">
...
</table>
</div>

Latihan28.html
<!DOCTYPE html>
<html>
<head>
<title>Responsive Table</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>NIM</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Alamat</th>
<th>JK</th>
<th>Hoby</th>
<th>Motto</th>
<th>Telepon</th>
<th>Sekolah Asal</th>
<th>Alasan Masuk Fasilkom</th>
</tr>
</thead>

25
 •••

<tbody>
<tr>
<td>D1A.17.002</td>
<td>Ali</td>
<td>01234</td>
<td>D1A.17.002</td>
<td>Ali</td>
<td>01234</td>
<td>01234</td>
<td>Ali</td>
<td>01234</td>
<td>01234</td>
</tr>
</tbody>
</table>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Bisa juga menambahkan class .table-responsive{-sm|-md|-lg|-xl}

<div class="table-responsive-sm">
<div class="table-responsive-md">
<div class="table-responsive-lg">
<div class="table-responsive-xl">

2.COMPONENTS

Alerts

Alert digunakan untuk menyampaikan pesan atau peringatan sesuai

dengan aktifitas yang terjadi dalam proses sebuah website.

Bootstrap menyediakan beberapa class untuk membuat Alert sebagai

berikut :

Latihan29.html
<!DOCTYPE html>
<html>
<head>
<title>Backgroud Table</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>

26
 •••

<div class="alert alert-secondary" role="alert">

A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Link Color

Latihan30.html

<!DOCTYPE html>
<html>
<head>
<title>Alert Link Color</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#"
class="alert-link">an example link</a>. Give
it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#"
class="alert-link">an example link</a>. Give
it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#"
class="alert-link">an example link</a>. Give
it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#"
class="alert-link">an example link</a>. Give
it a click if you like.
</div>

27
 •••

<div class="alert alert-warning" role="alert">

simple warning alert with <a href="#"
class="alert-link">an example link</a>. Give
it a click if you like.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#"
class="alert-link">an example link</a>. Give
it a click if you like.
</div>
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#"
class="alert-link">an example link</a>. Give
it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#"
class="alert-link">an example link</a>. Give
it a click if you like.
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Additional Content

Latihan31.html
<!DOCTYPE html>
<html>
<head>
<title>Alert Additional Content</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this
important alert message. This example text is going to run a bit
longer so that you can see how spacing within an alert works
with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be
sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

28
 •••

Dismissing

Latihan32.html
<!DOCTYPE html>
<html>
<head>
<title>Alert Dismissing</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="alert alert-warning alert-
dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should
check in on some of those fields below.
<button type="button" class="btn-close" data-bs-
dismiss="alert" aria-label="Close"></button>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Button

<button type="button" class="btn btn-primary">Primary</button>

Latihan33.html
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h2>Button Style</h2>
<button type="button" class="btn btn-
primary">Primary</button>
<button type="button" class="btn btn-
secondary">Secondary</button>
<button type="button" class="btn btn-
success">Success</button>
<button type="button" class="btn btn-
danger">Danger</button>
<button type="button" class="btn btn-
warning">Warning</button>
<button type="button" class="btn btn-
info">Info</button>

29
 •••

<button type="button" class="btn btn-

light">Light</button>
<button type="button" class="btn btn-
dark">Dark</button>
<button type="button" class="btn btn-
link">Link</button>
<br>
<h2>Button Size</h2>
<button type="button" class="btn btn-primary
btn-lg">Large button</button>
<button type="button" class="btn btn-primary
btn- sm">Small button</button>
<br>
<h2>Outline Button</h2>
<button type="button" class="btn btn-outline-
primary">Primary</button>
<button type="button" class="btn btn-outline-
secondary">Secondary</button>
<button type="button" class="btn btn-outline-
success">Success</button>
<button type="button" class="btn btn-outline-
danger">Danger</button>
<button type="button" class="btn btn-outline-
warning">Warning</button>
<button type="button" class="btn btn-outline-
info">Info</button>
<button type="button" class="btn btn-outline-
light">Light</button>
<button type="button" class="btn btn-outline-
dark">Dark</button>
<br>
<h2>Disabled Button</h2>
<button type="button" class="btn btn-lg btn-
primary" disabled>Primary button</button>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Form

Latihan34.html
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h2>Form</h2>

30
<form>
•••
<div class="form-group">
<label
for="exampleFormControlInput1">Email
address</label>
<input type="email" class="form-control"
id="exampleFormControlInput1"
placeholder="[email protected]">
</div>
<div class="form-group">
<label
for="exampleFormControlSelect1">Example
select</label>
<select class="form-control"
id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label
for="exampleFormControlSelect2">Example
multiple select</label>
<select multiple class="form-control"
id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label
for="exampleFormControlTextarea1">Exampl
e textarea</label>
<textarea class="form-control"
id="exampleFormControlTextarea1"
rows="3"></textarea>
</div>
<div class="form-group">
<label
for="exampleFormControlFile1">Example
file input</label>
<input type="file" class="form-control-
file" id="exampleFormControlFile1">
</div>
<div class="form-group">
<label for="formControlRange">Example
Range input</label>
<input type="range" class="form-control-
range" id="formControlRange">
</div>

31
 •••

<div class="form-group">
<input class="form-control form-control-lg"
type="text" placeholder=".form-control-lg">
<input class="form-control" type="text"
placeholder="Default input">
<input class="form-control form-control-
sm" type="text" placeholder=".form-
control-sm">
</div>
<div class="form-group">
<select class="form-control form-
control-lg">
<option>Large select</option>
</select>
<select class="form-control">
<option>Default select</option>
</select>
<select class="form-control form-
control-sm">
<option>Small select</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text"
placeholder="Readonly input here…"
readonly>
</div>
<div class="form-check">
<input class="form-check-input"
type="checkbox" value=""
id="defaultCheck1">
<label class="form-check-label"
for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input"
type="checkbox" value=""
id="defaultCheck2" disabled>
<label class="form-check-label"
for="defaultCheck2">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio"
name="exampleRadios" id="exampleRadios1"
value="option1" checked>
<label class="form-check-label"
for="exampleRadios1">
Default radio
</label>
</div>

32
 •••

<div class="form-check">
<input class="form-check-input" type="radio"
name="exampleRadios" id="exampleRadios2"
value="option2">
<label class="form-check-label"
for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio"
name="exampleRadios" id="exampleRadios3"
value="option3" disabled>
<label class="form-check-label"
for="exampleRadios3">
Disabled radio
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input"
type="checkbox" id="inlineCheckbox1"
value="option1">
<label class="form-check-label"
for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input"
type="checkbox" id="inlineCheckbox2"
value="option2">
<label class="form-check-label"
for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input"
type="checkbox" id="inlineCheckbox3"
value="option3" disabled>
<label class="form-check-label"
for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio"
name="inlineRadioOptions" id="inlineRadio1"
value="option1">
<label class="form-check-label"
for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio"
name="inlineRadioOptions" id="inlineRadio2"
value="option2">
<label class="form-check-label"
for="inlineRadio2">2</label>
</div>

33
 •••

<div class="form-check form-check-inline">

<input class="form-check-input" type="radio"
name="inlineRadioOptions" id="inlineRadio3"
value="option3" disabled>
<label class="form-check-label"
for="inlineRadio3">3 (disabled)</label>
</div>
<div class="form-check">
<input class="form-check-input position-
static" type="checkbox" id="blankCheckbox"
value="option1" aria-label="...">
</div>
<div class="form-check">
<input class="form-check-input position-
static" type="radio" name="blankRadio"
id="blankRadio1" value="option1" aria-
label="...">
</div>
<div class="row">
<div class="col">
<input type="text" class="form-control"
placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control"
placeholder="Last name">
</div>
</div>
</form>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

34
 •••

BAGIAN IV MEMBUAT HALAMAN FRONT END

1. Langkah I (Membuat File Baru)

Buatlah file baru dengan nama front_end.html, simpan di folder

“bootstrap”.

2. Langkah II (Membuat Navigasi Menu)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="icon" href="images/52.png">
<title>Websiteku</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- CSS tambahan karena kita menggunakan layout blog
bawaan boostrap 5 -->
<link href="css/blog.css" rel="stylesheet">
</head>
<body>
<!-- Ini Navigasi Menu -->
<div class="container">
<header class="d-flex flex-wrap justify-content-
center py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center mb-
3 mb-md-0 me-md-auto text-dark text-decoration-none">
<img src="images/51.png" width="55" height="50">
<span class="fs-4">Websiteku</span>
</a>
<ul class="nav nav-pills">
<li class="nav-item"><a href="#" class="nav-
link" aria-current="page">Beranda</a></li>
<li class="nav-item"><a href="#" class="nav-
link">Artikel</a></li>
<li class="nav-item"><a href="#" class="nav-
link">Gallery</a></li>
<li class="nav-item"><a href="#" class="nav-
link">About</a></li>
<li class="nav-item"><a href="#" class="nav-
link">Login</a></li>
</ul>
</header>
</div>
<!-- Ini Navigasi Menu -->

35
 •••

3. Langkah III (Menambahkan Bagian Header)

<main class="container">
<!-- Ini Header -->
<div class="p-4 p-md-5 mb-4 text-white rounded bg-
dark">
<div class="col-md-6 px-0">
<h1 class="display-4 fst-italic">Ini akan diisi
gambar nantinya</h1>
<p class="lead my-3">diisi dengan gambar yang
akan mempercantik dan memberikan keindahan pada Websiteku</p>
</div>
</div>
<!-- Ini Header -->

4. Langkah IV (Menambahkan Section untuk Artikel)

Tambahkan script di bawah ini setelah tulisan <!—Ini Header-->

<!-- Ini Artikel -->
<div class="row g-5">
<div class="col-md-8">
<h3 class="pb-4 mb-4 fst-italic border-bottom">
Artikel-Artikel
</h3>
<article class="blog-post">
<h2 class="blog-post-title">Sample artikel
1</h2>
<p class="blog-post-meta">January 1, 2021 by
<a href="#">Admin</a></p>
<p>ini merupakan rangkaian kata yang nanti
akan menjadi isi dari artikel nya ini merupakan rangkaian kata
yang nanti akan menjadi isi dari artikel nyaini merupakan
rangkaian kata yang nanti akan menjadi isi dari artikel nyaini
merupakan rangkaian kata yang nanti akan menjadi isi dari artikel
nya</p>

<article class="blog-post">
<h2 class="blog-post-title">Sample artikel
2</h2>
<p class="blog-post-meta">December 23, 2020
by <a href="#">Admin</a></p>
<p>ini merupakan rangkaian kata yang nanti
akan menjadi isi dari artikel nya ini merupakan rangkaian kata
yang nanti akan menjadi isi dari artikel nyaini merupakan
rangkaian kata yang nanti akan menjadi isi dari artikel nyaini
merupakan rangkaian kata yang nanti akan menjadi isi dari artikel
nya</p>
</article>
<nav class="blog-pagination" aria-
label="Pagination">
<a class="btn btn-outline-primary"
href="#">Older</a>
<a class="btn btn-outline-secondary
disabled">Newer</a>
</nav>
</div>
36
<!-- Ini Artikel -->
 •••

5. Langkah V (Menambahkan Section untuk About dan Arsip Artikel)

Tambahkan script di bawah ini setelah tulisan <!—Ini Artikel-->

<!-- Ini About -->
<div class="col-md-4">
<div class="position-sticky" style="top: 2rem;">
<div class="p-4 mb-3 bg-light rounded">
<h4 class="fst-italic">About</h4>
<p class="mb-0">About juga bisa disimpan
disini</p>
</div>
<div class="p-4">
<h4 class="fst-italic">Archives</h4>
<ol class="list-unstyled mb-0">
<li><a href="#">March 2021</a></li>
<li><a href="#">February 2021</a></li>
</ol>
</div>
</div>
</div>
<!-- Ini About -->
</div>
</main>

6. Langkah VI (Menambahkan Footer)

Tambahkan script di bawah ini setelah tag </main>

<!-- Ini Footer -->
<footer class="blog-footer">
<p>&copy; 2021 Websiteku.com. &middot; <a
href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
<!-- Ini Footer -->
</body>
</html>

37
 •••

Maka hasil akhirnya akan jadi seperti gambar dibawah ini

38
 •••

BAGIAN V MEMBUAT HALAMAN LOGIN

1. Langkah I (Membuat File Baru)

Buatlah file baru dengan nama login.html, simpan di folder “boostrap”

2. Langkah II

Silahkan ketik script di bawah ini.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="icon" href="images/52.png">
<title>Halaman Login</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/signin.css" rel="stylesheet">
</head>
<body class="text-center">
<main class="form-signin">
<form>
<img class="mb-4" src="images/51.png" alt="" width="72"
height="57">
<h1 class="h3 mb-3 fw-normal">Login disini</h1>
<div class="form-floating">
<input type="email" class="form-control"
id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control"
id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember
me
</label>
</div>
<button class="w-100 btn btn-lg btn-primary"
type="submit">Sign in</button>
</form>
</main>
</body>
</html>

39
 •••

Maka hasil akhirnya akan jadi seperti gambar dibawah ini

40