Pertemuan 8 BDL

Cara Menggunakan Bootstrap 4 Untuk Membuat Website

Bootstrap, framework paling populer di dunia. Fungsi Bootstrap untuk mengembangkan website
dengan desain yang responsive dan mobile-first. Hampir setiap website yang tersebar di internet
menggunakan Bootstrap sebagai komponennya. Ini membuktikan bahwa Bootstrap dipercaya
dan diterima oleh banyak pengembang. Ini adalah salah satu alasan mengapa Anda harus belajar
Bootstrap.

Anda pasti tau Twitter –sosial media buatan Jack Dorsey yang sangat terkenal.  Twitter
menyuguhkan tampilan sederhana bernuansa modern, dan tetap nyaman dilihat. Sosial media ini
menjadi awal perkembangan Bootstrap, sebelum tersebar di seluruh dunia.

Tema yang ada di WordPress, Joomla, dan CMS lain kebanyakan menggunakan Bootstrap
sebagai framework untuk mengatur tampilannya. Tentunya ini akan membuat tema menjadi lebih
menarik dan indah.

Anda pun bisa membuat website yang menarik seperti Twitter dan puluhan situs terkenal
lainnya. Artikel ini akan membahas cara menggunakan Bootstrap 4 dengan mudah. Harapannya
Anda bisa memulai mengembangkan website yang tak kalah menarik menggunakan Bootstrap.

Apa itu Bootstrap?

Bootstrap adalah framework CSS yang dikhususkan untuk pengembangan front-end website.
Framework ini mempunyai nama asli Twitter Blueprint. Ada kata ‘Twitter’ karena pada awalnya
dikembangkan untuk sosial media Twitter yang sangat terkenal saat ini dengan pengguna hampir
326 juta orang. Sebelum Bootstrap muncul, sudah ada framework lain yang tersedia. Hanya saja
tingkat konsistensi dalam proses pengembangan buruk. Selain itu juga butuh biaya perawatan
mahal.

Berdasarkan permasalahan ini, akhirnya para pengembang menemukan Bootstrap. Berbeda

dengan framework sebelumnya, Bootstrap dikenal konsisten dan lebih sederhana.

Bootstrap adalah salah saatu frameework yang memungkinkan developer dapat mengembangkan
website dengan mudah dan cepat. Developer hanya perlu memanggil class tertentu untuk
membuat tombol, panel, tabel, pesan peringatan, dan lain sebagainya.

Di bawah ini adalah screenshot dari repositori Bootstrap di GitHub.

Bootstrap terdiri dari beberapa file. File pada Bootstrap berisi kumpulan baris kode tersusun dari
CSS dan JavaScript yang berbentuk class. Jadi ketika Anda menggunakan Bootstrap untuk
mengembangkan website, membuat satu tombol tidak perlu menyusun beberapa baris kode
karena tinggal memanggil salah satu class saja.

Perbedaan Bootstrap 3 & Bootstrap 4

Bootstrap sampai dengan saat ini masih memperbarui sistemnya. Tidak hanya berhenti di angka
3, tapi sudah masuk ke versi 4.

Pada versi 4 ini ada beberapa pembaharuan lebih banyak berhubungan dengan tema. Contohnya
saja perubahan tampilan styling, warna, fonts, dan lain sebagainya.

Perubahan yang terjadi antara lain:

1. Global

Bootstrap menyediakan ukuran font global (default). Bootstrap 3 menggunakan ukuran font
14px, sedangkan pada Bootstrap 4 diganti dengan ukuran yang lebih besar, yaitu 16px.

Jadi, ketika menggunakan Bootstrap 3 dan diperbarui menjadi 4, tulisan akan terlihat lebih besar
dibandingkan dengan sebelumnya. Jadi ketika beralih dari Bootstrap 3 ke 4, Anda perlu
menyesuaikannya lagi ukuran pixel menjadi lebih kecil supaya sesuai dengan ukuran
sebelumnya.
Selain itu, font bawaan pun diganti. Bootstrap 4 menggunakan font fallback Helvetica Neue,
Arial, dan Sans-Serif menggantikan Bootstrap 3 yang sebelumnya menggunakan font Helvetica
Neue, Sans-Serif, Helvetica, dan Arial.

