Custom jumbotron

Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.

Change the background

Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.

Add borders

Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.

Theme Settings

Theme presets

Custom color


Font family

Font size

Quick Chat

DG

Design Team

Alex is typing…
avatar-1 avatar-2
+5
avatar-3
Good morning!
The new deployment went live. Can everyone confirm access?
09:12
avatar-4
Yes, logging in now.
09:14 ✔✔
avatar-5
I can access it. Some pages feel faster than before.
09:15
avatar-2
Great! Please check billing and analytics modules as well.
09:16
avatar-4
Billing looks fine. I'll test analytics next.
09:17

Notifications

avatar-7

Mark Collins commented on Design System v3

12 mins ago • UI Guild
“Can we try a slightly softer shadow on the cards for light mode?”
avatar-8

Emily Carter added you to Sprint Planning

45 mins ago • Product
Planning High priority Sprint Q2
avatar-9

Liam Brown requested access to Revenue Dashboard

3 hours ago • Analytics
avatar-10

Sara Lee shared a file with you

5 hours ago • 1.4 MB
PDF
Q3_report.pdf
Updated 20 mins ago
avatar-12

Design Team assigned you to Marketing Site Refresh

Yesterday • Design Board
New task
avatar-11

Support Bot replied to your ticket #4821

9 mins ago • Billing
“We've updated your invoice and applied the requested discount.”
avatar-8

Changelog posted Release 1.8.0

2 days ago • Updates
New automation rules, improved search results, and performance fixes.