---
author: Mark Dumay
title: Bootstrap elements
date: 2023-02-17
description: Use shortcodes to add common Bootstrap elements with ease.
tags: ["bootstrap", "shortcode"]
thumbnail: img/boots.jpg
photoCredits: Nathan Dumlao
photoSource: Unsplash
---
Hinode provides several shortcodes that wrap common Bootstrap components. Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
## Accordion
As an example, the following shortcode displays an accordion with three elements, of which the first element is expanded.
{{< example lang="hugo" >}}
{{}}
{{}}
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.
{{}}
{{}}
This is the second item's accordion body. It supports HTML content too.
{{}}
{{}}
This is the third item's accordion body.
{{}}
{{}}
{{< /example >}}
## Alert
As an example, the following shortcode displays a simple alert.
{{< example lang="hugo" >}}
{{}}
A simple danger alert—check it out!
{{}}
{{< /example >}}
## Badge
Use HTML code to display a badge for a heading. See the Bootstrap [documentation]({{< param "links.bs_badge_heading" >}}) for more options.
{{< example >}}
Example heading of size one New
Example heading of size two New
Example heading of size three New
Example heading of size four New
Example heading of size five New
Example heading of size six New
{{< /example >}}
## Breadcrumb
As an example, the following shortcode displays a breadcrumb for the blog page.
{{< example lang="hugo" >}}
{{}}
{{< /example >}}
## Button
As an example, the following shortcode displays a tooltip for a dark button with a badge.
{{< example lang="hugo" >}}
{{}}
Inbox
{{}}
{{< /example>}}
## Button group
As an example, the following shortcode displays a group of three buttons.
{{< example lang="hugo" >}}
{{}}
{{}}Left{{}}
{{}}Middle{{}}
{{}}Right{{}}
{{}}
{{< /example >}}
## Card
As an example, the following shortcode displays a stacked card that links to the [about]({{< ref "about" >}}) page. It includes a custom header.
{{< example lang="hugo" >}}
{{}}
{{< /example >}}
## Carousel
As an example, the following shortcode displays a centered carousel with three slides, 16x9 aspect ratio, and a relative width of 67% on large screens.
{{< example lang="hugo" >}}
{{}}
{{}}
{{}}
{{}}
{{}}
{{< /example >}}
## Collapse
As an example, the following shortcode displays a button that, when clicked, triggers a panel to appear or disappear.
{{< example lang="hugo" >}}
{{}}
Trigger panel
{{}}
{{}}
Some placeholder content for the collapse component. This panel is hidden by default but
revealed when the user activates the relevant trigger.
{{}}
{{< /example >}}
## Command prompt
Use the `command` shortcode to generate a block with a default bash command prompt.
{{< example lang="hugo" >}}
{{}}
export MY_VAR=123
{{}}
{{< /example >}}
Specify `user` and `host` to add the user context to the prompt. In addition, use `(out)` to specify an output line and use `\` to denote a line continuation.
{{< example lang="hugo" >}}
{{}}
export MY_VAR=123
echo "hello"
(out)hello
echo one \
two \
three
(out)one two three
echo "goodbye"
(out)goodbye
{{}}
{{< /example >}}
## Docs
Use the `docs` shortcode to display the content of a `js`, `scss` or `toml` file:
{{< docs name="theme-colors" file="config/_default/params.toml" >}}
## Icon
As an example, the following shortcodes show a square check, a brand logo, and a circle check.
{{< example lang="hugo" >}}
{{}}
{{}}
{{}}
{{< /example >}}
## Image
As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
{{< example lang="hugo" >}}
{{}}
{{< /example >}}
## Nav
As an example, the following shortcode displays a tab group with vertically aligned pills.
{{< example lang="hugo" >}}
{{}}
{{}}
This is the first item's nav body. It supports HTML content. The item is shown by adding the value
show to the class argument.
{{}}
{{}}
This is the second item's nav body. It too supports HTML content.
{{}}
{{}}
This is the third item's nav body.
{{}}
{{}}
{{< /example >}}
## Navbar
As an example, the following shortcode displays a light navigation header.
{{< example lang="hugo" >}}
{{}}
{{< /example >}}
## Spinner
As an example, the following shortcode displays a centered spinner.
{{< example lang="hugo" >}}
{{}}
Loading...
{{}}
{{< /example>}}
## Toast
As an example, the following shortcode displays a button that, when clicked, triggers the toast message.
{{< example lang="hugo" >}}
{{}}
Show toast
{{}}
{{}}
This is a toast message.
{{}}
{{< /example >}}
## Tooltip
As an example, the following shortcode displays a tooltip for a colored hyperlink.
{{< example lang="hugo" >}}
{{}}Tooltip{{}} demonstration
{{< /example >}}