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.

Nulla facilisi. Nunc volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sit amet orci vel mauris blandit vehicula. Nullam quis enim. Integer dignissim viverra velit. Curabitur in odio. In hac habitasse platea dictumst. Ut consequat, tellus eu volutpat varius, justo orci elementum dolor, sed imperdiet nulla tellus ut diam. Vestibulum ipsum ante, malesuada quis, tempus ac, placerat sit amet, elit.

Donec dapibus orci sit amet elit. Maecenas rutrum ultrices lectus. Aliquam suscipit, lacus a iaculis adipiscing, eros orci pellentesque nisl, non pharetra dolor urna nec dolor. Integer cursus dolor vel magna. Integer ultrices feugiat sem. Proin nec nibh. Duis eu dui quis nunc sagittis lobortis. Fusce pharetra, enim ut sodales luctus, lectus arcu rhoncus purus, in fringilla augue elit vel lacus. In hac habitasse platea dictumst. Aliquam erat volutpat. Fusce iaculis elit id tellus. Ut accumsan malesuada turpis. Suspendisse potenti. Vestibulum lacus augue, lobortis mattis, laoreet in, varius at, nisi. Nunc gravida. Phasellus faucibus. In hac habitasse platea dictumst. Integer tempor lacus eget lectus. Praesent fringilla augue fringilla dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna.

Sed eget turpis a pede tempor malesuada. Vivamus quis mi at leo pulvinar hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque aliquet lacus vitae pede. Nullam mollis dolor ac nisi. Phasellus sit amet urna. Praesent pellentesque sapien sed lacus. Donec lacinia odio in odio. In sit amet elit. Maecenas gravida interdum urna. Integer pretium, arcu vitae imperdiet facilisis, elit tellus tempor nisi, vel feugiat ante velit sit amet mauris. Vivamus arcu. Integer pharetra magna ac lacus. Aliquam vitae sapien in nibh vehicula auctor. Suspendisse leo mauris, pulvinar sed, tempor et, consequat ac, lacus. Proin velit. Nulla semper lobortis mauris. Duis urna erat, ornare et, imperdiet eu, suscipit sit amet, massa. Nulla nulla nisi, pellentesque at, egestas quis, fringilla eu, diam.

Donec semper, sem nec tristique tempus, justo neque commodo nisl, ut gravida sem tellus suscipit nunc. Aliquam erat volutpat. Ut tincidunt pretium elit. Aliquam pulvinar. Nulla cursus. Suspendisse potenti. Etiam condimentum hendrerit felis. Duis iaculis aliquam enim. Donec dignissim augue vitae orci. Curabitur luctus felis a metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius neque at enim. Suspendisse massa nulla, viverra in, bibendum vitae, tempor quis, lorem.

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.

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

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.