Bootstrap 5 คู่มือเริ่มต้นสร้างเว็บสมัยใหม่บน Frontend (Grid, Navbar, Card)

โดย: ผู้ช่วยศาสตราจารย์ ปองพล นิลพฤกษ์

เผยแพร่เมื่อ: 22 ธันวาคม 2025

สารบัญ

Bootstrap 5 คืออะไร? ทำไมถึงน่าใช้

Bootstrap คือ CSS Framework ที่ได้รับความนิยมสูงสุดในโลก ออกแบบมาเพื่อช่วยให้นักพัฒนาสามารถสร้างเว็บไซต์ที่สวยงาม ทันสมัย และตอบสนองต่อทุกขนาดหน้าจอ (Responsive) ได้อย่างรวดเร็วและง่ายดาย Bootstrap ช่วยลดความซับซ้อนในการเขียนโค้ด CSS โดยเตรียมคลาส (Class) และคอมโพเนนต์ (Component) สำเร็จรูปไว้ให้เลือกใช้มากมาย ตั้งแต่ระบบจัดวางเลย์เอาต์ (Grid System) ไปจนถึงปุ่ม, ฟอร์ม, เมนูนำทาง (Navbar) และอื่นๆ อีกมากมาย

Bootstrap 5 คือเครื่องมือทรงพลังสำหรับการสร้างเว็บไซต์ที่ทันสมัยและตอบสนองต่อทุกอุปกรณ์ มันช่วยให้การพัฒนาเว็บง่ายขึ้นและเร็วขึ้นอย่างที่ไม่เคยเป็นมาก่อน โดยเฉพาะสำหรับผู้เริ่มต้น

การเปลี่ยนแปลงสำคัญจาก Bootstrap 4

การมาถึงของ Bootstrap 5 นำมาซึ่งการปรับปรุงที่สำคัญหลายประการ แต่การเปลี่ยนแปลงที่โดดเด่นที่สุดคือ การเลิกพึ่งพา jQuery ซึ่งเป็น JavaScript library ที่เคยเป็นหัวใจหลักใน Bootstrap เวอร์ชันก่อนหน้า การเปลี่ยนแปลงนี้ส่งผลให้เว็บไซต์ที่สร้างด้วย Bootstrap 5 มีขนาดเล็กลง โหลดเร็วขึ้น และทำงานได้มีประสิทธิภาพมากขึ้น

ที่มา: การวิเคราะห์จาก Red9 Systech

นอกจากนี้ยังมีการเพิ่มคอมโพเนนต์ใหม่ๆ เช่น Offcanvas และปรับปรุงคอมโพเนนต์เดิมให้ใช้งานง่ายและยืดหยุ่นกว่าเดิม เช่น ระบบฟอร์มที่ออกแบบใหม่ทั้งหมด และการเพิ่ม Utility API ที่ทรงพลังยิ่งขึ้น ทำให้การปรับแต่งสไตล์เป็นไปได้ง่ายดายโดยไม่ต้องเขียน CSS เอง

การเปลี่ยนแปลงนี้สะท้อนถึงแนวโน้มการพัฒนาเว็บสมัยใหม่ที่หันมาใช้ Vanilla JavaScript (JavaScript ดั้งเดิม) มากขึ้น เพื่อประสิทธิภาพที่ดีกว่า ซึ่งเป็นเหตุผลสำคัญที่นักพัฒนาควรหันมาใช้ Bootstrap 5 ในโปรเจกต์ใหม่ๆ

การติดตั้งและเตรียมความพร้อม Bootstrap 5

ก่อนที่เราจะเริ่มสร้างสรรค์ผลงานด้วย Grid, Navbar, และ Card สิ่งแรกที่ต้องทำคือการเตรียมโปรเจกต์ของเราให้พร้อมใช้งาน Bootstrap 5 วิธีที่ง่ายและรวดเร็วที่สุดคือการใช้ CDN (Content Delivery Network) ซึ่งเป็นการดึงไฟล์ CSS และ JavaScript ของ Bootstrap มาใช้งานโดยตรงจากเซิร์ฟเวอร์ภายนอก โดยไม่ต้องดาวน์โหลดไฟล์มาไว้ในเครื่อง

