Modul Dasar Bootstrap 5

MATA KULIAH HTML 5 Programming

FAKULTAS ILMU KOMPUTER UNIVERSITAS SUBANG 2022

 

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-
├── bootstrap.bundle.js
reboot.rtl.min.css.map
├── bootstrap.bundle.js.map
│ ├── bootstrap-utilities.css
├── bootstrap.bundle.min.js
│ ├── bootstrap-utilities.css.map
├── bootstrap.bundle.min.js.map
│ ├── bootstrap-utilities.min.css
├── bootstrap.esm.js
│ ├── bootstrap-utilities.min.css.map
├── bootstrap.esm.js.map
│ ├── bootstrap-utilities.rtl.css
├── bootstrap.esm.min.js
│ ├── bootstrap-utilities.rtl.css.map
├── bootstrap.esm.min.js.map
│ ├── bootstrap-utilities.rtl.min.css
├── bootstrap.js
│ ├── bootstrap-utilities.rtl.min.css.map
├── bootstrap.js.map
│ ├── bootstrap.css
├── bootstrap.min.js
│ ├── bootstrap.css.map
└── bootstrap.min.js.map
│ ├── bootstrap.min.css
│ ├── 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>
Lists
<html>
<head>
<title>Heading Small</title>
Tag <lists> digunakan untuk content="width=device-width,
<meta name="viewport" menampilkan daftar urutan point yang di
anggap penting,
initial- tag <lists> terdiri dari tiga, unordered list, ordered list
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
dan description list.
</head>
<body>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
Unordered ListsBootstrap heading <small>Secondary text</small></h2>
<h2>h2.
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
Digunakan untuk
<h5>h5. membuat
Bootstrap list dalam
heading bentuk pointtext</small></h5>
<small>Secondary point bullet atau
symbol<h6>h6.
tertentu.Bootstrap
Susunan dasar tag <small>Secondary
heading unordered seperti berikut:
text</small></h6>
<script src="js/bootstrap.min.js"></script>
Latihan3.html
</body>
</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>

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

Inline
<!DOCTYPE html>
<html>
<head>
Tag ini <title>Unordered
digunakan untuk membuat list yang tersusun dalam satu baris
List (Unstyled)</title>
penggunaanya dalam program cukup menggunakan class list-inline
<meta name="viewport" content="width=device-width,
initial- scale=1">
dalam <link
tag <ul> :
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>

9
 

Latihan5.html
Ordered Listshtml>
<!DOCTYPE
<html>
<head>
Digunakan untuk membuat
<title>Unordered list (Inline)</title>
List dalam bentuk susunan angka yang
sudah terurut. Susunan dasar tag
<meta name="viewport" Ordered seperti berikut :
content="width=device-width,
initial- scale=1">
Latihan6.html
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
Description
<!DOCTYPE Lists
html>
<html><h1>Contoh Inline</h1>
<head><ul class="list-inline">
Tag ini <title>Ordered
digunakan untukList</title>
membuat deskripsi dari pernyataan yang dianggap
<li class="list-inline-item">HTML5</li>
<meta<li class="list-inline-item">Bootstrap</li>
name="viewport"
penting, susunan tag ini sangat content="width=device-width,
mudah digunakan seperti tag HTML
initial-<li class="list-inline-item">CodeIgniter</li>
scale=1">
yang lainnya.
</ul> rel="stylesheet" href="css/bootstrap.min.css"/>
<link
<script src="js/bootstrap.min.js"></script>
</head>
<dl>
</body>
<body>
</html>
<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>

1
 

<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>
Abbreviations
<html>
<head>
<title>Description</title>
Abbreviations atau singkatan suatu class yang dapat di gunakan untuk
<meta name="viewport" content="width=device-width,
membuat
initial-singkatan
scale=1">dalam dokumen HTML.
Dalam penulisannya memiliki format
<link rel="stylesheet" tag :
href="css/bootstrap.min.css"/>
</head>
<abbr title="…">………</abbr>
<body>
<h1>Contoh Description</h1>
Latihan8.html
<dl>
<dt>HTML5</dt>
<!DOCTYPE html>
<dd>HTML5 merupakan script text yang digunakan untuk
<html>
membangun halaman website</dd>
<head>
<dt>Bootstrap</dt>
<title>Abbreviations</title>
<dd>Bootstrap merupakan script yang dapat digunakan untuk
<meta name="viewport"
memmbangun content="width=device-width,
halamam website.</dd>
initial- scale=1">juga merupakan script yang dapat digunakan
<dd>Bootstrap
<link
untuk rel="stylesheet"
membangun websitehref="css/bootstrap.min.css"/>
yang responsive.</dd>
</head>
<dt>CodeIgniter</dt>
<body>
<dd>Bootstrap merupakan aplikasi Framework yang di gunakan
<p>Ini
untuk contoh
membuat pemakaian
halaman singkatan
website dalam Bootstrap</p>
yang interaktif.</dd>
<abbr
</dl> title="Nomor Induk Mahasiswa">NIM</abbr>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

