Modul Bootstrap Dasar v5

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>


<meta charset="utf-8">

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

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

<title>Belajar Bootstrap 5</title>
</head>
<body>
<h1>Hello, world!</h1>


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

<meta charset="utf-8" />


scale=1">



Sebenarnya yang wajib dalam Bootstrap adalah yang dua ini :

scale=1">
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/bootstrap@5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/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
•••

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>


scale=1">

<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>
5
•••
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
</header>

</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>
scale=1">
</head>
<body>
<h1>h1. Bootstrap heading</h1>
</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>
scale=1">
</head>
<body>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
</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>
scale=1">
</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>
</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>
</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>
scale=1">
</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>
</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>
scale=1">
</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>
</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>
scale=1">
</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>
</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>
scale=1">
</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>
</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>
scale=1">
</head>
<body>
<p>Ini contoh pemakaian singkatan dalam Bootstrap</p>
<abbr title="Nomor Induk Mahasiswa">NIM</abbr>
</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>
scale=1">
</head>
<body>
<p>Berikut contoh penggunaan tag small</p>
<small>Ini contoh small tag dengan huruf yang lebih
kecil</small>
</body>
</html>
Strong / Bold
Tag strong digunakan untuk memberikan efek font dengan format tebal
Latihan10.html
<!DOCTYPE html>
<html>
<head>
<title>Stong Tag</title>
scale=1">
</head>
<body>
<p>Berikut contoh penggunaan tag strong</p>
<strong>Ini contoh penggunaan strong</strong>
</body>
</html>
12
•••
Italic
Tag em digunakan untuk memberikan efek font dengan format miring
Latihan11.html
<!DOCTYPE html>
<html>
<head>
<title>Italic Class</title>
scale=1">
</head>
<body>
<p>Berikut contoh penggunaan italic</p>
<p class="fst-italic">Ini contoh penggunaan italic</p>
</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>
scale=1">
</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>
</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>
scale=1">
</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>
</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>
scale=1">
</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:bagusaliakbar@unsub.ac.id?Subject=Hello%20bagu
s" target="_top">bagusaliakbar@unsub.ac.id</a>
</address>
</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>
scale=1">
</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>
</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>
scale=1">
</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>
</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>
scale=1">
</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>
</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">
</head>
<body>
Contoh pemakaian tag code yang dapat menampilkan kode HTML
dalam halaman, <code><body></code> dan bersatu
dengan teks yang bukan HTML.
</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>
scale=1">
</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">
</body>
</html>
Class img-thumbnail
Latihan20.html
<!DOCTYPE html>
<html>
<head>
<title>Img Thumbnail</title>
scale=1">
</head>
<body>
<h2>Img Thumbnail</h2>
<p>Kampus 1 Univesitas Subang</p>
<img src="logo.png" class="img-thumbnail" alt="Univesitas
Subang">
</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>
initial-scale=1">
</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>
</body>
</html>
Bordered Table
<table class="table table-bordered"> ... </table>
Latihan22.html
<!DOCTYPE html>
<html>
<head>
<title>Bordered Table</title>
initial-scale=1">
</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>081277</td>
</tr>
</tbody>
</table>
</body>
</html>
Borderless Table
<table class="table table-borderless"> ... </table>
Latihan23.html
<!DOCTYPE html>
<html>
<head>
<title>Bordered Table</title>
initial-scale=1">
</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>081277</td>
</tr>
</tbody>
</table>
</body>
</html>
Hoverable Table
<table class="table table-hover"> ... </table>
Latihan24.html
<!DOCTYPE html>
<html>
<head>
<title>Hoverable Table</title>
initial-scale=1">
</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>081277</td>
</tr>
</tbody>
</table>
</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>
initial-scale=1">
</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>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>081277</td>
</tr>
<tr class="table-dark">
<td>D1A.17.007</td>
<td>081277</td>
</tr>
</tbody>
</table>
</body>
</html>
Background Variant
Latihan26.html
<!DOCTYPE html>
<html>
<head>
<title>Backgroud Table</title>
initial-scale=1">
</head>
<body>
<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>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>089182</td>
</tr>
<tr class="bg-info">
<td>D1A.17.005</td>
<td>Ali Akbar</td>
<td>0872621</td>
</tr>
</tbody>
</table>
</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>
initial-scale=1">
</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>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>089182</td>
</tr>
<tr class="bg-info">
<td>D1A.17.005</td>
<td>Ali Akbar</td>
<td>0872621</td>
</tr>
</tbody>
</table>
</body>
</html>
Responsive Table
<div class="table-responsive">
...
</table>
</div>
Latihan28.html
<!DOCTYPE html>
<html>
<head>
<title>Responsive Table</title>
initial-scale=1">
</head>
<body>
<div class="table-responsive">
<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>
</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>
initial-scale=1">
</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>
</body>
</html>
Link Color
Latihan30.html
<!DOCTYPE html>
<html>
<head>
<title>Alert Link Color</title>
initial-scale=1">
</head>
<body>
<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="#"
</div>
A simple success alert with <a href="#"
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#"
</div>
27
•••
<div class="alert alert-warning" role="alert">