2. Grid

Bootstrap 4 tidak memerlukan lagi col- pada setiap class grid. Ini berbeda dengan Bootstrap 3
yang sebelumnya menggunakan col- di depan, misalnya ketika menggunakan class “col-md-
offset-3” untuk membatasi kolom.

Bootstrap 4 menambah satu sistem grid menjadi 5, yaitu col-sm, col-md, col-lg, col-xl, dan col-*.
berbeda dengan Bootstrap 3 yang hanya menggunakan 4 sistem grid.

Bootstrap 4 menghilangkan col-xs dan diwakilkan oleh col-sm untuk perangkat super kecil
(extra small) atau menggunakan col-* untuk mendefinisikan “semua perangkat” tanpa harus
menentukannya.

Jadi kesimpulannya, penggunaan baris kode Bootstrap 4 lebih ringkas dibandingkan dengan
Bootstrap 3.

3. Tabel

Bootstrap 4 mendukung gaya untuk header atau judul tabel –yang sebelumnya di Bootstrap 3
tidak didukung. Selain mendukung gaya header, Bootstrap 4 juga dapat memberikan warna tabel
header menjadi gelap (.thead-dark) atau terang (.thead-light).

Di Bootstrap 4 untuk membuat table responsive langsung di dalam tag <table>. Berbeda dengan
Bootstrap 3 yang perlu menambahkan class .table-responsive di dalam tag <div>. Selain itu, di
Bootstrap 4 bisa menentukan warna tabel menjadi gelap dengan menggunakan .table-dark.

Cara Install Bootstrap 4

1. Cara Install Bootstrap Offline

Proses instalasi Bootstrap secara offline ini ini memudahkan Anda dalam proses pengembangan.
Website tidak perlu mengambil file (resource) dari website lain, tapi langsung dari penyimpanan
utama.

Langkah 1: Buat Direktori Baru Kemudian Download Bootstrap

Tambahkan folder baru ke dalam folder root web server Anda. Jika menggunakan Windows,
buat folder di htdocs.
Kemudian download Bootstrap dari website resminya.

Setelah proses download selesai, Anda akan mendapatkan file zip dengan beberapa folder di
dalamnya.

Di dalam folder ini terdapat beberapa file yang terkumpul ke dalam beberapa assets dan
menyediakan beberapa fungsi dan class di dalamnya. File zip ini nantinya perlu Anda ekstrak
terlebih dahulu ke dalam folder project supaya dapat digunakan.

Langkah 2: Ekstrak File Bootstrap

Setelah Anda memindahkan file zip tadi ke dalam folder project, ekstrak file tersebut di
dalamnya. Anda akan melihat susunan direktori seperti di bawah ini:

bootstrap/└── dist/    ├── css/    │ ├── bootstrap-grid.css    │ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css    │ ├── bootstrap-grid.min.css.map    │ ├── bootstrap-
reboot.css    │ ├── bootstrap-reboot.css.map    │ ├── bootstrap-reboot.min.css    │ ├──
bootstrap-reboot.min.css.map    │ ├── bootstrap.css    │ ├── bootstrap.css.map    │ ├──
bootstrap.min.css    │ └── bootstrap.min.css.map    └── js/        ├── bootstrap.bundle.js
├── bootstrap.bundle.js.map        ├── bootstrap.bundle.min.js        ├──
bootstrap.bundle.min.js.map        ├── bootstrap.js        ├── bootstrap.js.map        ├──
bootstrap.min.js        └── bootstrap.min.js.map

Langkah 3: Buat Sebuah File Index.html

