Tutorial Bootstrap – bisasoftware.id https://www.bisasoftware.id/2026 bisasoftware.id melayani dengan sepenuh hati Mon, 06 Jul 2026 08:17:20 +0000 id hourly 1 https://wordpress.org/?v=7.0.3 https://www.bisasoftware.id/2026/wp-content/uploads/2025/12/cropped-cropped-logo_bs-copy-32x32.png Tutorial Bootstrap – bisasoftware.id https://www.bisasoftware.id/2026 32 32 BAB 25 – MEMBANGUN WEBSITE DENGAN BOOTSTRAP https://www.bisasoftware.id/2026/bab-25-membangun-website-dengan-bootstrap/ https://www.bisasoftware.id/2026/bab-25-membangun-website-dengan-bootstrap/#respond Mon, 06 Jul 2026 08:17:20 +0000 https://www.bisasoftware.id/2026/?p=662 Tujuan Praktik

Pada latihan ini Anda akan membangun sebuah website Company Profile sederhana namun profesional dengan memanfaatkan hampir seluruh komponen Bootstrap 5 yang telah dipelajari pada Bagian 1 sampai Bagian 4.

Komponen Bootstrap yang akan digunakan:

  • Navbar
  • Container
  • Grid System
  • Typography
  • Button
  • Card
  • Badge
  • Alert
  • Progress Bar
  • Carousel
  • Accordion
  • Modal
  • Form
  • Utilities
  • Footer

Website yang akan dibuat memiliki tampilan seperti berikut.

+-----------------------------------------------------------+
| Navbar                                                    |
+-----------------------------------------------------------+
| Hero Section                                              |
+-----------------------------------------------------------+
| Tentang Kami                                              |
+-----------------------------------------------------------+
| Layanan (3 Card)                                          |
+-----------------------------------------------------------+
| Statistik (Progress Bar)                                  |
+-----------------------------------------------------------+
| Portofolio                                                |
+-----------------------------------------------------------+
| FAQ                                                       |
+-----------------------------------------------------------+
| Hubungi Kami                                              |
+-----------------------------------------------------------+
| Footer                                                    |
+-----------------------------------------------------------+

Langkah 1

Membuat Struktur Folder

Buat struktur folder berikut.

company-profile
│
├── index.html
│
├── assets
│   ├── css
│   ├── js
│   └── img

Langkah 2

Membuat File index.html

Salin kode berikut.

<!DOCTYPE html>
<html lang="id">

<head>

<meta charset="UTF-8">

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

<title>Company Profile</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<!-- Navbar -->

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<div class="container">

<a class="navbar-brand" href="#">
Bisa Software
</a>

<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#menu">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse"
id="menu">

<ul class="navbar-nav ms-auto">

<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>

</ul>

</div>

</div>

</nav>

<!-- Hero -->

<section class="bg-light py-5">

<div class="container">

<div class="row align-items-center">

<div class="col-lg-6">

<h1 class="display-4 fw-bold">

Bangun Website Profesional Bersama Kami

</h1>

<p class="lead">

Solusi Website, Sistem Informasi dan Aplikasi Berbasis Web.

</p>

<button class="btn btn-primary">

Hubungi Kami

</button>

<button class="btn btn-outline-primary">

Pelajari

</button>

</div>

<div class="col-lg-6">

<img src="assets/img/hero.png"
class="img-fluid">

</div>

</div>

</div>

</section>

<!-- About -->

<section class="py-5">

<div class="container">

<h2 class="text-center mb-4">

Tentang Kami

</h2>

<p class="text-center">

Kami merupakan perusahaan yang bergerak di bidang pengembangan website, sistem informasi dan aplikasi berbasis web menggunakan teknologi modern.

</p>

</div>

</section>

<!-- Services -->

<section class="bg-light py-5">

<div class="container">

<h2 class="text-center mb-5">

Layanan

</h2>

<div class="row">

<div class="col-md-4">

<div class="card shadow">

<div class="card-body text-center">

<h4>Website</h4>

<p>Pembuatan Website Profesional.</p>

<button class="btn btn-primary">

Detail

</button>

</div>

</div>

</div>

<div class="col-md-4">

<div class="card shadow">

<div class="card-body text-center">

<h4>Sistem Informasi</h4>

<p>Pengembangan Sistem Informasi.</p>

<button class="btn btn-success">

Detail

</button>

</div>

</div>

</div>

<div class="col-md-4">

<div class="card shadow">

<div class="card-body text-center">

