Custom element styles

DuckDocs is built using the Tabler UI library, which is built on top of Bootstrap 5. This opens up a wide range of styles you can use for text and content in your site.

We also use the Kramdown Markdown parser library which adds a range of extensions to our Markdown syntax.

Here are some common styles and how to achieve them.

Adding A CSS Classes to any text

We can add any class we like to a paragraph of text, an image, or any other element in a DuckDocs site.

This paragraph is red
{: .text-red }

This paragraph is red

Alerts

An alert is great for drawing attention to something important. Tabler has a range of default alert styles you can use.

**NOTE**: This section is important
{: .alert .alert-info }

NOTE: This section is important

Image Captions

A nicely styled image caption can be accomplished in a similar way using some simple css helpers.

![Cat photo](https://app.duckdocs.com/image/123)
A playful cat was watching me
{: .text-center .small .text-muted }

A playful cat was watching me

Buttons

Make a link into a button, this is perfect for linking to places like a sign up page or similar.

Notice the class specifier needs to go on the same line, otherwise you’ll add the btn class to the surrounding paragraph.

[Sign up for an account!](https://path/to/sign/up){: .btn .btn-success }

Sign up for an account!