Pertemuan 11

Membuat Jumbotron dengan bootstrap
Jumbotron adalah fitur yang diberikan oleh bootstrap yang digunakan untuk menampilkan
pengumuman, konten khusus, atau semacam informasi yang ditampilkan pada halaman
website.
Jumbotron biasanya diletakkan di halaman depan sebuah website,warna default dari
jumbotron pada bootstrap adalah abu – abu, nah nanti isi dalam jumbotron bisa anda set
sesuai kebutuhan website anda.
Cara membuat jumbotron boostrap 4
Untuk membuat jumbotron dengan boostrap 4 anda memerlukan class .jumbotron yang bisa
anda gunakan pada tag <div>, baik untuk contoh perhatikan skrip berikut ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/jquery-3.2.1.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1 class="display-4">Jumbotron Bootstrap 4</h1>
<p>Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan ha
laman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun
pendesain halaman website.</p>
<hr/>
<p>
<a class="btn btn-primary btn-lg" href="#">STMIK IKMI Cirebon</a>
</p>
</div>
</div>
</body>
</html>
Semisal kita simpan dengan nama jumbotron.html, maka hasilnya jika dibuka dibrowser
adalah :
Keterangan :
 untuk menampilkan jumbotron kita harus menambahkan class jumbotron pada bagian tag
<div>, anda bisa memodifikasi isi didalam jumbotron
Membuat Full-width Jumbotron

Anda juga bisa membuat jumbotron dengan ukuran full width (lebarnya full) dan
menghilangkan lenkungan pada bagian sudut dari jumbotron.
untuk contoh perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">

<h1 class="display-4">Jumbotron Bootstrap 4</h1>
<p>Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampila
n halaman website yang dapat mempercepat pekerjaan seorang pengembang website atau
pun pendesain halaman website.</p>
<hr/>
<p>
<a class="btn btn-primary btn-lg" href="#">STMIK IKMI Cirebon</a>
</p>
</div>
</div>
</body>
</html>
Semisal kita simpan dengan nama full_width_bootstrap.html, lalu kita buka di browser maka
hasilnya adalah sebagai berikut :
Keterangan :
 anda bisa menambahkan class jumbotron-fluid pada tag <div>, baru didalamnya kita buat
tag <div> dengan class container, jadi ini ada kebalikan dari contoh sebelumnya.
Membuat Pesan Alert dengan Bootstrap

Bootstrap menyediakan beberapa class yang bisa anda gunakan untuk menampilkan pesan
alert, bootstrap 4 menyediakan beberapa jenis tampilan dari alert, sehingga anda dapat
memanfaatkan alert tersebut untuk beberapa jenis pesan, seperti pesan error bisa
menggunakan tampilan alert berwarna merah, untuk pesan info bisa menggunakan alert
berwarna biru, untuk pesan sukses entry data bisa menggunakan alert berwarna hijau, dan
masih ada beberapa lagi jenis tampilan alert yang bisa anda gunakan untuk menampilkan
pesan pada halaman web anda.
Cara membuat alert di bootstrap 4

Untuk membuat alert anda cukup menuliskan class .alert pada tag <div>, setelah itu
tambahkan class alert yang digunakan untuk mengatur tampilan dari alert, beberapa class alert
yang dapat digunakan untuk mengatur tampilan alert antara lain :
(jenis alert ini biasanya digunakan untuk menampilkan pesan

.alert-success : sukses dari sebuah action)
(jenis alert ini biasanya digunakan untuk menampilkan informasi
.alert-info : yang bersifat biasa)
.alert-warning : yang membutuhkan perhatian khusus)
.alert-danger : peringatan bahaya dari sebuah action)
.alert-primary : yang penting)
.alert-secondary : yang bersifat tidak begitu penting)
.alert-light : (menampilkan alert dengan warna abu abu)
.alert-dark : (menampilkan alert dengan warna abu abu terang)
untuk contoh penggunaan dari alert, perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Penggunaan Alert pada Bootstrap</h2>
<div class="alert alert-success"><strong>Success!</strong> Alert yang menggunakan class alert-success</div>
<div class="alert alert-info"><strong>Info!</strong> Alert yang menggunakan class alert-info</div>
<div class="alert alert-warning"><strong>Warning!</strong> Alert yang menggunakan class alert-warning</div>
<div class="alert alert-danger"><strong>Danger!</strong> Alert yang menggunakan class alert-danger</div>
<div class="alert alert-primary"><strong>Primary!</strong> Alert yang menggunakan class alert-primary</div>
<div class="alert alert-secondary"><strong>Secondary!</strong> Alert yang menggunakan class alert-secondary</div>
<div class="alert alert-dark"><strong>Dark!</strong> Alert yang menggunakan class alert-dark</div>
<div class="alert alert-light"><strong>Light!</strong> Alert yang menggunakan class alert-light</div>
</div>
</body>
</html>
Semisal kita simpan dengan nama alert_bootstrap.html, kita buka di browser maka hasilnya
adalah sebagai berikut :
Keterangan :
 Alert akan ditampilkan dengan warna yang sesuai dengan class alertnya
 Jadi untuk membuat alert anda tinggal membuat tag <div> dan tambahkan class alert, untuk
