--- author: Mark Dumay title: Bootstrap elements date: 2023-08-12 description: Use shortcodes to add common Bootstrap elements with ease. tags: ["bootstrap", "shortcode"] thumbnail: url: img/boots.jpg author: Nathan Dumlao authorURL: https://unsplash.com/@nate_dumlao origin: Unsplash originURL: https://unsplash.com/photos/QLPWQvHvmII --- Hinode provides several shortcodes that wrap common Bootstrap components. Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details. ## Abbr As an example, the following shortcode displays the full text of an abbreviation on hover. {{< example lang="hugo" >}} {{}} {{< /example >}} ## 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, if enabled in the goldmark renderer. The item is shown by adding the value `show` to the `class` argument. {{}} {{}} This is the second item's accordion body. {{}} {{}} 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 the badge shortcode to display a badge for a heading. {{< example >}} Heading 1 {{}} {.h1} Heading 2 {{}} {.h2} Heading 3 {{}} {.h3} Heading 4 {{}} {.h4} Heading 5 {{}} {.h5} Heading 6 {{}} {.h6} {{< /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 >}} ## Card group As an example, the following shortcode displays a card group of three elements. {{< example lang="hugo" >}} {{}} {{}} Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source Sass files. {{}} {{}} Search your site with FlexSearch, a full-text search library with zero dependencies. {{}} {{}} Use Node Package Manager to automate the build process and to keep track of dependencies. {{}} {{}} {{< /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" >}} ## Example Use the `example` shortcode to display a code example and to render a preview of the same input. {{< example lang="hugo" >}} {{}} export MY_VAR=123 {{}} {{< /example >}} ## File Use the `file` shortcode to print and highlight the full content of a given input file. {{< example lang="hugo" >}} {{}} {{< /example >}} ## Icon As an example, the following shortcodes show a square check, a brand logo, a circle check, and a custom icon. {{< 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 >}} As an example, the following shortcode displays a regular vector image. {{< example lang="hugo" >}} {{}} {{< /example >}} As an example, the following shortcode displays a vector image with a symbol reference. {{< example lang="hugo" >}} {{}} {{< /example >}} ## Link As an example, the following shortcodes render links in different formats. {{< example lang="hugo" >}} - {{}}Named link with default settings{{< /link */>}} - {{}}Named link opening in current tab w/o icon{{< /link */>}} - {{}}Named link opening in new tab with icon{{< /link */>}} - {{}} - {{}}External link{{< /link */>}} - {{}}Internal link with title{{< /link */>}} - {{}} - {{}} - {{}} - {{}} - {{}} - {{}}About (French){{< /link */>}} - {{}} - {{}} {{< /example >}} ## Mark Use the `mark` shortcode to highlight text. The inner content is used as input. {{< example lang="hugo" >}} Use the mark shortcode to {{}}highlight{{< /mark */>}} specific text. {{< /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, if enabled in the goldmark renderer. The item is shown by adding the value `show` to the `class` argument. {{}} {{}} This is the second item's nav body. {{}} {{}} 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 >}} ## Release As an example, the following shortcode displays a default release button. {{< example lang="hugo" >}} {{}} {{< /example >}} ## Spinner As an example, the following shortcode displays a centered spinner. {{< example lang="hugo" >}} {{}} Loading... {{}} {{< /example>}} ## Sub As an example, the following shortcode displays subscript text. {{< example >}} H{{}}O is a liquid. {{< /example >}} ## Sup As an example, the following shortcode displays superscript text. {{< example >}} 2{{}} is 1024. {{< /example >}} ## Timeline As an example, the following shortcode displays a timeline with the file `data/timeline.en.yml` as data. {{< example lang="hugo" >}} {{}} {{< /example >}} ## Toast As an example, the following shortcode displays a button that, when clicked, triggers the toast message. {{< example lang="hugo" >}} {{}} Show toast 1 {{}} {{}} Show toast 2 {{}} {{}} This is the first toast message. It supports `markdown.` {{}} {{}} This is the second toast message. It supports `markdown.` {{}} {{< /example >}} ## Tooltip As an example, the following shortcode displays a tooltip for a colored hyperlink. {{< example lang="hugo" >}} {{}}Tooltip{{}} demonstration {{< /example >}}