1
 

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

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

1
 

Italic

Tag em digunakan untuk memberikan efek font dengan format miring

Latihan11.html
Alignment Classes
<!DOCTYPE html>
<html>
Alignment
<head> Classes bisa digunakan untuk memberikan format dokumen
<title>Italic
rata kiri, Class</title>
rata tengah dan rata kanan.
<meta name="viewport" content="width=device-width,
Latihan12.html
initial- scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<!DOCTYPE
</head> html>
<body>
<html>
<p>Berikut contoh penggunaan italic</p>
<head>
<p class="fst-italic">Ini
<title>Alignmet contoh penggunaan italic</p>
Classess</title>
<meta
<script name="viewport" content="width=device-width,
src="js/bootstrap.min.js"></script>
initial-
</body> scale=1">
</html>
<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>

1
 

Emphasis Classes

Bootstrap menyediakan beberapa kelas emphasis yang memiliki atribut

warna yang dapat digunakan di berbagai keperluan.
Latihan13.html

Address
<!DOCTYPE html>
<html>
<head>
tag <address> digunakan untuk memberikan informasi alamat seseorang
<title>Emphasis</title>
<meta name="viewport"
atau organisasi didalam halaman content="width=device-width,
website, cara penulisan script bisa
initial- scale=1">
menggabungkan dengan tag lain
<link rel="stylesheet" seperti tag <strong> dan tag <br>
href="css/bootstrap.min.css"/>
untuk setiap akhir baris script untuk memberikan efek baris baru pada
</head>
<body>
setiap kalimat, perhatikan contoh
<p class="text-muted">Contoh teks muted</p>
Latihan14.html
<p class="text-primary">Contoh teks primary</p>
<p class="text-sucsess">Contoh teks success</p>
<p class="text-info">Contoh
<!DOCTYPE html> teks info</p>
<html><p class="text-warning">Contoh teks warning</p>
<head><p class="text-danger">Contoh teks danger</p>
<script src="js/bootstrap.min.js"></script>
<title>Address</title>
</body>
<meta name="viewport" content="width=device-width,
</html> scale=1">
initial-
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<address>
<strong>Tazkia Salsabila
Ardan</strong><br> Jl. R.A Kartini
KM3<br>
Wanareja, 747474<br>
<abbr title="Phone">P:</abbr> 081112221
</address>
<address>
<strong> Tazkia Salsabila Ardan</strong><br>
<a href="mailto:[email protected]?Subject=Hello
%20tazkia " target="_top">[email protected]</a>
</address>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

1
 

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

Naming a source
<!DOCTYPE html>
<html>
Didalam
<head> penggunaan naming source ini tag <blockquote> digabung
<title>Blockquote</title>
dengan<meta
tag <p> serta serta tag
name="viewport" <cite title=”sourcetitle”>… </cite>
content="width=device-width,
serta tag <small>
initial- .
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
Latihan16.html
<body>
<blockquote class="blockquote">
<!DOCTYPE html>
<p>Lorem Ipsum adalah contoh teks atau dummy dalam
<html>industri percetakan dan penataan huruf atau
<head>typesetting. Lorem Ipsum telah menjadi standar contoh
<title>Blockquote
teks sejak tahunNaming Source</title>
1500an, saat seorang tukang cetak yang
<meta name="viewport" content="width=device-width,
tidak dikenal mengambil sebuah kumpulan teks dan
initial- scale=1">
mengacaknya untuk menjadi sebuah buku contoh huruf. Ia
<link rel="stylesheet"
tidak hanya bertahan href="css/bootstrap.min.css"/>
selama 5 abad, tapi juga telah
</head>
beralih ke penataan huruf elektronik, tanpa ada
<body>perubahan apapun.</p>
<blockquote>
</blockquote>
<p>Seharusnya tingginya tingkat pendidikan dan status sosial
<script src="js/bootstrap.min.js"></script>
mampu membuat hati seseorang menjadi lembut, jauh dari sikap
</body>
angkuh dan sombong.</p>
</blockquote>
<figcaption class="blockquote-footer">
dikutip dari perkataan <cite
title="Kutipan">Tazkia Salsabila Ardan</cite>
</figcaption>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