Supaya Anda bisa menggunakan Bootstrap dan membuat halaman website, buka teks editor dan
buat file index.html. Di dalam file index.html  isikan beberapa baris kode, tapi jangan lupa
untuk memanggil file Bootstrap dan library lainnya.

Cara menyisipkan bootstrap pada html , contohnya ubahlah nama bootstrap-4.0.1-dist menjadi
bootstrap. Perubahan nama ini bertujuan untuk memudahkan penulisan kode penyisipan
bootstrap di HTML. Selanjutnya buatlah berkas HTML baru bernama hello_bootstrap.html
dengan isi sebagai berikut.
<!DOCTYPE html>
<html>
<head>
    <title>Hello Bootstrap</title>
   
    <!– menyisipkan bootstrap –>
    <link rel="stylesheet” href="bootstrap/css/bootstrap.min.css” />
</head>

<body>

    <h1>Hello Bootstrap!</h1>

    <p>Selamat datang di tutorial framework bootstrap</p>

</body>
</html>

Baris kode di atas memanggil file bootstrap.min.css yang berada di folder css melalui baris:

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

Sampai di sini Anda sudah dapat menggunakan Bootstrap untuk mengembangkan website.

Contoh penggunaan bootstrap

Cara membuat menu navigasi

Untuk membuat menu navigasi anda bisa menggunakan tag <nav> lalu menambahkan class
.navbar didalam tag tersebut, selain itu anda juga bisa menambahkan class expand-xl, expand-
lg, expand-md, expand-sm (Class ini digunakan untuk mengatur menu navigasi agar tampil
secara vertical ketika diakses dengan ukuran layar tertentu )

jadi semisal nih kita menambahkan navbar-expand-lg, sesuai aturan grid system lg itu digunakan
untuk device ukuran besar, dengan ukuran lebar 992 pixel atau lebih, maka jika kita berikan class
navbar-expand-lg pada menu navigasi, menu tersebut akan menjadi vertical ketika diakses menu
dibawah ukuran 992 pixel.
Untuk contoh pembuatan menu navigasi perhatikan skrip dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Menu Navigasi</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
 
<nav class="navbar navbar-expand-lg bg-dark">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
  <span class="navbar-text text-white">
     Text pada Navbar
  </span>
</nav>
<br>
 
<div class="container-fluid">
 
  <h3>Contoh Menu Navigasi</h3>
  <p>Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah
Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah
Content Ini adalah Content Ini adalah Content Ini adalah Content Ini adalah Content </p>
</div>
 
</body>
</html>
Cara Menggunakan Bootstrap
1. Membuat Tabel Dengan Bootstrap

Bootstrap memberikan Anda kemudahan untuk membuat tabel tanpa harus mengetikkan
berbaris-baris kode program. Anda hanya perlu memanggil class-class yang sudah ada di dalam
file Bootstrap.

Untuk menggunakan class dengan kombinasi class lainnya, gunakan class table ditambah
dengan class lain. Contoh penggunaannya seperti di bawah ini:

# untuk membuat tabel stripped

<table class=”table table-stripped”>
Atau
# untuk membuat tabel hovel<table class=”table table-hover”>
Di dalam file Bootstrap sudah terdapat beberapa class yang didesain untuk kebutuhan pembuatan
tabel, antara lain “.table”, “.table-striped”, “.table-bordered”, dan “.table-hover”.

 “.table”: class yang digunakan untuk membuat dan mendefinisikan tabel biasa/standar.
Class ini hanya menambahkan lapisan yang kecil dan pembatas secara horizontal. Class
ini menggunakan baris kode <table class=”table”>.

 “.table-stripped”: class yang digunakan untuk membuat table dengan gaya yang zebra.
Jadi warna setiap baris berselang seling. Class ini menggunakan baris kode <table
class=”table table-sripped”>.

 “.table-bordered”: merupakan class yang digunakan untuk menampilkan border di

dalam table. Jadi keseluruhan table akan dipasang sebuah border. Class ini menggunakan
baris kode <table class=”table table-bordered”>.

 “.table-hover”: dapat Anda manfaatkan untuk memberikan efek hover pada sebuah row.