<h4>Aplikasi Kasir</h4>

<p>Software Kasir UMKM.</p>

<button class="btn btn-danger">

Detail

</button>

</div>

</div>

</div>

</div>

</div>

</section>

<!-- Statistik -->

<section class="py-5">

<div class="container">

<h2 class="text-center mb-5">

Kemampuan Tim

</h2>

<p>HTML</p>

<div class="progress mb-3">

<div class="progress-bar bg-primary"
style="width:95%">

95%

</div>

</div>

<p>Bootstrap</p>

<div class="progress mb-3">

<div class="progress-bar bg-success"
style="width:90%">

90%

</div>

</div>

<p>Laravel</p>

<div class="progress">

<div class="progress-bar bg-danger"
style="width:85%">

85%

</div>

</div>

</div>

</section>

<!-- FAQ -->

<section class="bg-light py-5">

<div class="container">

<h2 class="text-center mb-5">

FAQ

</h2>

<div class="accordion">

<div class="accordion-item">

<h2 class="accordion-header">

<button
class="accordion-button"
data-bs-toggle="collapse"
data-bs-target="#faq1">

Apa layanan utama perusahaan?

</button>

</h2>

<div id="faq1"
class="accordion-collapse collapse show">

<div class="accordion-body">

Kami melayani pembuatan website, sistem informasi dan aplikasi kasir.

</div>

</div>

</div>

</div>

</div>

</section>

<!-- Contact -->

<section class="py-5">

<div class="container">

<h2 class="text-center mb-4">

Hubungi Kami

</h2>

<div class="row justify-content-center">

<div class="col-md-8">

<input
type="text"
class="form-control mb-3"
placeholder="Nama">

<input
type="email"
class="form-control mb-3"
placeholder="Email">

<textarea
class="form-control mb-3"
rows="5"
placeholder="Pesan"></textarea>

<button class="btn btn-primary">

Kirim Pesan

</button>

</div>

</div>

</div>

</section>

<!-- Footer -->

<footer class="bg-dark text-white text-center p-4">

Copyright © 2026
Bisa Software Indonesia

</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

Hasil Praktik

Apabila seluruh langkah dilakukan dengan benar, maka website akan memiliki komponen berikut.

  • ✔ Navbar responsif
  • ✔ Hero Section
  • ✔ About Section
  • ✔ Services menggunakan Card Bootstrap
  • ✔ Progress Bar
  • ✔ Accordion FAQ
  • ✔ Contact Form
  • ✔ Footer
  • ✔ Responsive pada perangkat mobile maupun desktop

TUGAS PRAKTIK

Membangun Website Company Profile Profesional

Kembangkan hasil latihan sebelumnya menjadi website yang lebih lengkap dengan ketentuan berikut.

A. Header

  • Tambahkan logo perusahaan.
  • Tambahkan menu Home, About, Services, Portfolio, Team, FAQ, dan Contact.

B. Hero Section

  • Tambahkan gambar ilustrasi.
  • Tambahkan dua tombol Call To Action (CTA).
  • Gunakan Typography Bootstrap (display-4 dan lead).

C. About

  • Tambahkan visi dan misi perusahaan.
  • Buat layout dua kolom menggunakan Grid System.

D. Services

  • Tampilkan 6 layanan menggunakan Card Bootstrap.
  • Setiap Card harus memiliki ikon, judul, deskripsi, dan tombol Selengkapnya.

E. Portfolio

  • Tampilkan minimal 6 proyek dalam bentuk Card.
  • Gunakan gambar responsif (img-fluid) dan efek bayangan (shadow).

F. Tim

  • Tampilkan minimal 4 anggota tim.
  • Setiap anggota memiliki foto berbentuk lingkaran (rounded-circle), nama, jabatan, dan tombol media sosial.

G. FAQ

  • Buat minimal 5 pertanyaan menggunakan Accordion Bootstrap.

H. Hubungi Kami

  • Tambahkan form yang terdiri dari:
    • Nama
    • Email
    • Nomor Telepon
    • Subjek
    • Pesan

I. Footer

  • Tambahkan informasi perusahaan, tautan cepat, media sosial, dan hak cipta.

Kriteria Penilaian

