18 KiB
author, title, date, description, tags, thumbnail, photoCredits, photoSource
| author | title | date | description | tags | thumbnail | photoCredits | photoSource | |
|---|---|---|---|---|---|---|---|---|
| Mark Dumay | Bootstrap Components | 2022-12-26 | Overview of available Bootstrap components. |
|
img/boots.jpg | <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a> | <a href="https://unsplash.com/photos/QLPWQvHvmII">Unsplash</a> |
Bootstrap provides several out-of-the-box UI components. The Hinode theme uses several of these components for rendering, such as the navigation menu and scrollspy. A few components are made available as Hugo shortcode, see [Custom Shortcodes]({{< ref "custom-shortcodes" >}} "Custom Shortcodes"). You can embed the Bootstrap components themselves too. The paragraphs below demonstrate the available UI components.
Accordion
The accordion is available as [custom shortcode]({{< ref "custom-shortcodes#accordion" >}} "custom shortcode"). The following shortcode displays an accordion with three items.
{{< accordion >}}
{{< accordion-item header="Accordion Item #1" class="show" >}}
This is the first item's accordion body. It supports HTML content. The item is shown by adding the value show to the class argument.
{{< /accordion-item >}}
{{< accordion-item header="Accordion Item #2" >}}
This is the second item's accordion body. It too supports HTML content.
{{< /accordion-item >}}
{{< accordion-item header="Accordion Item #3" >}}
This is the third item's accordion body.
{{< /accordion-item >}}
{{< /accordion >}}
Alerts
The alert is available as [custom shortcode]({{< ref "custom-shortcodes#alert" >}} "custom shortcode"). The following shortcode displays a simple alert.
{{< alert color="danger" >}} A simple danger alert—check it out! {{< /alert >}}
Badge
Badges can be added to headings and buttons. The following two sections illustrate how to use them.
Headings
Use HTML code to display a badge for a heading. See the Bootstrap documentation for more options. The following example displays a badge for a heading of size six.
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
The result looks like this.
Example heading New
Buttons
The badge for a button is available via a [custom shortcode]({{< ref "custom-shortcodes#button" >}} "custom shortcode"). The following example displays a light button with a badge.
{{< button color="light" href="#" badge="3" >}} Button {{< /button >}}
Breadcrumb
The breadcrumb is available as [custom shortcode]({{< ref "custom-shortcodes#breadcrumb" >}} "custom shortcode"). The following example displays a breadcrumb for the current page.
{{< breadcrumb >}}
Buttons
The button is available as [custom shortcode]({{< ref "custom-shortcodes#button" >}} "custom shortcode"). The following example displays a tooltip for a dark button with a badge.
{{< button color="dark" tooltip="Click on the inbox to view your unread messages" href="#" badge="99+" >}} Inbox {{< /button >}}
Button Group
The button group is available as [custom shortcode]({{< ref "custom-shortcodes#button-group" >}} "custom shortcode"). The following example displays a group of three buttons.
{{< button-group aria-label="Basic example" >}} {{< button color="primary" href="#" >}}Left{{< /button >}} {{< button color="primary" href="#" >}}Middle{{< /button >}} {{< button color="primary" href="#" >}}Right{{< /button >}} {{< /button-group >}}
Card
The card is available as [custom shortcode]({{< ref "custom-shortcodes#card" >}} "custom shortcode"). The following example displays a card that links to the [Rich Content]({{< ref "rich-content" >}} "Rich Content") page.
{{< card path="rich-content" class="col-sm-12 col-lg-8 mx-auto" layout="rich" >}}
Carousel
The carousel is available as [custom shortcode]({{< ref "custom-shortcodes#carousel" >}} "custom shortcode"). The following example displays a centered carousel with three slides, 16x9 aspect ratio, and a relative width of 67% on large screens.
{{< carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" >}} {{< img src="img/coffee.jpg" caption="slide 1" >}} {{< img src="img/phone.jpg" caption="slide 2" >}} {{< img src="img/dunes.jpg" caption="slide 3" >}} {{< /carousel >}}
Close button
Use HTML code to display a generic close button. See the Bootstrap documentation for more options. The following example displays a button with default styling.
<button type="button" class="btn-close" aria-label="Close"></button>
The result looks like this.
Collapse
The collapse panel is available as [custom shortcode]({{< ref "custom-shortcodes#collapse" >}} "custom shortcode"). The following example displays a button that reveils a hidden panel:
{{< button collapse="collapse-1" >}} Trigger panel {{< /button >}}
{{< collapse id="collapse-1" class="p-3 border rounded" >}} Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. {{< /collapse >}}
Dropdowns
Single button
Split button
List group
Modal
Launch demo modalNavbar
Navs & tabs
Offcanvas
Link with href Button with data-bs-targetOffcanvas
Pagination
Placeholders
Popovers
Click to toggle popover
Progress
Scrollspy
Navbar
NavbarFirst heading
...
Second heading
...
Third heading
...
Fourth heading
...
Fifth heading
...
Nested nav
Item 1
...
Item 1-1
...
Item 1-2
...
Item 2
...
Item 3
...
Item 3-1
...
Item 3-2
...
List group
Simple anchors
Spinners
The spinner is available as [custom shortcode]({{< ref "custom-shortcodes#spinner" >}} "custom shortcode"). The following example displays a centered spinner:
{{< spinner color="info" class="text-center" >}} Loading... {{< /spinner >}}
Toasts
The toast is available as [custom shortcode]({{< ref "custom-shortcodes#toast" >}} "custom shortcode"). The following example displays a button that triggers a toast message:
{{< button id="toastButton" >}} Show toast {{< /button >}}
{{< toast >}} This is a toast message. {{< /toast >}}
Tooltips
The tooltip is available as [custom shortcode]({{< ref "custom-shortcodes#tooltip" >}} "custom shortcode"). The following example displays a tooltip for a colored hyperlink:
{{< tooltip color="warning" title="Tooltip" href="#" >}} Tooltip demonstration {{< /tooltip >}}