Efek ini akan berjalan ketika Anda meletakkan mouse di row yang diberikan class ini.
Class ini menggunakan baris kode <table class=”table table-hover”>.

Selain kumpulan class untuk mendesain table, terdapat beberapa class pewarnaan row tabel dan
data menggunakan Bootstrap, yaitu “.success”, “.danger”, “.info”. “.warning”, dan “.active”.

Untuk menggunakan class ini, selipkan di antara tag tr, seperti ini:

…      <tr class=”info”>        <td>Info</td>        <td>Khafid</td>

<td>july@example.com</td>      </tr>…

Menggunakan kumpulan class ini, Anda dapat mendesain tabel yang menarik dan mudah dibaca
oleh pengunjung website.

Anda dapat menggunakan baris kode di bawah ini untuk mencoba menampilkan tabel dengan
Bootstrap di browser.

2. Mengatur Tampilan Gambar Dengan Bootstrap

Anda juga dapat mendesain gambar menggunakan Bootstrap. Membuat gambar yang responsive,
berbentuk round, lingkaran, dan juga thumbnail sangat mudah menggunakan framework ini.

Class “.img-responsive”, “.img-rounded”, ”img-circle”, dan ”img-thumbnail” adalah kumpulan

class yang digunakan untuk memanipulasi gambar di Bootstrap. Kembangkan desain yang
maksimal dan hadirkan gambar menarik di website Anda.

 “.img-responsive”: class ini memungkinkan Anda membuat gambar yang dapat dibuka
di berbagai macam resolusi layar. Class .img-responsive membuka ukuran gambar dapat
menyesuaikan dengan ukuran elemen inti. Anda dapat melihat efeknya ketika melakukan
resize pada browser.
<img src=”kantor-niagahoster.png” class=”img-responsive” alt=”Logo Niagahoster”>

 “.img-rounded”: ketika Anda ingin membuat gambar dengan sisi melengkung, gunakan
class ini, maka Anda akan memiliki gambar yang melengkung di bagian sisinya.

<img src=”kantor-niagahoster.png” class=”rounded” alt=”Logo Niagahoster”>

 ”.img-circle”: terkadang ingin gambar yang berbentuk lingkaran, gunakan class ini dan
gambar akan tampil dengan bentuk yang melingkar.

<img src=”kantor-niagahoster.png” class=”rounded-circle” alt=”Logo Niagahoster”>

 ”.img-thumbnail”: class ini digunakan untuk membuat gambar thumbnail dengan

Bootstrap.

<img src=”kantor-niagahoster.png” class=”img-thumbnail” alt=”Logo Niagahoster”>

3. Membuat Pesan Peringatan (Alert) Dengan Bootstrap

Bootstrap menyediakan class khusus untuk menampilkan alert dengan sangat sederhana dan
mudah. Bagaimana tidak, Anda tinggal memanggil sebuah class di Bootstrap menggunakan satu
perintah saja.

Supaya tampilan alert dapat muncul, cukup panggil class “alert” untuk mendefinisikan tampilan
alert di Bootstrap. Supaya tampilannya lebih bervariasi, tambahkan class lain.

Untuk membuat class ini caranya cukup mudah. Cukup buat tag <div> dengan isi peringatan
yang ingin dibuat. Kemudian di tag pembuka <div> buat class alert untuk mendeklarasikan alert,
berikut contohnya:

…<div class=”container”>  <h2>Alerts</h2>  <div class=”alert alert-success”>

<strong>Success!</strong> Alert box ini dapat digunakan untuk mengindikasikan aksi sukses
atau positif.  </div>  <div class=”alert alert-info”>    <strong>Info!</strong> Alrt box ini dapat
mengindikasikan informasi yang netral.  </div>  <div class=”alert alert-warning”>
<strong>Warning!</strong> Alert box ini dapat untuk mengindikasikan pesan warning dan
mungkin butuh perbaikan.  </div>  <div class=”alert alert-danger”>    <strong>Danger!</strong>
Alert box ini dapat mengindikasikan pesan penting dan kemungkinan efek buruk.
</div></div>…

Terdapat beberapa pilihan class untuk menampilkan pesan peringatan di Bootstrap, seperti
“.alert-success”, “.alert-info”, “.alert-warning”, atau “.alert-danger”. Kumpulan class ini akan
membuat tampilan alert Anda lebih bervariasi.

 .alert-success: Class alert box ini dapat digunakan untuk mengindikasikan aksi sukses
atau positif.
Anda dapat memanfaatkan class ini ketika ada input yang berhasil. Misalnya ketika pengguna
selesai mengisikan data dan mengirimkannya.

Untuk menggunakan class ini cukup masukkan kode   <div class=”alert alert-success”>.

 .alert-info: Class alert box ini dapat mengindikasikan informasi yang netral.

Class ini dapat Anda gunakan ketika ingin memberikan informasi tambahan kepada pengguna.
Misalnya memberikan informasi kegunaan tombol atau fungsi tertentu dan cara penggunaannya.

Untuk menggunakan class ini cukup masukkan kode   <div class=”alert alert-info”>.

 .alert-warning: Class alert box ini dapat untuk mengindikasikan pesan warning dan
mungkin butuh perbaikan.

Class ini dapat Anda gunakan ketika ingin memberikan informasi yang sedikit mendesak atau
penting. Misalnya ketika terjadi error pada suatu konfigurasi atau kesalahan pada saat pengisian
data.

Untuk menggunakan class ini cukup masukkan kode   <div class=”alert alert-warning”>.

 .alert-danger: Class alert box ini dapat mengindikasikan pesan penting dan
kemungkinan efek buruk.

Class ini dapat Anda gunakan ketika terjadi suatu yang sangat serius. Misalnya ketika terjadi
permasalahan pada server atau konfigurasi keamanan yang gagal. Penggunaan alert yang sesuai
akan memberikan user experience yang menarik.

Untuk menggunakan class ini cukup masukkan kode   <div class=”alert alert-danger”>.

Pengguna tidak akan kesulitan menemukan error yang terjadi sehingga problem solving pun
dapat dilakukan dengan cepat.

4. Membuat Tombol Dengan Bootstrap

Tombol adalah komponen yang umum dan sering digunakan untuk membuat website. Inilah
yang membuat Bootstrap juga menyediakan class untuk membuat tombol yang menarik. Anda
tinggal memanggil salah satu class tombol dan tombol yang indah dapat Anda tampilkan di
halaman website.

Supaya Anda bisa menggunakan tombol di dalam website, cukup panggil class “btn”. Selain itu,
Anda bisa menambahkan class lain untuk memberikan variasi tombol di dalamnya.

Terdapat banyak variasi tombol yang disediakan oleh Bootstrap, seperti “.btn”, “.btn-default”,
“.btn-primary”, “.btn-success”, “.btn-info”, “.btn-warning”, “.btn-danger”, dan “.btn-link”.
Contoh penggunaan skrip seperti di bawah ini:

<div class=”container”>  <h2>Button Styles</h2>  <button type=”button”

class=”btn”>Basic</button>  <button type=”button” class=”btn btn-default”>Default</button>
<button type=”button” class=”btn btn-primary”>Primary</button>  <button type=”button”
class=”btn btn-success”>Success</button>  <button type=”button” class=”btn btn-
info”>Info</button>  <button type=”button” class=”btn btn-warning”>Warning</button>
<button type=”button” class=”btn btn-danger”>Danger</button>  <button type=”button”
class=”btn btn-link”>Link</button>      </div>

 .btn: Class ini untuk membuat tombol standar warna abu kehitaman.
 .btn-default: Class ini untuk membuat tombol default berwarna abu.
 .btn-primary: Class ini digunakan untuk membuat tombol warna biru. Biasanya
