reference bootstrap component in markdown

Question

We have a Jekyll site with Liquid, Kramdown, and Bootstrap. I want to start using Bootstrap nav tabs in the Markdown pages. https://getbootstrap.com/docs/4.0/components/navs/#tabs Also discussed here https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior

The problem is that this will introduce a bunch of HTML into our Markdown sources and diminish their readability.

In the past, when we have encountered situations like this, we have been able to often use tags like [link](url){:target="_blank"}. This appears to be due to Kramdown. I also understand that it is possible to reference CSS in a similar fashion, such as like so {:.CSSClass}. Again, due to Kramdown.

My question is, is there a way to do something similar with these navs from Bootstrap? I would like to be able to do something like this:

{{< tabs >}}
{{% tab name="Choice A" %}}
Contents of Choice A tab
{{% /tab %}}
{{% tab name="Choice B" %}}
Contents of Choice B tab
{{% /tab %}}
{{< /tabs >}}

But this is something that I saw on a Hugo site.

Answer 1

You can use includes, just like that:

{% include tabstart.html title="choice a" %}

Content of your tab

{% include tabend.html %}