ในการเริ่มต้นใช้งาน Bootstrap 5 เราจำเป็นต้องเพิ่มลิงก์ CDN 2 ส่วนหลักเข้าไปในไฟล์ HTML ของเรา:

  1. CSS Link: สำหรับสไตล์ชีตทั้งหมดของ Bootstrap ซึ่งจะทำให้เราสามารถใช้คลาสต่างๆ เช่น .container, .btn, .card ได้ ลิงก์นี้ควรวางไว้ภายในแท็ก <head> ของเอกสาร
  2. JavaScript Bundle Link: สำหรับคอมโพเนนต์ที่ต้องมีการโต้ตอบกับผู้ใช้ เช่น Navbar แบบพับได้, Dropdown, หรือ Modal ลิงก์นี้ควรวางไว้ก่อนปิดแท็ก </body> เพื่อให้หน้าเว็บโหลดเนื้อหาหลักให้เสร็จก่อนที่จะโหลดสคริปต์ ซึ่งช่วยให้หน้าเว็บแสดงผลได้เร็วขึ้น

โครงสร้าง HTML เริ่มต้น (Starter Template)

นี่คือโค้ด HTML พื้นฐานที่พร้อมใช้งาน Bootstrap 5 ผ่าน CDN คุณสามารถคัดลอกโค้ดนี้ไปใช้เป็นจุดเริ่มต้นสำหรับโปรเจกต์ของคุณได้เลย

<!doctype html>
<html lang="th">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <title>Bootstrap 5 Workshop</title>
  </head>
  <body>
    <h1>สวัสดี, Bootstrap 5!</h1>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

การทดสอบว่า Bootstrap ทำงานหรือไม่

หลังจากวางโค้ด Starter Template แล้ว วิธีง่ายๆ ในการทดสอบว่า Bootstrap ถูกติดตั้งและทำงานอย่างถูกต้องหรือไม่ คือการลองใช้คลาสของ Bootstrap กับองค์ประกอบ HTML ใดๆ เช่น ลองเปลี่ยนแท็ก <h1> ให้มีสไตล์ที่แตกต่างออกไป หรือเพิ่มปุ่มเข้ามา

<!-- ทดลองเปลี่ยน h1 ให้แสดงผลแบบ Display 1 และจัดกึ่งกลาง -->
<h1 class="display-1 text-center">สวัสดี, Bootstrap 5!</h1>

<!-- ทดลองเพิ่มปุ่มสีน้ำเงิน -->
<div class="text-center mt-4">
  <a href="#" class="btn btn-primary">Test Button</a>
</div>

หากคุณเห็นฟอนต์ของ <h1> เปลี่ยนไปและปุ่มสีน้ำเงินปรากฏขึ้น แสดงว่าคุณได้ตั้งค่า Bootstrap 5 สำเร็จแล้ว และพร้อมที่จะเริ่ม Workshop ในส่วนถัดไป!

ส่วนที่ 1-ระบบกริด (Grid System)

ระบบกริดคือกระดูกสันหลังของการออกแบบเว็บไซต์แบบ Responsive ใน Bootstrap มันช่วยให้เราสามารถจัดวางเนื้อหาเป็นแถว (Row) และคอลัมน์ (Column) ได้อย่างเป็นระเบียบ และปรับเปลี่ยนการแสดงผลไปตามขนาดหน้าจอของอุปกรณ์ต่างๆ โดยอัตโนมัติ

หัวใจหลักของ Grid: Container, Row, และ Column

โครงสร้างพื้นฐานของระบบกริดใน Bootstrap 5 ประกอบด้วย 3 ส่วนหลักที่ทำงานร่วมกันเสมอ ตามข้อมูลจาก เอกสารทางการของ Bootstrap:

ที่มา: ข้อมูลจาก Bootstrap Breakpoints Documentation

Workshop 1 สร้าง Layout พื้นฐานด้วย Grid

ลองมาสร้าง Layout ง่ายๆ เพื่อทำความเข้าใจการทำงานของ Grid กัน

1. Layout แบบ 3 คอลัมน์เท่ากัน

หากเราต้องการสร้าง 3 คอลัมน์ที่มีความกว้างเท่ากัน เราสามารถใช้คลาส .col ได้เลย Bootstrap จะคำนวณความกว้างให้โดยอัตโนมัติ

<div class="container">
  <div class="row">
    <div class="col">
      คอลัมน์ที่ 1
    </div>
    <div class="col">
      คอลัมน์ที่ 2
    </div>
    <div class="col">
      คอลัมน์ที่ 3
    </div>
  </div>
</div>
Grid layout
ผลลัพธ์การแสดงผลของ Layout แบบ 3 คอลัมน์เท่ากัน

2. Layout แบบกำหนดความกว้างเอง

