<!DOCTYPE html><htmllang="en"data-bs-theme="auto"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="description"content=""><metaname="author"content="Mark Otto, Jacob Thornton, and Bootstrap contributors"><metaname="generator"content="Astro v5.6.1"><title>Jumbotron example · Bootstrap v5.3</title><linkrel="canonical"href="https://getbootstrap.com/docs/5.3/examples/jumbotron/"><scriptsrc="/docs/5.3/assets/js/color-modes.js"></script><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"><linkhref="/docs/5.3/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7"><linkrel="apple-touch-icon"href="/docs/5.3/assets/img/favicons/apple-touch-icon.png"sizes="180x180"><linkrel="icon"href="/docs/5.3/assets/img/favicons/favicon-32x32.png"sizes="32x32"type="image/png"><linkrel="icon"href="/docs/5.3/assets/img/favicons/favicon-16x16.png"sizes="16x16"type="image/png"><linkrel="manifest"href="/docs/5.3/assets/img/favicons/manifest.json"><linkrel="mask-icon"href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg"color="#712cf9"><linkrel="icon"href="/docs/5.3/assets/img/favicons/favicon.ico"><metaname="theme-color"content="#712cf9"><style>.bd-placeholder-img{font-size:1.125rem;text-anchor:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media(min-width:768px){.bd-placeholder-img-lg{font-size:3.5rem}}.b-example-divider{width:100%;height:3rem;background-color:#0000001a;border:solidrgba(0,0,0,.15);border-width:1px0;box-shadow:inset0.5em1.5em#0000001a,inset0.125em.5em#00000026}.b-example-vr{flex-shrink:0;width:1.5rem;height:100vh}.bi{vertical-align:-.125em;fill:currentColor}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller.nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.btn-bd-primary{--bd-violet-bg:#712cf9;--bd-violet-rgb:112.520718,44.062154,249.437846;--bs-btn-font-weight:600;--bs-btn-color:var(--bs-white);--bs-btn-bg:var(--bd-violet-bg);--bs-btn-border-color:var(--bd-violet-bg);--bs-btn-hover-color:var(--bs-white);--bs-btn-hover-bg:#6528e0;--bs-btn-hover-border-color:#6528e0;--bs-btn-focus-shadow-rgb:var(--bd-violet-rgb);--bs-btn-active-color:var(--bs-btn-hover-color);--bs-btn-active-bg:#5a23c8;--bs-btn-active-border-color:#5a23c8}.bd-mode-toggle{z-index:1500}.bd-mode-toggle.bi{width:1em;height:1em}.bd-mode-toggle.dropdown-menu.active.bi{display:block!important}
<svgclass="bi ms-auto d-none"aria-hidden="true"><usehref="#check2"></use></svg></button></li></ul></div><main><divclass="container py-4"><headerclass="pb-3 mb-4 border-bottom"><ahref="/"class="d-flex align-items-center text-body-emphasis text-decoration-none"><svgxmlns="http://www.w3.org/2000/svg"width="40"height="32"class="me-2"viewBox="0 0 118 94"role="img"><title>Bootstrap</title><pathfill-rule="evenodd"clip-rule="evenodd"d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"fill="currentColor"></path></svg><spanclass="fs-4">Jumbotron example</span></a></header><divclass="p-5 mb-4 bg-body-tertiary rounded-3"><divclass="container-fluid py-5"><h1class="display-5 fw-bold">Custom jumbotron</h1><pclass="col-md-8 fs-4">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.</p><buttonclass="btn btn-primary btn-lg"type="button">Example button</button></div></div><divclass="row align-items-md-stretch"><divclass="col-md-6"><divclass="h-100 p-5 text-bg-dark rounded-3"><h2>Change the background</h2><p>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.</p><buttonclass="btn btn-outline-light"type="button">Example button</button></div></div><divclass="col-md-6"><divclass="h-100 p-5 bg-body-tertiary border rounded-3"><h2>Add borders</h2><p>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.</p><buttonclass="btn btn-outline-secondary"type="button">Example button</button></div></div></div><footerclass="pt-3 mt-4 text-body-secondary border-top">