1
 

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
Code
<!DOCTYPE html>
<html>
Kadang
<head>kita perlu menampilkan kode program kita dalam halaman
website, untuk memenuhiNaming
<title>Blockquote keperluan ini ada sebuah tag yang dapat
Source</title>
<meta name="viewport" content="width=device-width,
kita pakai yaitu
initial- Tag <code> contoh penggunaan, silahkan perhatikan
scale=1">
latihan18.html berikut:
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
Latihan18.html
<body>
<figure class="text-center">
<!DOCTYPE html>
<blockquote class="blockquote">
<html> <p>Seharusnya tingginya tingkat pendidikan dan
<head>
status sosial mampu membuat hati seseorang menjadi lembut,
<title>Code</title>
jauh dari sikap angkuh dan sombong.</p>
<meta name="viewport"
<figcaption content="width=device-
class="blockquote-footer">
width,dikutip
initial-scale=1">
dari perkataan <cite
<link rel="stylesheet"
title="Kutipan">Tazkia href="css/bootstrap.min.css"/>
Salsabila Ardan</cite>
</head> </figcaption>
<body>
</blockquote>
Contoh pemakaian tag code yang dapat menampilkan kode
</figure>
<scriptHTML dalam halaman, <code>&lt;body&gt;</code> dan
src="js/bootstrap.min.js"></script>
</body>bersatu dengan teks yang bukan HTML.
</html><script src="js/bootstrap.min.js"></script>
</body>
</html>

1
 

Image

Bootstrap memiliki beberapa class untuk menampilkan image (gambar)

Aligning images

Class ini akan memberikan posisi pada image nya

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

1
 

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>

1
 

<tr>
<th>NIM</th>
<th>Nama</th>
<th>Telepon</th>
</tr>
</thead>
<tbody>
<tr>
<td>D1A.17.001</td>
<td>Tazkia</td>
<td>0123</td>
</tr>
<tr>
<td>D1A.17.002</td>
<td>Salsabila</td>
<td>01234</td>
</tr>
<tr>
<td>D1A.17.003</td>
<td>Ardan</td>
<td>0823176</td>
</tr>
<tr>
<td>D1A.17.004</td>
<td>Tazkia Ardan</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>

1
 

<tbody>
<tr>
<td>D1A.17.001</td>
<td>Tazkia</td>
<td>0123</td>
</tr>
<tr>
<td>D1A.17.002</td>
<td>Salsabila</td>
<td>01234</td>
</tr>
<tr>
<td>D1A.17.003</td>
<td>Ardan</td>
<td>0823176</td>
</tr>
<tr>
<td>D1A.17.004</td>
<td>Tazkia Ardan</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>Tazkia</td>
<td>0123</td>
</tr>

2
 

<tr>
<td>D1A.17.002</td>
<td>Salsabila</td>
<td>01234</td>
</tr>
<tr>
<td>D1A.17.003</td>
<td>Ardan</td>
<td>0823176</td>
</tr>
<tr>
<td>D1A.17.004</td>
<td>Tazkia Ardan</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>Tazkia</td>
<td>0123</td>
</tr>
<tr>
<td>D1A.17.002</td>
<td>Salsabila</td>
<td>01234</td>
</tr>
<tr>
<td>D1A.17.003</td>
<td>Ardan</td>
<td>0823176</td>
2
 

</tr>
<tr>
<td>D1A.17.004</td>
<td>Tazkia Ardan</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>Tazkia</td>
<td>0123</td>
</tr>
<tr class="table-primary">
<td>D1A.17.002</td>
<td>Salsabila</td>
<td>01234</td>
</tr>
<tr class="table-secondary">
<td>D1A.17.003</td>
<td>Ardan</td>
<td>0823176</td>
</tr>
<tr class="table-success">
<td>D1A.17.004</td>
<td>Tazkia Ardan</td>
<td>081277</td>
</tr>

2
 