simple warning alert with <a href="#"
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#"
</div>
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#"
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#"
</div>
</div>
</body>
</html>
Additional Content
Latihan31.html
<!DOCTYPE html>
<html>
<head>
<title>Alert Additional Content</title>
initial-scale=1">
</head>
<body>
<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>
</body>
</html>
28
•••
Dismissing
Latihan32.html
<!DOCTYPE html>
<html>
<head>
<title>Alert Dismissing</title>
initial-scale=1">
</head>
<body>
<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>
</body>
</html>
Button
<button type="button" class="btn btn-primary">Primary</button>
Latihan33.html
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
initial-scale=1">
</head>
<body>
<h2>Button Style</h2>
<button type="button" class="btn btn-
primary">Primary</button>
secondary">Secondary</button>
success">Success</button>
danger">Danger</button>
warning">Warning</button>
info">Info</button>
29
•••

light">Light</button>
dark">Dark</button>
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>
secondary">Secondary</button>
success">Success</button>
danger">Danger</button>
warning">Warning</button>
info">Info</button>
light">Light</button>
dark">Dark</button>
<br>
<h2>Disabled Button</h2>
<button type="button" class="btn btn-lg btn-
primary" disabled>Primary button</button>
</div>
</body>
</html>
Form
Latihan34.html
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
initial-scale=1">
</head>
<body>
<h2>Form</h2>
30
<form>
•••
<div class="form-group">
<label
for="exampleFormControlInput1">Email
address</label>
<input type="email" class="form-control"
id="exampleFormControlInput1"
placeholder="name@example.com">
</div>
<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>
<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>
<label
for="exampleFormControlTextarea1">Exampl
e textarea</label>
<textarea class="form-control"
id="exampleFormControlTextarea1"
rows="3"></textarea>
</div>
<label
for="exampleFormControlFile1">Example
file input</label>
<input type="file" class="form-control-
file" id="exampleFormControlFile1">
</div>
<label for="formControlRange">Example
Range input</label>
<input type="range" class="form-control-
range" id="formControlRange">
</div>
31
•••
<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>
<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>
<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>
type="checkbox" value=""
id="defaultCheck2" disabled>
for="defaultCheck2">
Disabled checkbox
</label>
</div>
<input class="form-check-input" type="radio"
name="exampleRadios" id="exampleRadios1"
value="option1" checked>
for="exampleRadios1">
Default radio
</label>
</div>
32
•••
value="option2">
Second default radio
</label>
</div>
value="option3" disabled>
Disabled radio
</label>
</div>
<div class="form-check form-check-inline">
type="checkbox" id="inlineCheckbox1"
value="option1">
for="inlineCheckbox1">1</label>
</div>
value="option2">
for="inlineCheckbox2">2</label>
</div>
for="inlineCheckbox3">3 (disabled)</label>
</div>
name="inlineRadioOptions" id="inlineRadio1"
value="option1">
for="inlineRadio1">1</label>
</div>
value="option2">
for="inlineRadio2">2</label>
</div>
33
•••

for="inlineRadio3">3 (disabled)</label>
</div>
<input class="form-check-input position-
static" type="checkbox" id="blankCheckbox"
value="option1" aria-label="...">
</div>
<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>
</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>
initial-scale=1">
<link rel="icon" href="images/52.png">
<title>Websiteku</title>

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