pemilihan warna tinggal menyesuaikan class alert yang diinginkan
Menambahkan Link pada alert

Bootstrap juga menyediakan class alert-link yang digunakan untuk membuat link didalam box
alert, dan link tersebut akan menyesuaikan dari jenis alert yang digunakan, baik untuk contoh
silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Penggunaan Class alert-link pada link</h2>
<div class="alert alert-success"><strong>Success!</strong> | <a href="#" class="alert-link">Klik Disini</a></div>
<div class="alert alert-info"><strong>Info!</strong> | <a href="#" class="alert-link">Klik Disini</a></div>
<h2>Contoh Link yang tidak menggunakan alert-link</h2>
<div class="alert alert-success"><strong>Success!</strong> | <a href="#">Klik Disini</a></div>
<div class="alert alert-info"><strong>Info!</strong> | <a href="#">Klik Disini</a></div>
</div>
</body>
</html>
Semisal kita simpan dengan nama alert_link.html, lalu kita buka di browser maka hasilnya
adalah :
Keterangan :
 perhatikan untuk 2 alert awal, ketika link menggunakan class alert-link text yang ditampilkan
untuk link tersebut akan ditampilkan dengan text bold sehingga tampilannya pas dengan
box alert.
 tetapi untuk 2 alert berikutnya, text ditampilkan dengan tampilan text biasa, karena kita tidak
menambahkan class alert-link link tersebut
Membuat Tombol Close pada Alert

Setelah dalam bagian sebelumnya kita sudah membahas mengenai bagaimana cara membuat
alert dengan berbagai tampilan warna sesuai dengan class alert yang digunakan, nah kali ini
kita akan belajar untuk menambahkan tombol close pada bagian alert.
perhatikan contoh skripnya adalah sebagai berikut ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Penggunaan Tombol Close Alert</h2>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Alert dengan class alert-success</strong>
</div>
<div class="alert alert-info alert-dismissable">
<strong>Alert dengan class alert-info</strong>
</div>
<div class="alert alert-warning alert-dismissable">
<strong>Alert dengan class alert-warning</strong>
</div>
</div>
</body>
</html>
Semisal kita simpan dengan nama close_alert.html, lalu jika kita buka di browser maka
hasilnya :
Keterangan :
 untuk membuat tombol close pada bagian alert, kita tambahkan attribute alert-dismissable
pada tag <div>
 berikutnya tambahkan tombol diantara tag <div> </div>, didalam tombol tersebut kita
tambahkan class close, dan attribute data-dismiss dengan value alert
 diantara tag <button> dan tag penutup </button> kita tuliskan × skrip tersebut akan
menjadi tanda x (silang) pada bagian tombol
Menambahkan Animasi pada close alert

Setelah dibagian sebelumnya kita telah membahas mengenai tombol close pada bagian alert,
berikutnya kita akan menambahkan animasi pada saat close alert, dengan animasi ini ketika
tombol close ditekan maka alert akan menutup dengan jeda beberapa saat, untuk contoh
perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Animasi Tombol Close Alert</h2>
<div class="alert alert-success alert-dismissable fade show">
<strong>Alert dengan class alert-success</strong>
</div>
<div class="alert alert-info alert-dismissable fade show">
<strong>Alert dengan class alert-info</strong>
</div>
</div>
</body>
</html>
Semisal kita simpan dengan nama animasi_close_alert.html, jika kita buka di browser maka
hasilnya :
Keterangan :
 untuk skrip yang ditulis dimasing – masing dari alert dan tombol close sama seperti contoh
sebelumnya, tetapi kita menambahkan attribute fade dan show pada bagian tag <div> dari
alert
Membuat Badges dengan Bootstrap

