🔹 Jumbotron یک کامپوننت آماده در Bootstrap 4 بود که برای نمایش بخش‌های بزرگ معرفی (Hero Section) مثل عنوان اصلی، توضیحات و دکمه‌ها استفاده می‌شد.
اما در Bootstrap 5 دیگه jumbotron حذف شده و به جاش از Utilities (ابزارهای کمکی مثل padding, margin, background, text) یا Hero section سفارشی استفاده می‌کنیم.

📌 1. Jumbotron در Bootstrap 4

<div class="jumbotron">
  <h1 class="display-4">سلام دنیا!</h1>
  <p class="lead">این یک مثال ساده از Jumbotron در بوت‌استرپ است.</p>
  <hr class="my-4">
  <p>می‌توانید این بخش را برای معرفی سایت یا محصول خود استفاده کنید.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">بیشتر بدانید</a>
</div>

🔹 ویژگی‌ها:

• پس‌زمینه روشن

• padding زیاد

• متن درشت

📌 2. Jumbotron در Bootstrap 5 (جایگزین)

در نسخه ۵ می‌تونیم همین طراحی رو با کلاس‌های utility بسازیم:

<div class="p-5 mb-4 bg-light rounded-3">
  <div class="container-fluid py-5">
    <h1 class="display-5 fw-bold">سلام دنیا!</h1>
    <p class="col-md-8 fs-4">این یک مثال ساده از بخش معرفی (Hero Section) است.</p>
    <button class="btn btn-primary btn-lg">شروع کنید</button>
  </div>
</div>

📌 3. Jumbotron با تصویر پس‌زمینه

می‌تونیم بهش بک‌گراند بدهیم:

<div class="p-5 text-white bg-dark rounded-3">
  <div class="container-fluid py-5">
    <h1 class="display-5 fw-bold">بوت‌استرپ ۵</h1>
    <p class="col-md-8 fs-4">اینجا یک Jumbotron سفارشی با پس‌زمینه تیره داریم.</p>
    <button class="btn btn-outline-light btn-lg">بیشتر بدانید</button>
  </div>
</div>

✨ خلاصه:

• در Bootstrap 4 → کلاس آماده jumbotron

• در Bootstrap 5 → ساخت دستی با spacing, background, typography utilities