<link href="css/blog.css" rel="stylesheet">
</head>
<body>

<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>
link">Artikel</a></li>
link">Gallery</a></li>
link">About</a></li>
link">Login</a></li>
</ul>
</header>
</div>

35
•••
3. Langkah III (Menambahkan Bagian Header)

<main class="container">

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

4. Langkah IV (Menambahkan Section untuk Artikel)
Tambahkan script di bawah ini setelah tulisan <!—Ini Header-->


<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

•••
5. Langkah V (Menambahkan Section untuk About dan Arsip Artikel)
Tambahkan script di bawah ini setelah tulisan <!—Ini Artikel-->


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

</div>
</main>
6. Langkah VI (Menambahkan Footer)
Tambahkan script di bawah ini setelah tag </main>


<footer class="blog-footer">
<p>© 2021 Websiteku.com. · <a
href="#">Privacy</a> · <a href="#">Terms</a></p>
<p>
<a href="#">Back to top</a>
</p>
</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>
scale=1">
<link rel="icon" href="images/52.png">
<title>Halaman Login</title>

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

<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="name@example.com">
<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

Modul Bootstrap Dasar v5

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Bootstrap Dasar v5

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul Dasar Bootstrap 5

Bagus Ali Akbar

FAKULTAS ILMU KOMPUTER

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

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

SIRENDA SILMA (ELAYANAN) V 1.0

PANTES / SIDESI SILMA (ELAYANAN) V 2.0

ELEARNING SMS CENTER

MANAGEMENT FILE SIPERO

Seiring berjalan nya perkembangan bootstrap akhirnya Kembali merilis versi

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

Bootstrap telah menyediakan kumpulan aturan dan komponen class

Bootstrap awalnya dikembangkan oleh Developer Twitter, lalu dibuat open

Repositori resmi Bootstrap di Github

BAGIAN II DOWNLOAD & CONFIGURATION

Untuk bisa bekerja dengan Bootstrap kita harus mendownload Bootstrap

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

Bootstrap dirancang dengan beberapa teknologi pendukung seperti CSS

Struktur File Bootstrap

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

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

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

Sedangkan file bootstrap.css biasanya digunakan untuk development. Jika

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

Hasilnya seperti gambar di bawah ini

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

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

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

<title>Belajar Bootstrap 5</title>

Sebenarnya yang wajib dalam Bootstrap adalah yang dua ini :

Browser dan devices

Secara umum, Bootstrap mendukung versi terbaru dari setiap browser.

Seperti yang sudah disampaikan diatas bahwa Bootstrap menggunakan

Bootstrap didesain agar aplikasi yang anda buat mampu berjalan di

Untuk memastikan aplikasi dapat berjalan dengan baik di perangkat mobile

Bootstrap Selain memberi dukungan untuk isi halaman website yang

Untuk membuat layout halaman website menjadi center, dengan cara

Grid system merupakan pengaturan ukuran yang di tampilkan pada

Sebagai contoh disini kita sudah mempunyai rancangan grid seperti

Untuk mendapatkan gambar seperti diatas silahkan ketikan script dibawah

Sebagai latihan buatlah halaman seperti gambar di bawah ini dengan

BAGIAN III LATIHAN-LATIHAN

Reboot, kumpulan perubahan CSS elemen-spesifik dalam satu file

Reboot dibangun berdasarkan Normalisasi, menyediakan banyak elemen

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

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

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

Digunakan untuk membuat list dalam bentuk susunan angka yang

Abbreviations atau singkatan suatu class yang dapat di gunakan untuk

Tag em digunakan untuk memberikan efek font dengan format miring

Alignment Classes bisa digunakan untuk memberikan format dokumen

Bootstrap menyediakan beberapa kelas emphasis yang memiliki atribut

tag <address> digunakan untuk memberikan informasi alamat seseorang

Tag <blockquotes> digunakan jika kita ingin memberikan kutipan pada

Didalam penggunaan naming source ini tag <blockquote> digabung

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

Kadang kita perlu menampilkan kode program kita dalam halaman

Bootstrap memiliki beberapa class untuk menampilkan image (gambar)

Class ini akan memberikan posisi pada image nya

Dalam perancangan halaman website table merupakan salah satu

Untuk menampilkan table menggunakan bootstrap, dengan struktur