--- 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 4x3 aspect ratio in portrait mode. {{< example lang="hugo" >}} {{}} {{< /example >}} The same image, but then using Markdown syntax: {{< example lang="hugo" >}} ![Flowers](/img/flowers.jpg "Figure caption") {class="rounded col-md-6" ratio="4x3" portrait=true wrapper="text-center"} {{< /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 >}} ## Ins As an example, the following shortcode displays underlined text. {{< example >}} This is an {{}}underlined text{{}}. {{< /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 */>}} - {{}}Surrogate 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 >}} ## Persona As an example, the following shortcode displays a persona card with a primary color. {{< example lang="hugo" >}} {{}} As a content creator you value your independence. You like to take control of your online and offline presence. You want to focus on growing your audience, without limitations. Hinode gives you the tools to publish your blog in the way that you want. You have full ownership and control of your content. That is why content creators choose Hinode. {{}} {{< /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 >}} ## Table As an example, the following shortcode displays a responsive table. {{< example lang="markdown" >}} {{}} | # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | |----|---------|---------|---------|---------|---------|---------|---------|---------|---------| | 1. | cell | cel | cel | cel | cel | cel | cel | cel | cel | | 2. | cell | cel | cel | cel | cel | cel | cel | cel | cel | | 3. | cell | cel | cel | cel | cel | cel | cel | cel | cel | {{}} {{< /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 >}} ## Video As an example, the following shortcode displays an Elephants video hosted by Cloudinary. {{< example lang="hugo" >}} {{}} {{< /example >}}