digunakan untuk tombol login dan masuk ke dalam menu tertentu.
 .btn-success: Class ini digunakan untuk membuat tombol ketika berhasil menginputkan
sesuatu atau memproses suatu program.
 .btn-info: Class ini digunakan untuk membuat tombol warna biru muda.
 .btn-warning: Class ini digunakan untuk membuat tombol warning dengan warna
kuning.
 .btn-danger: Class ini digunakan untuk membuat tombol warning warna merah tua.
 .btn-link: Selain tombol persegi, Bootstrap juga menyediakan tombol untuk link. Anda
bisa menggunakan class ini.

5. Membuat Panel Dengan Bootstrap

Contoh terakhir penggunaan Bootstrap adalah membuat panel. Panel adalah sebuah garis yang
terbentuk dari garis dan padding.

Di Bootstrap, sebuah panel terdiri dari tiga bagian; header, body, dan footer. Header berada di
bagian atas. Body di bagian tengah atau inti. Sedangkan footer di bagian bawah.

Untuk membuat panel dengan header, body, dan footer harus dideklarasikan terlebih dahulu
menggunakan kode seperti di bawah ini.

<div class=”panel panel-default”>    <div class=”panel-heading”>Panel Heading</div>    <div

class=”panel-body”>Panel Content</div>    <div class=”panel-footer”>Panel Footer</div>
</div>

Terdapat banyak variasi panel yang dapat dibuat menggunakan Bootstrap, seperti “.panel-
default”, “.panel-primary”, “.panel-success”, “.panel-info”,  “.panel-warning”, dan “.panel-
danger”

 .panel-default: Class ini digunakan untuk membuat sebuah panel dengan warna biasa
(abu).
   <div class=”panel panel-default”>      <div class=”panel-heading”>Panel dengan class panel-
default</div>      <div class=”panel-body”>Isi Konten</div>    </div>

 .panel-primary: Class ini digunakan untuk membuat panel dengan warna biru tua.

<div class=”panel panel-primary”>      <div class=”panel-heading”>Panel dengan class panel-

primary</div>      <div class=”panel-body”>Isi Konten</div>    </div>

 .panel-success: Class ini digunakan untuk membuat panel dengan dengan warna atas
hijau.

<div class=”panel panel-success”>      <div class=”panel-heading”>Panel dengan class panel-

success</div>      <div class=”panel-body”>Isi Konten</div>    </div>

 .panel-info: Class ini digunakan untuk membuat panel dengan warna header biru muda.

<div class=”panel panel-info”>      <div class=”panel-heading”>Panel dengan class panel-info

class</div>      <div class=”panel-body”>Isi Konten</div>    </div>

 .panel-warning: Class ini digunakan untuk membuat panel dengan warna header kuning
muda.

<div class=”panel panel-info”>      <div class=”panel-heading”>Panel dengan class panel-info

class</div>      <div class=”panel-body”>Isi Konten</div>    </div>

 .panel-danger: Class ini digunakan untuk membuat panel dengan warna merah muda,

<div class=”panel panel-danger”>      <div class=”panel-heading”>Panel dengan class panel-

danger class</div>      <div class=”panel-body”>Isi Konten</div>    </div>

Lima bagian di atas adalah contoh cara menggunakan Bootstrap. Selain itu masih banyak class
lain yang dapat Anda gunakan untuk membuat Bootstrap, seperti BS Dropdowns Collapse,
Tabs/Pills, Navbar, Forms, Carousel, Modal, Tooltip, Popover, Scrollspy, dan masih banyak
yang lainnya.

Penutup
Kumpulan class yang sangat lengkap membuat Bootstrap pantas menjadi framework front end
yang paling populer saat ini. Class-class yang tersedia terbukti dapat membuat website lebih
menarik. Tidak hanya itu, Bootstrap memudahkan pengembang untuk membuat tombol, panel,
alert, dan lain sebagainya hanya dengan satu perintah saja.