A Jumbotron in Bootstrap 4 is a large content area designed to draw attention to important messages, promotions, or calls to action.
It is typically used for hero sections, banners, or marketing content.
What This Tutorial Covers:
- Basic Bootstrap 4 Jumbotron
- Jumbotron with different background colors
- Jumbotron with images
- Jumbotron with full-width layout
- Jumbotron with a call-to-action button
- Customizing Jumbotron with CSS
1. Basic Bootstrap 4 Jumbotron
To create a Jumbotron, use the .jumbotron class inside a <div> container.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Jumbotron</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<div class="jumbotron">
<h1 class="display-4">Welcome to Bootstrap 4</h1>
<p class="lead">This is a simple jumbotron, a lightweight and flexible component for calling extra attention to featured content.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out.</p>
</div>
</div>
</body>
</html>
Explanation:
- .jumbotron creates a large padded section.
- .display-4 makes the heading larger.
- .lead styles the subheading with a lighter font.
- <hr class=”my-4″> adds a horizontal rule with margin spacing.
2. Jumbotron with Different Background Colors
You can apply Bootstrap background utilities to change the Jumbotron color.
Example:
<div class="container mt-4">
<div class="jumbotron bg-primary text-white">
<h1>Blue Jumbotron</h1>
<p>This jumbotron has a blue background.</p>
</div>
</div>
<div class="container mt-4">
<div class="jumbotron bg-danger text-white">
<h1>Red Jumbotron</h1>
<p>This jumbotron has a red background.</p>
</div>
</div>
Explanation:
- bg-primary changes the background to blue.
- bg-danger changes the background to red.
- text-white ensures text remains visible on darker backgrounds.
3. Jumbotron with Images
You can set an image as a background using CSS.
Example:
<style>
.jumbotron-image {
background: url('https://via.placeholder.com/1200x500') no-repeat center center;
background-size: cover;
color: white;
}
</style>
<div class="container mt-4">
<div class="jumbotron jumbotron-image">
<h1>Jumbotron with Background Image</h1>
<p>This jumbotron uses a background image.</p>
</div>
</div>
Explanation:
- background: url() adds an image.
- background-size: cover; ensures the image scales properly.
- color: white; makes the text readable.
4. Full-Width Jumbotron
To make a full-width Jumbotron, place it outside the .container class.
Example:
<div class="jumbotron text-center">
<h1>Full-Width Jumbotron</h1>
<p>This jumbotron stretches across the full width of the screen.</p>
</div>
Explanation:
- Jumbotron extends to full width because it is outside a container.
- text-center centers the text.
Inside a container:
<div class="container">
<div class="jumbotron">
<h1>Contained Jumbotron</h1>
<p>This jumbotron is inside a container and has a fixed width.</p>
</div>
</div>
- This keeps the Jumbotron width limited.
5. Jumbotron with a Call-to-Action Button
A CTA (Call-to-Action) button encourages users to take action.
Example:
<div class="container mt-4">
<div class="jumbotron">
<h1>Join Us Today!</h1>
<p>Sign up to get access to exclusive content.</p>
<a class="btn btn-success btn-lg" href="#" role="button">Sign Up Now</a>
</div>
</div>
Explanation:
- .btn btn-success btn-lg creates a large green button.
- role=”button” improves accessibility.
6. Customizing Jumbotron with CSS
You can override Bootstrap styles to create a unique design.
Example:
<style>
.custom-jumbotron {
background-color: #ffcc00;
border-radius: 10px;
padding: 40px;
text-align: center;
}
</style>
<div class="container mt-4">
<div class="jumbotron custom-jumbotron">
<h1>Custom Styled Jumbotron</h1>
<p>This jumbotron has custom colors, rounded corners, and centered text.</p>
</div>
</div>
Explanation:
- .custom-jumbotron applies:
- background-color: #ffcc00; (Yellow background)
- border-radius: 10px; (Rounded corners)
- padding: 40px; (More spacing)
- text-align: center; (Centered text)
Conclusion
Bootstrap 4 Jumbotrons can be used for creating hero sections, banners, and promotional content. You can style them using background colors, images, buttons, and custom CSS to match your design.