ถ้าเราต้องการกำหนดความกว้างเอง เช่น คอลัมน์ซ้ายกว้าง 8 ส่วน และคอลัมน์ขวากว้าง 4 ส่วน (รวมเป็น 12) เราจะใช้คลาส .col-sm-8 และ .col-sm-4 การใช้ sm (small) หมายความว่า Layout นี้จะแสดงเป็น 2 คอลัมน์ในหน้าจอขนาดเล็กขึ้นไป (ตั้งแต่ 576px) แต่ในหน้าจอมือถือที่เล็กกว่านั้น คอลัมน์จะเรียงซ้อนกันในแนวตั้งโดยอัตโนมัติ ซึ่งเป็นหัวใจของ Responsive Design 

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      ส่วนเนื้อหาหลัก (8 ส่วน)
    </div>
    <div class="col-sm-4">
      แถบด้านข้าง (4 ส่วน)
    </div>
  </div>
</div>
Responsive grid
ตัวอย่างการแสดงผลของ Grid System ที่ปรับเปลี่ยนตามขนาดหน้าจอ (Responsive)
เคล็ดลับ: คุณสามารถผสมผสานคลาสสำหรับขนาดหน้าจอต่างๆ ได้ เช่น class="col-12 col-md-6 col-lg-4" หมายถึง ให้กว้างเต็มหน้าจอบนมือถือ (12 ส่วน), กว้างครึ่งหนึ่งบนแท็บเล็ต (6 ส่วน), และกว้างหนึ่งในสามบนเดสก์ท็อป (4 ส่วน)

ส่วนที่ 2 การนำทาง - สร้าง Navbar แบบ Responsive

Navbar หรือแถบนำทาง เป็นส่วนประกอบที่สำคัญที่สุดอย่างหนึ่งของเว็บไซต์ Bootstrap 5 มีคอมโพเนนต์ Navbar ที่ทรงพลังและปรับแต่งได้ง่าย ช่วยให้เราสร้างเมนูที่สวยงามและทำงานได้ดีบนทุกอุปกรณ์

ส่วนประกอบของ Navbar

Navbar ประกอบด้วยคลาสหลักๆ ที่ทำงานร่วมกันเพื่อสร้างแถบนำทางที่สมบูรณ์ ตามเอกสารของ Bootstrap 5.3:

Workshop 2 สร้าง Navbar มาตรฐาน

มาสร้าง Navbar ที่มีโลโก้, ลิงก์เมนู, และช่องค้นหา ซึ่งจะพับเก็บอัตโนมัติบนหน้าจอขนาดเล็ก

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MyWebsite</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Services
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Web Design</a></li>
            <li><a class="dropdown-item" href="#">SEO</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Consulting</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

โค้ดด้านบนจะสร้าง Navbar ที่ทำงานได้อย่างสมบูรณ์ สังเกตการใช้ data-bs-toggle="collapse" และ data-bs-target ซึ่งเป็นส่วนหนึ่งของ JavaScript API ของ Bootstrap ที่ทำงานโดยไม่ต้องใช้ jQuery

Navbar example
ตัวอย่าง Navbar ที่ปรับเปลี่ยนการแสดงผลตามขนาดหน้าจอ

ส่วนที่ 3 การแสดงผลเนื้อหา - การ์ด (Card)

Card เป็นคอมโพเนนต์ที่ยืดหยุ่นและใช้งานได้หลากหลาย เหมาะสำหรับการแสดงเนื้อหาที่มีทั้งรูปภาพ ข้อความ และปุ่มกดรวมอยู่ในกล่องเดียวกัน เช่น การ์ดสินค้า, บทความ, หรือโปรไฟล์

Card คืออะไร?

Card คือกล่องเนื้อหาที่มาพร้อมตัวเลือกสำหรับส่วนหัว (Header), ส่วนท้าย (Footer), รูปภาพ, และเนื้อหาหลากหลายรูปแบบ โครงสร้างพื้นฐานของ Card ประกอบด้วย .card เป็นตัวห่อหุ้มหลัก และ .card-body สำหรับใส่เนื้อหาที่มี padding อยู่ภายใน

Workshop 3 สร้างการ์ดสินค้าและจัดเรียงด้วย Grid

ใน Workshop นี้ เราจะสร้างการ์ดสินค้า 3 ชิ้น และนำไปจัดเรียงในแถวเดียวกันโดยใช้ Grid System ที่ได้เรียนมา

1. สร้างโครงสร้างของการ์ดสินค้า

การ์ดแต่ละใบจะประกอบด้วยรูปภาพ, ชื่อสินค้า, คำอธิบายสั้นๆ และปุ่ม

