# Bootstrap features

This page will contain a display of various features from Bootstrap. They require some manual HTML tags. Note that not all Markdown parsers allow Markdown markup inside all HTML tags. In the case of ikiwiki, adding `markdown="1"` to `div` elements usually allows markup to be used inside them. For a full list of features provided by Bootstrap 4, go to http://v4-alpha.getbootstrap.com/getting-started/introduction/.

## Jumbotron

It's big and in your face.

You can still use Markdown syntax inside HTML blocks, if you are careful.

Button

## Labels Hi!

Span elements work inside Markdown headings.

## Cards

Put a border with soft round corners around your content.

## Card decks

These require some more work. You can use the `[[!img ]]` directive, but make sure to add `class="card-img-top"` or `class="card-img-bottom"` where appropriate. For images in cards to work properly, they need to have their width forced to 100% of their container. This is done in the `style.css` file that comes with ikistrap.

Another issue is that due to all the nested HTML tags, even with `markdown="1"`, Markdown markup does not get parsed anymore.

[[!img Error: Image::Magick is not installed]]

A lemon shark and his little friends are out for a swim.

Escape

[[!img Error: Image::Magick is not installed]]

Anemones look really nice and are much less dangerous than lemon sharks.

Admire

[[!img Error: Image::Magick is not installed]]

Sea stars are also less dangerous than lemon sharks, but they are slightly more dangerous than anemones, especially when stepped on.

Sidestep

## Card columns

These can be created by writing the outer card-columns `div` elements yourself, and using `[[!inline ]]` with `template="simplecard"` to generate the cards.

[[!inline Error: failed to process template simplecard.tmpl: template simplecard.tmpl not found ]]

## Carousel

These can be created by writing the outer two carousel `div` elements yourself, and using `[[!inline ]]` with `template="carouselpage"` to generate the carousel items.

[[!inline Error: failed to process template carouselpage.tmpl: template carouselpage.tmpl not found ]]
Previous Next

If you only want to show images, use `template="carouselimage"`, and select your images directly with the `pages` parameter.

[[!inline Error: failed to process template carouselimage.tmpl: template carouselimage.tmpl not found ]]
Previous Next

## Progress bars

Ikistrap also provides a progress directive which works in the same way as the progress plugin, but it also allows an extra class to be specified to change the style per bar.

0%
33%
66%

## Other stuff

Goes here.

Created Mon Aug 26 01:25:57 2024. Edited Mon Aug 26 01:25:57 2024.