badges digunakan untuk memberikan informasi tambahan pada sebuah konten web,
contohnya untuk menampilkan keterangan jumlah notifikasi pesan yang masuk, menampilkan
status dari transaksi data dan beberapa informasi lainnya.
untuk membuat badges lebih cenderung menggunakan tag <span>, didalam tag <span>
tersebut anda dapat menambahkan class .badge dan disertai dengan contextual class
contohnya seperti .badge-primary, untuk menyesuaikan tampilan badge yang diinginkan.
Cara membuat badge dengan bootstrap
Untuk contoh pembuatan bagde dengan bootstrap, bisa diperhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Penggunaan Badge</h2>
<span class="badge badge-primary">badge-primary</span>
<span class="badge badge-secondary">badge-secondary</span>
<span class="badge badge-success">badge-success</span>
<span class="badge badge-danger">badge-danger</span>
<span class="badge badge-warning">badge-warning</span>
<span class="badge badge-info">badge-info</span>
<span class="badge badge-light">badge-light</span>
<span class="badge badge-dark">badge-dark</span>
</div>
</body>
</html>
Semisal kita simpan dengan nama badge_bootstrap.html, lalu kita buka di browser maka
hasilnya adalah seperti berikut ini :
Keterangan :
 untuk membuat badge tinggal membuat tag <span> dan kita menambahkan class badge
didalamnya, setelah itu tambahkan dengan contextual class, seperti badge-primary, badge-
secondary dll.
 warna badge akan menyesuaikan contextual class yang digunakan
Membuat Pill Badges dengan bootstrap

Pill Badges itu sama seperti badges sebelumnya hanya saja bentuknya lebih melingkar, untuk
contoh silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Penggunaan Pill Badge</h2>
<span class="badge badge-pill badge-primary">badge-primary</span>
<span class="badge badge-pill badge-secondary">badge-secondary</span>
<span class="badge badge-pill badge-success">badge-success</span>
<span class="badge badge-pill badge-danger">badge-danger</span>
<span class="badge badge-pill badge-warning">badge-warning</span>
<span class="badge badge-pill badge-info">badge-info</span>
<span class="badge badge-pill badge-light">badge-light</span>
<span class="badge badge-pill badge-dark">badge-dark</span>
</div>
</body>
</html>
Semisal kita simpan dengan nama pill_badges.html, lalu kita buka di browser maka hasilnya
adalah sebagai berikut ini :
Keterangan :
 untuk membuat pill badge anda hanya perlu menambahkan class badge-pill di masing
masing objek badge
Badge didalam Element Lain

pada bagian ini kita akan membahas mengenai cara menambahkan badge didalam objek lain
seperti contohnya pada tombol untuk menampilkan berapa notifikasi yang masuk dll, untuk
contoh penggunaan skripnya silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Penggunaan Badge dalam objek lain</h2>
<button type="button" class="btn btn-info">
Pesan <span class="badge badge-light">10</span>
</button>
<button type="button" class="btn btn-success">
Order <span class="badge badge-light">90</span>
</button>
</div>
</body>
</html>
Semisal kita simpan dengan nama badge_dalam_objek.html, lalu kita buka di browser maka
hasilnya :
Keterangan :
 anda bisa menambahkan badge didalam objek lain semisal tombol dengan cara
menambahkan tag <span> diantara tag <button> dan </button>, didalam tag <span> tersebut
berikan class badge, serta tambahkan contextual class sesuai dengan tampilan badge yang
diinginkan.
Membuat Progress Bar dengan Bootstrap

Progress bar bisa anda gunakan untuk menginformasikan progress pekerjaan ke dalam suatu
user interface yang biasanya kita kenal dengan nama progress bar, sehingga dapat
mempermudah melakukan pemantauan progress dari sebuah pekerjaan.
Dalam bootstrap 4 terdapat beberapa class yang bisa anda gunakan untuk membuat dan
mengatur tampilan progress bar, baik langsung saja kita akan membahasnya satu persatu.
Cara membuat progress bar dengan bootstrap
Untuk membuat progress bar menggunakan bootstrap secara sederhana skripnya adalah
seperti berikut ini :
Keterangan :
 untuk membuat progress bar, anda hanya perlu menuliskan tag <div> lalu tambahkan
class “progress” didalam tag <div> tersebut.
 berikutnya anda perlu membuat tag <div> lagi diantara tag <div></div> sebelumnya,