AspekBobot
Struktur HTML yang rapi15%
Penggunaan komponen Bootstrap25%
Layout responsif20%
Kerapian tampilan (UI)15%
Kreativitas desain15%
Kelengkapan fitur10%

]]> https://www.bisasoftware.id/2026/bab-25-membangun-website-dengan-bootstrap/feed/ 0 BAB 24 – CAROUSEL PROFESIONAL https://www.bisasoftware.id/2026/bab-24-carousel-profesional/ https://www.bisasoftware.id/2026/bab-24-carousel-profesional/#respond Mon, 06 Jul 2026 06:17:18 +0000 https://www.bisasoftware.id/2026/?p=660 Tujuan

Membuat slider modern.

Struktur Dasar

<div id="slider"
class="carousel slide"
data-bs-ride="carousel">

<div class="carousel-inner">

<div class="carousel-item active">

<img src="1.jpg"
class="d-block w-100">

</div>

</div>

</div>

Praktik 1

Buat slider:

  • Foto Sekolah
  • Laboratorium
  • Perpustakaan

Praktik 2

Tambahkan:

  • Caption
  • Tombol Navigasi
  • Auto Slide
]]> https://www.bisasoftware.id/2026/bab-24-carousel-profesional/feed/ 0 BAB 23 – TABS DAN PILLS NAVIGATION https://www.bisasoftware.id/2026/bab-23-tabs-dan-pills-navigation/ https://www.bisasoftware.id/2026/bab-23-tabs-dan-pills-navigation/#respond Mon, 06 Jul 2026 06:15:39 +0000 https://www.bisasoftware.id/2026/?p=658 A. Tabs

Digunakan untuk berpindah konten.

<ul class="nav nav-tabs">

<li class="nav-item">

<a class="nav-link active">

Profil

</a>

</li>

</ul>

Praktik 1

Buat tab:

  • Profil
  • Pendidikan
  • Pengalaman

B. Pills

<ul class="nav nav-pills">

<li class="nav-item">

<a class="nav-link active">

Beranda

</a>

</li>

</ul>

Praktik 2

Buat menu dashboard menggunakan Pills.

]]> https://www.bisasoftware.id/2026/bab-23-tabs-dan-pills-navigation/feed/ 0 BAB 22 – BREADCRUMB https://www.bisasoftware.id/2026/bab-22-breadcrumb/ https://www.bisasoftware.id/2026/bab-22-breadcrumb/#respond Mon, 06 Jul 2026 06:14:31 +0000 https://www.bisasoftware.id/2026/?p=656 Apa Itu Breadcrumb?

Breadcrumb menunjukkan posisi halaman.

Contoh:

Beranda > Akademik > Data Siswa

Struktur

<nav>

<ol class="breadcrumb">

<li class="breadcrumb-item">

<a href="#">

Beranda

</a>

</li>

<li class="breadcrumb-item active">

Data Siswa

</li>

</ol>

</nav>

Praktik

Buat breadcrumb:

Dashboard > Akademik > Nilai Siswa

]]> https://www.bisasoftware.id/2026/bab-22-breadcrumb/feed/ 0 BAB 21 – DROPDOWN DAN MENU BERTINGKAT https://www.bisasoftware.id/2026/bab-21-dropdown-dan-menu-bertingkat/ https://www.bisasoftware.id/2026/bab-21-dropdown-dan-menu-bertingkat/#respond Mon, 06 Jul 2026 06:13:29 +0000 https://www.bisasoftware.id/2026/?p=654 A. Dropdown Dasar 
<div class="dropdown">

<button class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown">

Menu

</button>

<ul class="dropdown-menu">

<li>
<a class="dropdown-item"
href="#">

Profil

</a>
</li>

</ul>

</div>

Praktik 1

Buat menu:

Master Data
 ├ Data Siswa
 ├ Data Guru
 └ Data Kelas

B. Dropdown Dalam Navbar

Implementasikan dropdown untuk:

  • Akademik
  • Keuangan
  • Administrasi

Praktik 2

Buat navbar sistem sekolah dengan dropdown.

Latihan Bab 22

  1. Apa fungsi Dropdown?
  2. Apa fungsi dropdown-menu?
  3. Apa fungsi dropdown-item?
  4. Apa fungsi dropdown-toggle?
  5. Kapan digunakan?
]]> https://www.bisasoftware.id/2026/bab-21-dropdown-dan-menu-bertingkat/feed/ 0 BAB 20 – PROGRESS BAR https://www.bisasoftware.id/2026/bab-20-progress-bar/ https://www.bisasoftware.id/2026/bab-20-progress-bar/#respond Thu, 25 Jun 2026 08:06:30 +0000 https://www.bisasoftware.id/2026/?p=651 Tujuan Pembelajaran

