20 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
Accordion Item #1
.accordion-body, though the transition does limit overflow.
Accordion Item #2
.accordion-body, though the transition does limit overflow.
Accordion Item #3
.accordion-body, though the transition does limit overflow.
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
Headings
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Buttons
The badge for a button is available via a [custom shortcode]({{< ref "custom-shortcodes#button" >}} "custom shortcode").
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="w-50" 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
Collapse
Link with href Button with data-bs-target
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
Show live 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 >}}