<!-- โครงสร้างของการ์ด 1 ใบ -->
<div class="card">
  <img src="path/to/your/image.jpg" class="card-img-top" alt="Product Image">
  <div class="card-body">
    <h5 class="card-title">ชื่อสินค้า</h5>
    <p class="card-text">คำอธิบายสินค้าสั้นๆ เพื่อดึงดูดความสนใจของผู้ใช้งาน</p>
    <a href="#" class="btn btn-primary">ดูรายละเอียด</a>
  </div>
</div>

2. นำการ์ดไปจัดเรียงใน Grid

เราจะใช้ .row และ .col เพื่อจัดวางการ์ด 3 ใบให้อยู่ในแถวเดียวกัน และให้ปรับเปลี่ยนการแสดงผลบนหน้าจอขนาดต่างๆ อย่างเหมาะสม โดยใช้คลาส .row-cols-* ซึ่งเป็นวิธีที่สะดวกในการกำหนดจำนวนคอลัมน์ต่อแถว

<div class="container mt-5">
  <!-- บนหน้าจอขนาดกลาง (md) ขึ้นไปให้แสดง 3 คอลัมน์, บนมือถือแสดง 1 คอลัมน์ -->
  <div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
      <div class="card h-100"> <!-- h-100 ทำให้การ์ดทุกใบสูงเท่ากัน -->
        <img src="path/to/image1.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">สินค้าชิ้นที่ 1</h5>
          <p class="card-text">รายละเอียดสินค้าชิ้นที่ 1</p>
          <a href="#" class="btn btn-primary">ดูรายละเอียด</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
        <img src="path/to/image2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">สินค้าชิ้นที่ 2</h5>
          <p class="card-text">รายละเอียดสินค้าชิ้นที่ 2 ที่มีข้อความยาวกว่าเล็กน้อย</p>
          <a href="#" class="btn btn-primary">ดูรายละเอียด</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
        <img src="path/to/image3.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">สินค้าชิ้นที่ 3</h5>
          <p class="card-text">รายละเอียดสินค้าชิ้นที่ 3</p>
          <a href="#" class="btn btn-primary">ดูรายละเอียด</a>
        </div>
      </div>
    </div>
  </div>
</div>

ในตัวอย่างนี้ เราใช้ .row-cols-1 สำหรับหน้าจอเล็กสุด (แสดง 1 คอลัมน์ต่อแถว) และ .row-cols-md-3 สำหรับหน้าจอขนาดกลางขึ้นไป (แสดง 3 คอลัมน์ต่อแถว) คลาส g-4 ใช้สำหรับกำหนดระยะห่าง (gutter) ระหว่างคอลัมน์ และ h-100 ช่วยให้การ์ดทุกใบมีความสูงเท่ากันเสมอ

Card layout
ตัวอย่างการจัดเรียง Card ด้วย Grid System

Assignment สร้าง Product Card Layout

หลังจากเรียนรู้การใช้งาน Grid และ Card แล้ว ลองนำความรู้มาประยุกต์ใช้เพื่อสร้าง Layout สำหรับแสดงรายการสินค้าตามที่กำหนด

คำอธิบายงาน

สร้างหน้าเว็บที่แสดงรายการสินค้า 3 ชิ้นในแถวเดียวกัน โดยแต่ละชิ้นแสดงในรูปแบบ Card ที่มีรูปภาพ, ชื่อ, ราคา, และปุ่ม Layout จะต้องเป็นแบบ Responsive โดยแสดง 3 คอลัมน์บนจอใหญ่, 2 คอลัมน์บนจอขนาดกลาง, และ 1 คอลัมน์บนจอมือถือ

ผลลัพธ์ที่ต้องการ

Assignment
ตัวอย่างผลลัพธ์บนหน้าจอเดสก์ท็อปและมือถือ

ข้อกำหนดรายละเอียด

Assignment detail
รายละเอียดองค์ประกอบภายใน Card
  1. Grid Layout
    • ใช้ .container เพื่อจัดเนื้อหาให้อยู่กึ่งกลาง
    • ใช้ .row เพื่อสร้างแถว
    • กำหนดให้แสดง 1 คอลัมน์บนจอเล็ก (col-12), 2 คอลัมน์บนจอขนาดกลาง (col-md-6), และ 3 คอลัมน์บนจอใหญ่ (col-lg-4)
    • ใช้ Gutter (g-4) เพื่อสร้างระยะห่างที่สวยงาม
  2. Card Component
    • รูปภาพสินค้า (card-img-top)
    • ชื่อสินค้า (h5.card-title)
    • คำอธิบายสินค้า (p.card-text)
    • ป้ายราคา (ใช้ .badge และจัดตำแหน่งที่มุมขวาบนของการ์ด)
    • ปุ่ม 2 ปุ่ม: "Add to Cart" (btn-primary) และ "View Details" (btn-outline-secondary)

โครงสร้างโค้ดเริ่มต้น

<div class="container py-5">
  <h2 class="text-center mb-4">Our Products</h2>
  <div class="row">
    <!-- TODO: สร้าง Column สำหรับ Card ที่นี่ (ใช้ col-12, col-md-6, col-lg-4) -->
    <div class="col-12 col-md-6 col-lg-4 mb-4">
      <!-- TODO: สร้าง Card สินค้าใบที่ 1 ที่นี่ -->
      <div class="card h-100">
        <!-- ใส่รูปภาพ, ชื่อ, รายละเอียด, ราคา, และปุ่ม -->
      </div>
    </div>

    <!-- TODO: สร้าง Column และ Card สำหรับสินค้าใบที่ 2 -->

    <!-- TODO: สร้าง Column และ Card สำหรับสินค้าใบที่ 3 -->

  </div>
</div>

เกณฑ์การประเมิน

ส่วนที่ 4: แนวทางปฏิบัติที่ดีที่สุดและข้อผิดพลาดที่ควรเลี่ยง

การใช้ Bootstrap ให้เกิดประสิทธิภาพสูงสุด ไม่ใช่แค่การนำคลาสมาใช้ แต่คือการเข้าใจหลักการและนำไปประยุกต์ใช้อย่างถูกวิธี

แนวทางปฏิบัติที่ดี (Best Practices)

ข้อผิดพลาดที่พบบ่อย

บทสรุป

ในเวิร์คช็อปนี้ เราได้เรียนรู้พื้นฐานที่สำคัญที่สุดของ Bootstrap 5 ตั้งแต่การวางโครงสร้างด้วย Grid System, การสร้างเมนูนำทางด้วย Navbar, ไปจนถึงการแสดงผลเนื้อหาด้วย Card และนำทั้งหมดมาประกอบกันเป็นหน้าเว็บที่ตอบสนองต่อทุกอุปกรณ์ได้

Bootstrap 5 เป็นเครื่องมือที่ทรงพลังและช่วยให้การพัฒนาเว็บเป็นเรื่องสนุกและรวดเร็วขึ้นอย่างมาก หัวใจสำคัญคือการทำความเข้าใจแนวคิดหลักและฝึกฝนใช้งานคอมโพเนนต์ต่างๆ อย่างสม่ำเสมอ

สำหรับก้าวต่อไป ลองศึกษาคอมโพเนนต์อื่นๆ ที่น่าสนใจใน Bootstrap เช่น:

ยิ่งคุณคุ้นเคยกับเครื่องมือเหล่านี้มากเท่าไหร่ คุณก็จะยิ่งสามารถสร้างสรรค์เว็บไซต์ที่ซับซ้อนและสวยงามได้อย่างมืออาชีพมากขึ้นเท่านั้น ขอให้สนุกกับการเขียนโค้ด!

Reference

[1]
การใช้งาน Bootstrap ในการสร้างหน้าเว็บ Responsive
https://www.borntodev.com/2023/11/11/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%87%E0%B8%B2%E0%B8%99-bootstrap-%E0%B9%83%E0%B8%99%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B8%AB%E0%B8%99/
[2]
Grid System ใน Bootstrap
https://www.borntodev.com/2024/04/25/grid-system-%E0%B9%83%E0%B8%99-bootstrap/
[3]
Bootstrap 5 Grid Basic
https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php
[4]
How to Achieve Accessibility Compliance with Bootstrap 5
https://www.batoi.com/blogs/developers/how-achieve-accessibility-compliance-bootstrap-5-6645baaae29d1
[5]
Grid system · Bootstrap v5.0
https://getbootstrap.com/docs/5.0/layout/grid/
[6]
Cards · Bootstrap v5.0
https://getbootstrap.com/docs/5.0/components/card/
[7]
Breakpoints
https://getbootstrap.com/docs/5.0/layout/breakpoints/
[8]
Navbar · Bootstrap v5.3
https://getbootstrap.com/docs/5.3/components/navbar/
[9]
Bootstrap5 - A Beginner's Guide to Responsive Web Design
https://red9systech.com/bootstrap5-guide/
[10]
How To Override Bootstrap 5 CSS Styles?
https://themeselection.com/override-bootstrap-css-styles/?srsltid=AfmBOopXigdXfBju0WDFtky1VhpAGoq3dVr-hJaGpL0N_UN3FSFi0T5u