Peserta mampu:

  1. Membuat progress monitoring.
  2. Membuat indikator proses.
  3. Membuat dashboard statistik.

A. Struktur Dasar

<div class="progress">

<div class="progress-bar"
style="width:50%">

50%

</div>

</div>

Praktik 1

Buat:

Upload File
70%

B. Progress Warna

<div class="progress">

<div class="progress-bar bg-success"
style="width:80%">

80%

</div>

</div>

Praktik 2

Dashboard:

  • Kehadiran 95%
  • Nilai 85%
  • Kelulusan 98%

C. Animated Progress

<div class="progress">

<div class="progress-bar
progress-bar-striped
progress-bar-animated"
style="width:75%">

75%

</div>

</div>

Latihan Bab 20

  1. Apa fungsi Progress Bar?
  2. Apa fungsi width?
  3. Apa fungsi progress-bar-striped?
  4. Apa fungsi progress-bar-animated?
  5. Kapan digunakan?

]]> https://www.bisasoftware.id/2026/bab-20-progress-bar/feed/ 0 BAB 19 – SPINNER DAN LOADING SCREEN https://www.bisasoftware.id/2026/bab-19-spinner-dan-loading-screen/ https://www.bisasoftware.id/2026/bab-19-spinner-dan-loading-screen/#respond Thu, 25 Jun 2026 08:05:17 +0000 https://www.bisasoftware.id/2026/?p=649 Tujuan Pembelajaran

Peserta mampu:

  1. Membuat animasi loading.
  2. Memberikan feedback kepada pengguna.
  3. Membuat tampilan profesional.

A. Mengapa Loading Penting?

Ketika sistem sedang:

  • Menyimpan data
  • Menghapus data
  • Mengambil data database

pengguna perlu mengetahui bahwa proses sedang berjalan.

B. Spinner Dasar

<div class="spinner-border">

</div>

Praktik 1

<div class="spinner-border text-primary">

</div>

C. Growing Spinner

<div class="spinner-grow text-success">

</div>

Praktik 2

Buat halaman:

Memuat Data Siswa...

disertai spinner.

D. Full Screen Loading

<div class="vh-100
d-flex
justify-content-center
align-items-center">

<div class="spinner-border">

</div>

</div>

Latihan Bab 20

  1. Apa fungsi Spinner?
  2. Apa fungsi spinner-border?
  3. Apa fungsi spinner-grow?
  4. Mengapa loading diperlukan?
  5. Apa fungsi vh-100?

]]> https://www.bisasoftware.id/2026/bab-19-spinner-dan-loading-screen/feed/ 0 BAB 18 – TOAST NOTIFICATION https://www.bisasoftware.id/2026/bab-18-toast-notification/ https://www.bisasoftware.id/2026/bab-18-toast-notification/#respond Thu, 25 Jun 2026 08:03:52 +0000 https://www.bisasoftware.id/2026/?p=647 Tujuan Pembelajaran

Peserta mampu:

  1. Membuat notifikasi modern.
  2. Membuat notifikasi sukses.
  3. Membuat notifikasi gagal.
  4. Menggunakan JavaScript Bootstrap.

A. Apa Itu Toast?

Toast adalah notifikasi kecil yang muncul sementara.

Contoh:

✓ Data berhasil disimpan

atau

⚠ Password salah

B. Struktur Toast

<div class="toast show">

<div class="toast-header">

<strong>Informasi</strong>

</div>

<div class="toast-body">

Data berhasil disimpan

</div>

</div>

Praktik 1

Notifikasi Simpan Data

<div class="toast show">

<div class="toast-header">

<strong class="me-auto">
Sukses
</strong>

</div>

<div class="toast-body">

Data siswa berhasil disimpan

</div>

</div>

Praktik 2

Notifikasi Login

Buat toast:

  • Login berhasil
  • Login gagal
  • Session berakhir

Latihan Bab

  1. Apa fungsi Toast?
  2. Apa perbedaan Toast dan Alert?
  3. Apa fungsi toast-header?
  4. Apa fungsi toast-body?
  5. Kapan Toast digunakan?

]]> https://www.bisasoftware.id/2026/bab-18-toast-notification/feed/ 0 BAB 17 – OFFCANVAS NAVIGATION https://www.bisasoftware.id/2026/bab-17-offcanvas-navigation/ https://www.bisasoftware.id/2026/bab-17-offcanvas-navigation/#respond Thu, 25 Jun 2026 08:01:53 +0000 https://www.bisasoftware.id/2026/?p=645 Tujuan Pembelajaran