didalam tag <div> tersebut anda perlu menuliskan class “progress-bar” lalu menuliskan
style dengan property width dan value yang disesuaikan dengan value untuk progress bar,
untuk satuan value adalah persen
Mengatur ukuran tinggi dari progress bar

Untuk mengatur tinggi dari progress bar, anda perlu menambahkan property height dan
mengisikan value, pada bagian attribute style, untuk contoh skripnya adalah sebagai berikut :
Keterangan :
 perhatikan didalam tag <div> pertama kita menambahkan height:50px; pada bagian
attribute style
 tidak hanya itu didalam tag <div> kedua kita juga menuliskan hal yang sama height:50px
pada attribute style
 kedua hal tersebut digunakan untuk mengatur ukuran tinggi dari progress bar
Menambahkan label pada bagian progress bar

Untuk mengatur label dari progress bar anda hanya perlu menambahkan tulisan diantara tag
<div> </div>, untuk contohnya perhatikan skrip dibawah ini :
Baik kita sudah belajar mengenai skrip yang digunakan untuk membuat progress bar,
mengatur ukuran tinggi dari progress bar, dan menambahkan label progress bar, untuk contoh
skrip lengkapnya pembuatan progress bar, silahkan perhatikan skrip dibawah ini :
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Progress Bar</h2>
<div class="progress">
<div class="progress-bar" style="width:50%">50%</div>
</div>
<br/>
<div class="progress" style="height: 100px;">
<div class="progress-bar" style="width:80%;height: 100px;">80%</div>
</div>
</div>
</body>
</html>
Semisal kita simpan dengan nama progress_bar.html, lalu kita buka di browser maka hasilnya
adalah :
Keterangan :
 pada progress bar pertama menampilkan progress 50% karena kita menuliskan width:50%;
 pada progress bar kedua menampilkan progress 80% karena kita menuliskan width:80%;
dan untuk tingginya adalah 100 pixel karena kita menuliskan height:100px
Memberikan warna pada progress bar

Setelah dalam bagian sebelumnya kita telah belajar bagaimana cara membuat progress bar
dengan menggunakan class yang disediakan oleh bootstrap, berikutnya kita akan belajar
mengenai bagaimana kita memberikan warna pada progress bar, ada beberapa class yang
bisa digunakan untuk memberikan warna pada progress bar, class tersebut antara lain :
 bg-success
 bg-info
 bg-warning
 bg-danger
 bg-white
 bg-secondary
 bg-light
 bg-dark
Contoh penggunaan skripnya adalah sebagai berikut :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Progress Bar</h2>
<div class="progress-bar" style="width:10%"></div>
</div><br>
<div class="progress-bar bg-success" style="width:20%">class bg-success</div>
</div><br>
<div class="progress-bar bg-info" style="width:30%">class bg-info</div>
</div><br>
<div class="progress-bar bg-warning" style="width:40%">class bg-warning</div>
</div><br>
<div class="progress-bar bg-danger" style="width:50%">class bg-danger</div>
</div><br>
<div class="progress border">

<div class="progress-bar bg-
white" style="width:60%"><span style='color:black;'>class bg-white</span></div>
</div><br>
<div class="progress-bar bg-secondary" style="width:70%">class bg-
secondary</div>
</div><br>
<div class="progress border">

<div class="progress-bar bg-
light" style="width:80%"><span style='color:black;'>class bg-light</span></div>
</div><br>
<div class="progress-bar bg-dark" style="width:90%">class bg-dark</div>
</div>
</div>
</body>
</html>
Semisal kita simpan dengan nama warna_progress_bar.html, lalu kita buka di browser maka
Keterangan :
 warna yang ditampilkan progress bar akan berbeda – beda tergantung class yang dipasang
pada progress bar tersebut
 jika anda tidak menggunakan class untuk mengganti warna progress bar, maka warna yang
ditampilkan adalah warna biru seperti pada progress bar pertama
Striped Progress Bar

Anda tidak hanya bisa mengganti warna pada bagian progress bar, tapi anda juga bisa
memberikan pola striped pada progress bar yang anda buat, caranya anda hanya perlu
menuliskan menambahkan class .progress-bar-striped pada progress bar yang anda buat,
untuk contohnya adalah seperti skrip berikut ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Striped Progress Bar</h2>
<div class="progress-bar progress-bar-striped" style="width:10%"></div>
</div><br>
<div class="progress-bar bg-success progress-bar-
striped" style="width:20%">class bg-success</div>
</div><br>
<div class="progress-bar bg-info progress-bar-
striped" style="width:30%">class bg-info</div>
</div><br>
<div class="progress-bar bg-warning progress-bar-
striped" style="width:40%">class bg-warning</div>
</div><br>
<div class="progress-bar bg-danger progress-bar-
striped" style="width:50%">class bg-danger</div>
</div><br>
</div>
</body>
</html>
Semisal kita simpan dengan nama striped_progress_bar.html, lalu kita buka di browser maka
Keterangan :
 progress bar ditampilkan dengan pola striped, karena kita menambahkan class .progress-