<tr class="table-danger">
<td>D1A.17.005</td>
<td>Tazkiar</td>
<td>011277</td>
</tr>
<tr class="table-warning">
<td>D1A.17.004</td>
<td>Tazkiasalsa</td>
<td>089182</td>
</tr>
<tr class="table-info">
<td>D1A.17.005</td>
<td>Salsabila</td>
<td>0872621</td>
</tr>
<tr class="table-light">
<td>D1A.17.006</td>
<td>Salsabila Ardan</td>
<td>081277</td>
</tr>
<tr class="table-dark">
<td>D1A.17.007</td>
<td>Bila</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>Tazkia</td>
<td>01234</td>
</tr>

2
 

<tr class="bg-success">
<td>D1A.17.004</td>
<td>Salsabila</td>
<td>081277</td>
</tr>
<tr class="bg-danger">
<td>D1A.17.005</td>
<td>Ardan</td>
<td>011277</td>
</tr>
<tr class="bg-warning">
<td>D1A.17.004</td>
<td>Tazkia Ardan</td>
<td>089182</td>
</tr>
<tr class="bg-info">
<td>D1A.17.005</td>
<td>Bila Bila</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>Tazkia</td>
<td>01234</td>
</tr>
<tr class="bg-success">
<td>D1A.17.004</td>

2
 

<td>Salsabila</td>
<td>081277</td>
</tr>
<tr class="bg-danger">
<td>D1A.17.005</td>
<td>Ardan</td>
<td>011277</td>
</tr>
<tr class="bg-warning">
<td>D1A.17.004</td>
<td>Tazkia Ardan</td>
<td>089182</td>
</tr>
<tr class="bg-info">
<td>D1A.17.005</td>
<td>Bila Bila</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>

2
 

<tbody>
<tr>
<td>D1A.17.002</td>
<td>Tazkia</td>
<td>Ardan</td>
<td>Subang</td>
<td>Perempuan</td>
<td>Nonton</td>
<td>Jalani Aja</td>
<td>0812222</td>
<td>Unsub</td>
<td>Happy</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>

2
 

<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"
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="#"

2
 

<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>
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>

2
 

Dismissing

Latihan32.html

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

2
 

<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>

3
<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>

3
 

<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>

3
 

<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>

3
 

<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>

3
 

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 -->

3
 

3. Langkah III (Menambahkan Bagian Header)

4. Langkah IV (Menambahkan
<main Section untuk Artikel)
class="container">
<!-- Ini Header -->
Tambahkan script di bawah
<div ini setelah
class="p-4 tulisan
p-md-5 mb-4<!—Ini Header-->
text-white rounded bg-
dark">
<!-- <div
Ini Artikel -->
class="col-md-6 px-0">
<div <h1 class="display-4
class="row g-5"> fst-italic">Ini akan
diisi gambar nantinya</h1>
<div class="col-md-8">
<p class="lead
<h3 class="pb-4 my-3">diisi dengan
mb-4 fst-italic gambar
border-bottom">
yang akan mempercantik dan memberikan keindahan pada
Artikel-Artikel
Websiteku</p>
</h3>
</div>
<article class="blog-post">
</div>
<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> 3
<!-- Ini Artikel -->
 

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

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

<!-- Ini About -->

6. Langkah VI (Menambahkan Footer)
<div class="col-md-4">
<div class="position-sticky" style="top: 2rem;">
Tambahkan script di bawah setelah tagmb-3
<diviniclass="p-4 bg-light rounded">
</main>
<h4 class="fst-italic">About</h4>
<!-- Ini Footer --> <p class="mb-0">About juga bisa disimpan
disini</p>
<footer class="blog-footer">
</div>
<p>&copy; 2021 Websiteku.com. &middot; <a
href="#">Privacy</a><div class="p-4">
&middot; <a href="#">Terms</a></p>
<p> <h4 class="fst-italic">Archives</h4>
<ol class="list-unstyled
<a href="#">Back to top</a> mb-0">
</p> <li><a href="#">March 2021</a></li>
</footer> <li><a href="#">February 2021</a></li>
</ol>
<!-- Ini Footer -->
</body> </div>
</html> </div>
</div>
<!-- Ini About -->
</div>
</main>

3
 

Maka hasil akhirnya akan jadi seperti gambar dibawah ini

3
 

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>

3
 

Maka hasil akhirnya akan jadi seperti gambar dibawah ini