Markdown to Bootstrap

Markdown to Bootstrap Examples

Discover how some simple markdown can be converted into beautiful Bootstrap components.


You can find a stub implementation of this via a Pandoc and Lua filter tool.

Check the projet on Github

Quiz

Click start to get to first question. Click the correct answer to see the feedback : "Carousel" in Q1, "Python" in Q2.

It should simply be created from this code

::: quiz carousel

# 2 most frequent questions
Earn points for the exam


# Which bootstrap component can be swyped?
* Carousel
  * Perfect! yes the carousel has controls to swype on mobile and click on desktop.
* Accordion
* Alert
* Carddeck

# Which language takes indentation very seriously?
* javascript
* Php
* Python
  * yes in Python indenting code is very important


:::

Jumbotron

This is a big header

This is what a jumbotron (bootrap4) or a header (bs5) looks like.


It should be created automatically from the markdown code below.

It should be simply created from this code:

::: jumbotron
# This is a big header
This is what a jumbotron (bootrap4) or a header (bs5) looks like.

It should be created automatically from the markdown code below.
:::


ALERTS

It should be created from this code:


::: danger
This is a danger alert
:::


It should be created from this code:


::: info
This is an info alert
:::


CARDS

text of the header
a title in the body

Paragraph one of the body

Paragraph two of the body

It should be simply created from this code:


::: card

::: header (optional)
text of the header
:::

# a title in the body

Paragraph one of the body
Paragraph two of the body

::: footer (optional)
text of the footer
:::

:::


CAROUSEL

Should be created from


::: carousel 

# First slide label
Some representative placeholder content for the first slide.

# Second slide label
Some representative placeholder content for the second slide.

# Third slide label
Some representative placeholder content for the third slide.

:::


ACCORDION

Click on each drawer title to unfold the level of the accordion.

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.


Should be created from:


::: accordion

# Accordion Item #1
First toggle content

# Accordion Item #2
Second toggle content

# Accordion Item #3
Third toggle content

:::


TABS

Click on each "tab" to see the content of the card change


Should be created from


::: tabs

# Linux
## Support for Linux users
Create a shell script

# Mac
## Support for Mac users
Do it with Cmd.

# Windows
## Support for windows users
Do it with Ctrl

:::


Buttons

Links are converted to buttons by default Pandoc repository
Is created from the code

[Pandoc repository](https://github.com/pandoc)

Pandoc repository
Is created from the code

[Pandoc repository](https://github.com/pandoc){.success}


Embeds

YouTube video are turned into embed [Moodle Bootstrap Design](https://www.youtube.com/watch?v=Uz7XbIxHf-4)

Icons

Should be created from:

{.bi-bootstrap}
Or even:

(.bi-bootstrap)
But currently requires the full syntax to work:


[]{.bi .bi-bootstrap}