bar-striped
Membuat animasi progress bar

setelah di bagian sebelumnya kita telah membuat progress bar yang memiliki pola striped,
berikutnya anda juga bisa membuat animasi pada pola striped tersebut, untuk membuat
animasi pada progress bar anda cukup menambahkan class .progress-bar-animated, baik
untuk contoh skripnya ada sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Animasi Progress Bar</h2>
<div class="progress-bar bg-success progress-bar-striped progress-bar-
animated" style="width:20%">class bg-success</div>
</div><br>
<div class="progress-bar bg-info progress-bar-striped progress-bar-
animated" style="width:30%">class bg-info</div>
</div><br>
<div class="progress-bar bg-warning progress-bar-striped progress-bar-
animated" style="width:40%">class bg-warning</div>
</div><br>
<div class="progress-bar bg-danger progress-bar-striped progress-bar-
animated" style="width:50%">class bg-danger</div>
</div><br>
</div>
</body>
</html>
Semisal kita simpan dengan nama animasi_progress_bar.html, lalu kita buka di browser maka
Keterangan :
 terdapat animasi dalam progress bar, karena kita menambahkan class
progress_bar_animated
Multiple progress bar
dalam bagian kita akan belajar untuk membuat multiple progress bar, untuk memasukkan
beberapa value sekaligus kedalam 1 progress bar, baik langsung saja kita perhatikan contoh
skripnya :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Multiple Progress Bar</h2>
<div class="progress-bar bg-success" style="width:30%">
Bagian 1
</div>
<div class="progress-bar bg-warning" style="width:10%">
Bagian 2
</div>
<div class="progress-bar bg-danger" style="width:20%">
Bagian 3
</div>
</div>
</div>
</body>
</html>
Semisal kita simpan dengan nama multiple_progress_bar.html, lalu kita buka di browser maka
Keterangan :
 Progress bar akan dibagi beberapa bagian, dalam contoh ini ada 3 bagian
 untuk membuat multiple progress bar, anda hanya tinggal menuliskan beberapa tag <div>
dengan class progress-bar, dan memberikan ukuran width pada attribute style
 bagian 1 ditampilkan dengan ukuran 30%
Membuat Pagination dan Breadcrumb dengan Bootstrap
Pagination adalah fitur paging yang biasanya kita temui dalam sebuah tabel yang
menampilkan data, dimana datanya akan dibagi menjadi beberapa halaman, nah tugas paging
ini untuk membagi data tersebut kedalam beberapa halaman, bootstrap sudah menyiapkan
beberapa class yang bisa anda gunakan untuk membuat fitur paging.
Breadcrumb adalah fitur yang terdapat dalam halaman web yang digunakan untuk
mempermudah atau membantu pengguna web untuk memahami isi konten web serta sebagai
penunjuk hirarki situs web tersebut.
Baik kita akan bahas satu persatu untuk fitur bootstrap 4 yang bisa anda gunakan untuk
membuat fitur pagination dan breadcrumb.
Cara membuat pagination dengan bootstrap

Untuk membuat fitur pagination dengan bootstrap anda perlu menuliskan beberapa class
antara lain :
 tambahkan class .pagination pada tag <ul>
 pada tag <li> yang berada dalam tag <ul> anda tambahkan class .page-item
 pada tag <a> yang berada dalam tag <li> anda tambahkan class .page-link
Contoh penggunaan class bootstrap untuk pagination adalah seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Basic Pagination</h2>
<hr/>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
</body>
</html>
Hasilnya adalah seperti berikut :
Menggunakan Class active untuk menambahkan fitur hightlight pada paging

Class .active digunakan untuk digunakan untuk memberikan hightlight (tanda) pada bagian
page yang sedang terbuka, contoh penggunaannya adalah seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Penggunaan Class .active Pagination</h2>
<hr/>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
</ul>
</div>
</body>
</html>
Hasilnya adalah :
Keterangan :
 pada page ke 2, terdapat hightlight berwarna biru, hal tersebut karena kita menambahkan
