Bootstrap elements

Posted on February 17, 2023 (Last modified on May 9, 2023) • 4 min read • 842 words
bootstrap shortcode

Use shortcodes to add common Bootstrap elements with ease.

Bootstrap elements
Photo by Nathan Dumlao on Unsplash

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.

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.
markdown
{{< 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.

markdown
{{< 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
html
<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>

As an example, the following shortcode displays a breadcrumb for the blog page.

markdown
{{< breadcrumb path="blog" >}}

Button

As an example, the following shortcode displays a tooltip for a dark button with a badge.

Inbox 99+
markdown
{{< 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.

Left Middle Right
markdown
{{< 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.

May 9, 2023 • 1 min read

About

About Florian Kleinz

markdown
{{< card path="about" padding="3" class="w-50" color="light" header="publication" footer="none" >}}

Collapse

As an example, the following shortcode displays a button that, when clicked, triggers a panel to appear or disappear.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
markdown
{{< 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
markdown
{{< 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
markdown
{{< 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 = "#00a3ee"
    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.

markdown
{{< fa square-check >}}
{{< fab linkedin >}}
{{< fas circle-check >}}

As an example, the following shortcode displays a light navigation header.

markdown
{{< navbar path="about" color="primary" size="sm" search="false" menus="sample" title="Brand" >}}

Spinner

As an example, the following shortcode displays a centered spinner.

markdown
{{< 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.

Show toast
markdown
{{< 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 demonstration
markdown
{{< tooltip color="primary" title="Tooltip" href="#" >}}
    Tooltip demonstration
{{< /tooltip >}}
On this page
Follow me

Get updates about the latest Power Platform features