Peserta mampu:

  1. Memahami konsep Offcanvas.
  2. Membuat sidebar mobile.
  3. Membuat dashboard responsif.
  4. Mengoptimalkan tampilan smartphone.

A. Apa Itu Offcanvas?

Offcanvas adalah panel yang muncul dari samping layar.

Contoh penggunaan:

  • Menu aplikasi mobile
  • Sidebar dashboard
  • Filter produk e-commerce
  • Menu admin

Ilustrasi:

+----------------------+
| ☰ Dashboard          |
+----------------------+

Klik ☰

+---------+
| Menu    |
| Dashboard
| Produk
| User
| Logout
+---------+

B. Struktur Dasar Offcanvas

<button class="btn btn-primary"
data-bs-toggle="offcanvas"
data-bs-target="#menu">

Menu
</button>

<div class="offcanvas offcanvas-start"
id="menu">

<div class="offcanvas-header">

<h5>Dashboard</h5>

<button class="btn-close"
data-bs-dismiss="offcanvas">
</button>

</div>

<div class="offcanvas-body">

<a href="#">Beranda</a>

</div>

</div>

Penjelasan

ClassFungsi
offcanvasMengaktifkan panel
offcanvas-startMuncul dari kiri
offcanvas-endMuncul dari kanan
offcanvas-topMuncul dari atas
offcanvas-bottomMuncul dari bawah

Praktik 1

Sidebar Mobile Sistem Sekolah

Buat menu:

  • Dashboard
  • Data Siswa
  • Data Guru
  • Jurusan
  • Logout

menggunakan Offcanvas.

Praktik 2

Dashboard Mobile Friendly

Tambahkan:

  • Logo sekolah
  • Nama aplikasi
  • Tombol menu hamburger

Latihan Bab

  1. Apa fungsi Offcanvas?
  2. Apa perbedaan Navbar dan Offcanvas?
  3. Kapan Offcanvas digunakan?
  4. Apa fungsi offcanvas-start?
  5. Apa fungsi btn-close?

]]> https://www.bisasoftware.id/2026/bab-17-offcanvas-navigation/feed/ 0 BAB 16 – PAGINATION https://www.bisasoftware.id/2026/bab-16-pagination/ https://www.bisasoftware.id/2026/bab-16-pagination/#respond Thu, 25 Jun 2026 07:56:31 +0000 https://www.bisasoftware.id/2026/?p=643 A. Apa Itu Pagination?

Pagination digunakan untuk membagi data menjadi beberapa halaman.

Contoh:

<< 1 2 3 4 5 >>

Praktik 1

<nav>

<ul class="pagination">

<li class="page-item">

<a class="page-link"
href="#">

1

</a>

</li>

<li class="page-item">

<a class="page-link"
href="#">

2

</a>

</li>

<li class="page-item">

<a class="page-link"
href="#">

3

</a>

</li>

</ul>

</nav>

Praktik 2

Buat Pagination:

Previous
1
2
3
4
5
Next

Latihan Bab

  1. Apa fungsi Pagination?
  2. Apa fungsi page-item?
  3. Apa fungsi page-link?
  4. Kapan Pagination digunakan?
  5. Apa keuntungan Pagination?

PROYEK

MEMBANGUN SISTEM INFORMASI SEKOLAH (FRONTEND)

Studi Kasus

Buat halaman Sistem Informasi Sekolah yang terdiri dari:

1. Navbar

Menu:

  • Beranda
  • Data Siswa
  • Data Guru
  • Jurusan
  • Logout

2. Banner

Gunakan:

  • Display Heading
  • Button

3. Form Input Data Siswa

Field:

  • NIS
  • Nama
  • Kelas
  • Jurusan

4. Tabel Data Siswa

Kolom:

  • No
  • NIS
  • Nama
  • Jurusan
  • Aksi

5. Modal Tambah Data

Popup untuk menambah siswa.

6. FAQ Sekolah

Menggunakan Accordion.

7. Pagination

Minimal 5 halaman.

TUGAS PORTOFOLIO

Buat salah satu proyek berikut:

Pilihan A

Website PPDB Online

Pilihan B

Website Profil Sekolah

Pilihan C

Dashboard Kasir UMKM

Pilihan D

Sistem Informasi Perpustakaan

]]> https://www.bisasoftware.id/2026/bab-16-pagination/feed/ 0