class .active pada tag <li>
Menggunakan Class disabled untuk menghilangkan fungsi click pada paging
Selain class .active, anda juga bisa menambahkan class .disabled, yang digunakan untuk
menghilangkan (disabled) fungsi click pada fitur paging, untuk contoh penggunaannya adalah
sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Penggunaan Class .disabled Pagination</h2>
<hr/>
<li class="page-item disabled"><a class="page-
link" href="#">Previous</a></li>
</ul>
</div>
</body>
</html>
Hasilnya adalah :
Keterangan :
 untuk page item dengan tulisan “Previous” tidak bisa di klik, karena kita menggunakan class
.disabled dalam class <li>
Mengatur ukuran pagination
Bootstrap juga menyediakan class yang bisa digunakan untuk mengatur ukuran dari pagination
yang dibuat, terdapat 2 class yang bisa anda gunakan antara lain :
 class .pagination-lg untuk ukuran paging lebih besar
 class .pagination-sm untuk ukuran paging yang lebih kecil
 jika anda tidak menambahkan kedua class tersebut maka paging akan ditampilkan dengan
ukuran normal
Untuk contohnya adalah sebagai berikut :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Pagination dengan ukuran besar</h2>
<hr/>
<ul class="pagination pagination-lg">
</ul>
<h3>Pagination dengan ukuran normal</h3>
<hr/>
<ul class="pagination pagination">
</ul>
<h4>Pagination dengan ukuran kecil</h4>
<hr/>
<ul class="pagination pagination-sm">
</ul>
</div>
</body>
</html>
Hasilnya adalah sebagai berikut :
Keterangan :
 Paging ke – 1 ukurannya lebih besar karena kita menambahkan class pagination-lg
 Paging ke – 2 ukurannya normal karena kita hanya menggunakan class pagination
 Paging ke -3 ukurannya lebih kecil karena kita menambahkan class pagination-sm
Membuat Breadcrumb dengan bootstrap

Untuk membuat breadcrumb kita masih sama menggunakan tag <ul> dan <li>, kita hanya akan
menambahkan beberapa class yang digunakan untuk membuat breadcrumb dengan
bootstrap, classnya antara lain :
 Tambahkan class .breadcrumb dalam tag <ul>
 berikutnya didalam tag <ul> silahkan tambahkan tag <li> untuk menuliskan hirarki dari
breadcumb lalu tambahkan class .breadcrumb-item
Contoh Penggunaan dari class breadcrumb adalah :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Contoh Penggunaan Breadcrumbs</h2>
<hr/>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Gallery</a></li>
<li class="breadcrumb-item"><a href="#">Jawa Timur</a></li>
<li class="breadcrumb-item active">Surabaya</li>
</ul>
</div>
</body>
</html>
Hasilnya adalah :
Keterangan :
 Breadcrumb akan ditampilkan, karena kita menambahkan class .breadcrumb pada bagian
tag <ul> dan class .breadcrumb-item pada class <li>

Pertemuan 11

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

Pertemuan 11

Diunggah oleh

Hak Cipta:

Format Tersedia

Membuat Jumbotron dengan bootstrap

Membuat Full-width Jumbotron

<div class="jumbotron jumbotron-fluid">

Membuat Pesan Alert dengan Bootstrap

Cara membuat alert di bootstrap 4

(jenis alert ini biasanya digunakan untuk menampilkan pesan

untuk contoh penggunaan dari alert, perhatikan skrip dibawah ini :

Menambahkan Link pada alert

Membuat Tombol Close pada Alert

Menambahkan Animasi pada close alert

Membuat Badges dengan Bootstrap

Membuat Pill Badges dengan bootstrap

Badge didalam Element Lain

Membuat Progress Bar dengan Bootstrap

Mengatur ukuran tinggi dari progress bar

Menambahkan label pada bagian progress bar

Memberikan warna pada progress bar

Contoh penggunaan skripnya adalah sebagai berikut :

<div class="progress border">

<div class="progress border">

Striped Progress Bar

Membuat animasi progress bar

Cara membuat pagination dengan bootstrap

Menggunakan Class active untuk menambahkan fitur hightlight pada paging

Untuk contohnya adalah sebagai berikut :

Membuat Breadcrumb dengan bootstrap

Contoh Penggunaan dari class breadcrumb adalah :

Anda mungkin juga menyukai