Bootstrap 4 Tutorial

BS4 Jumbotron

Last modified on: October 26, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<h2 class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8"><span style="font-size: 24pt;">Bootstrap 4 Jumbotron</span></h2>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="988599d3-33f4-47d9-bce6-c76b7098a718" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>The Jumbotron is a lightweight, flexible component in Bootstrap 4 that is designed to showcase key content on your webpage. It's perfect for highlighting important information, introductory content, or calls to action. The Jumbotron is responsive, making it easy to use across various devices.</p>
<h2>Key Features of Bootstrap 4 Jumbotron</h2>
<ol>
<li>
<p><strong>Responsive Design</strong>: The Jumbotron scales automatically with the viewport size, ensuring content is displayed properly on all devices.</p>
</li>
<li>
<p><strong>Customizable</strong>: You can easily customize the background color, text color, and other styles to match your design.</p>
</li>
<li>
<p><strong>Flexible Content</strong>: The Jumbotron can contain headings, paragraphs, buttons, and even images, providing a versatile layout for your content.</p>
</li>
<li>
<p><strong>Built-in Classes</strong>: Bootstrap provides various utility classes that you can use to enhance the styling and layout of your Jumbotron.</p>
</li>
</ol>
<h2>Basic Jumbotron Structure</h2>
<p>Here&rsquo;s the basic HTML structure for a Jumbotron in Bootstrap 4:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="jumbotron"&gt;
    &lt;h1 class="display-4"&gt;Hello, world!&lt;/h1&gt;
    &lt;p class="lead"&gt;This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.&lt;/p&gt;
    &lt;hr class="my-4"&gt;
    &lt;p&gt;It uses utility classes for typography and spacing to space content out within the larger container.&lt;/p&gt;
    &lt;a class="btn btn-primary btn-lg" href="#" role="button"&gt;Learn more&lt;/a&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Examples of Bootstrap 4 Jumbotron</h2>
<h3>1. Basic Jumbotron</h3>
<p>This example demonstrates a basic Jumbotron with a title, text, and a button:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="jumbotron"&gt;
    &lt;h1 class="display-4"&gt;Welcome to Our Website!&lt;/h1&gt;
    &lt;p class="lead"&gt;We provide high-quality services to our customers.&lt;/p&gt;
    &lt;hr class="my-4"&gt;
    &lt;p&gt;Explore our offerings and discover how we can help you.&lt;/p&gt;
    &lt;a class="btn btn-primary btn-lg" href="#" role="button"&gt;Get Started&lt;/a&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>2. Jumbotron with Background Color</h3>
<p>You can customize the background color of the Jumbotron using Bootstrap utility classes:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="jumbotron bg-primary text-white"&gt;
    &lt;h1 class="display-4"&gt;Exciting News!&lt;/h1&gt;
    &lt;p class="lead"&gt;We have launched new features to improve your experience.&lt;/p&gt;
    &lt;hr class="my-4"&gt;
    &lt;p&gt;Check out the latest updates on our blog.&lt;/p&gt;
    &lt;a class="btn btn-light btn-lg" href="#" role="button"&gt;Read Blog&lt;/a&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>3. Jumbotron with an Image Background</h3>
<p>For a more visually engaging Jumbotron, you can use a background image:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="jumbotron" style="background-image: url('https://via.placeholder.com/1200x400'); background-size: cover; color: white;"&gt;
    &lt;h1 class="display-4"&gt;Discover Amazing Places&lt;/h1&gt;
    &lt;p class="lead"&gt;Join us on a journey to explore the world's hidden gems.&lt;/p&gt;
    &lt;hr class="my-4"&gt;
    &lt;p&gt;Adventure awaits you. Start planning your trip today!&lt;/p&gt;
    &lt;a class="btn btn-warning btn-lg" href="#" role="button"&gt;Start Your Adventure&lt;/a&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>4. Jumbotron with Multiple Buttons</h3>
<p>You can add multiple buttons in your Jumbotron for more options:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="jumbotron"&gt;
    &lt;h1 class="display-4"&gt;Join Us Today!&lt;/h1&gt;
    &lt;p class="lead"&gt;Become a member and enjoy exclusive benefits.&lt;/p&gt;
    &lt;hr class="my-4"&gt;
    &lt;p&gt;Sign up now to start your journey with us.&lt;/p&gt;
    &lt;a class="btn btn-success btn-lg" href="#" role="button"&gt;Sign Up&lt;/a&gt;
    &lt;a class="btn btn-secondary btn-lg" href="#" role="button"&gt;Learn More&lt;/a&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>5. Complete Example: Jumbotron in a Bootstrap Page</h3>
<p>Here&rsquo;s a complete example of a Bootstrap 4 page featuring a Jumbotron:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Bootstrap 4 Jumbotron Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="jumbotron bg-info text-white"&gt;
        &lt;h1 class="display-4"&gt;Welcome to Our Service!&lt;/h1&gt;
        &lt;p class="lead"&gt;Providing the best solutions for your needs.&lt;/p&gt;
        &lt;hr class="my-4"&gt;
        &lt;p&gt;Contact us today to learn more about our offerings.&lt;/p&gt;
        &lt;a class="btn btn-light btn-lg" href="#" role="button"&gt;Contact Us&lt;/a&gt;
    &lt;/div&gt;

&lt;div class="container"&gt;
        &lt;h2&gt;About Our Services&lt;/h2&gt;
        &lt;p&gt;We offer a variety of services tailored to meet the demands of our clients. Our team of experts is dedicated to providing the highest quality of service.&lt;/p&gt;
    &lt;/div&gt;

&lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More