Feature Includes

Lesson Template contains a series of Liquid “includes” to simplify adding basic Bootstrap 5 components to your Markdown content. The includes can be found in the “_includes” folder of your project. Check the comments at the top of each include file for details about options and how to use them.

Examples below demonstrate the includes with sample include code followed by the rendered feature:

Figures

• put any images you want to use in the “images” folder, or use a full URL to external images.
• in the markdown file where you want the image to appear, use the “figure.html” include on its own line, following the pattern: {% include figure.html img="my-cat.jpg" alt="cat" caption="My cat" width="50%" %}
• figures will be centered, and can optionally be given a caption and percentage width.

Include code:

{% include figure.html img="uidaho-workshop.jpg" alt="workshop scene" caption="Library workshops!" width="75%" %}

Becomes:

Alerts

Include code:

{% include alert.html text="This is a Bootstrap [Alert](https://getbootstrap.com/docs/5.1/components/alerts/)" align="center" color="success" %}

Becomes:

Link Buttons

Include code:

{% include button.html text="Bootstrap Docs" link="https://getbootstrap.com/docs/5.1/components/buttons/" color="info" %}

Becomes:

Bootstrap Docs

Cards

Include code:

{% capture text %}
- Use a Liquid capture to create the text.
- Text can be formatted using markdown.
- Card image cap, header, and title are optional features.
- It magically becomes a [Bootstrap Card](https://getbootstrap.com/docs/5.1/components/card/).
{% endcapture %}
{% include card.html text=text header="Example Card" title="Title example" img="uidaho-workshop.jpg" %}

Becomes:

Example Card

Title example

• Use a Liquid capture to create the text.
• Text can be formatted using markdown.
• Card image cap, header, and title are optional features.
• It magically becomes a Bootstrap Card.

Accordion

Include code:

{% include accordion.html title1="Example section" text1=example1 title2="Section two" text2=example2 title3="Section three" text3=example3 %}

Becomes:

Modal

Include code:

{% include modal.html button="Try Me" color="success" title="Example Modal" text="This is a modal, with little text." %}

Becomes:

YouTube Embed

Include code:

{% include video-embed.html youtubeid="moJgWrD6dwg" caption="Example video" %}

Becomes:

Jumbotron

Include code:

{% include jumbotron.html heading="Jumbotron Include" text="Paragraph content goes here." button-text="Learn more" button-color="outline-primary" button-link="https://github.com/evanwill/workshop-template-b" border=true %}

Becomes:

Question

Include code:

{% include question.html header=Example Question" text="Question text goes here?" solution="The answer is hidden until user clicks." %}

Becomes: