/usr/share/doc/libjs-bootstrap4/components/

/usr/share/doc/libjs-bootstrap4/components

Name	Size	Mode	Actions
alerts.md.gz	1874	0644	edit dl rm
badge.md	2948	0644	edit dl rm
breadcrumb.md	2231	0644	edit dl rm
button-group.md.gz	1620	0644	edit dl rm
buttons.md.gz	2622	0644	edit dl rm
card.md.gz	4823	0644	edit dl rm
carousel.md.gz	3842	0644	edit dl rm
collapse.md.gz	3194	0644	edit dl rm
dropdowns.md.gz	6103	0644	edit dl rm
forms.md.gz	12316	0644	edit dl rm
input-group.md.gz	2643	0644	edit dl rm
jumbotron.md	1165	0644	edit dl rm
list-group.md.gz	3804	0644	edit dl rm
media-object.md.gz	3329	0644	edit dl rm
modal.md.gz	7517	0644	edit dl rm
navbar.md.gz	5190	0644	edit dl rm
navs.md.gz	6133	0644	edit dl rm
pagination.md.gz	1420	0644	edit dl rm
popovers.md.gz	5619	0644	edit dl rm
progress.md.gz	1306	0644	edit dl rm
scrollspy.md.gz	4646	0644	edit dl rm
spinners.md.gz	1648	0644	edit dl rm
toasts.md.gz	3556	0644	edit dl rm
tooltips.md.gz	5382	0644	edit dl rm

Edit: /usr/share/doc/libjs-bootstrap4/components/jumbotron.md (1165B)

---
layout: docs
title: Jumbotron
description: Lightweight, flexible component for showcasing hero unit style content.
group: components
---

A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

{{< example >}}
<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
{{< /example >}}

To make the jumbotron full width, and without rounded corners, add the `.jumbotron-fluid` modifier class and add a `.container` or `.container-fluid` within.

{{< example >}}
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>
{{< /example >}}

--- layout: docs title: Jumbotron description: Lightweight, flexible component for showcasing hero unit style content. group: components --- A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site. {{< example >}}

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

{{< /example >}} To make the jumbotron full width, and without rounded corners, add the `.jumbotron-fluid` modifier class and add a `.container` or `.container-fluid` within. {{< example >}}

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.