Bootstrap elements
Posted on February 17, 2023 (Last modified on January 20, 2024) • 5 min read • 1,013 wordsUse shortcodes to add common Bootstrap elements with ease.
Hinode provides several shortcodes that wrap common Bootstrap components. Refer to the official documentation for more details.
Accordion
As an example, the following shortcode displays an accordion with three elements, of which the first element is expanded.
show to the class argument.{{< accordion >}}
{{< accordion-item header="Accordion Item #1" show="true" >}}
This is the first item's accordion body. It supports HTML content. The item is shown by adding the value
<code>show</code> to the <code>class</code> argument.
{{< /accordion-item >}}
{{< accordion-item header="Accordion Item #2" >}}
This is the second item's accordion body. It supports HTML content too.
{{< /accordion-item >}}
{{< accordion-item header="Accordion Item #3" >}}
This is the third item's accordion body.
{{< /accordion-item >}}
{{< /accordion >}}Alert
As an example, the following shortcode displays a simple alert.
{{< alert color="danger" dismissible="true" >}}
A simple danger alert—check it out!
{{< /alert >}}Badge
Use HTML code to display a badge for a heading. See the Bootstrap documentation for more options.
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
<h1>Example heading of size one <span class="badge bg-secondary">New</span></h1>
<h2>Example heading of size two <span class="badge bg-secondary">New</span></h2>
<h3>Example heading of size three <span class="badge bg-secondary">New</span></h3>
<h4>Example heading of size four <span class="badge bg-secondary">New</span></h4>
<h5>Example heading of size five <span class="badge bg-secondary">New</span></h5>
<h6>Example heading of size six <span class="badge bg-secondary">New</span></h6>Breadcrumb
As an example, the following shortcode displays a breadcrumb for the blog page.
{{< breadcrumb path="blog" >}}Button
As an example, the following shortcode displays a tooltip for a dark button with a badge.
{{< button color="secondary" tooltip="Click on the inbox to view your unread messages" href="#" badge="99+" >}}
Inbox
{{< /button >}}Button group
As an example, the following shortcode 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
As an example, the following shortcode displays a stacked card with icon that links to the about page. It includes a custom header.
April 11, 2022 • 1 min read
About
Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
{{< card path="about" padding="3" class="w-50" color="light" header="publication" footer="none" />}}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.
{{< 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 >}}Collapse
As an example, the following shortcode displays a button that, when clicked, triggers a panel to appear or disappear.
{{< 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 <i>hidden by default</i> but
revealed when the user activates the relevant trigger.
{{< /collapse >}}Command prompt
Use the command shortcode to generate a block with a default bash command prompt.
export MY_VAR=123{{< command >}}
export MY_VAR=123
{{< /command >}}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.
export MY_VAR=123
echo "hello"
hello
echo one \
two \
three
one two three
echo "goodbye"
goodbye{{< command user="user" host="localhost" >}}
export MY_VAR=123
echo "hello"
(out)hello
echo one \
two \
three
(out)one two three
echo "goodbye"
(out)goodbye
{{< /command >}}Docs
Use the docs shortcode to display the content of a toml or scss file:
[style]
primary = "#d43900"
secondary = "#6c757d"
success = "#198754"
info = "#0dcaf0"
warning = "#ffc107"
danger = "#dc3545"
light = "#f8f9fa"
dark = "#212529"Icon
As an example, the following shortcodes show a square check, a brand logo, and a circle check.
{{< fa square-check >}}
{{< fab linkedin >}}
{{< fas circle-check >}}Image
As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
{{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded" >}}Navbar
As an example, the following shortcode displays a light navigation header.
{{< navbar path="about" color="primary" size="sm" search="false" menus="sample" title="Brand" >}}Spinner
As an example, the following shortcode displays a centered spinner.
{{< spinner color="info" class="text-center" >}}
Loading...
{{< /spinner >}}Toast
As an example, the following shortcode displays a button that, when clicked, triggers the toast message.
{{< button id="toastButton" >}}
Show toast
{{< /button >}}
{{< toast header="Custom title" >}}
This is a toast message.
{{< /toast >}}Tooltip
As an example, the following shortcode displays a tooltip for a colored hyperlink.
{{< tooltip color="primary" title="Tooltip" href="#" >}}
Tooltip demonstration
{{< /tooltip >}}