Custom element styles

How to add custom styles like alerts, screenshot captions, and more

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 }

Cat photo
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!

On this page

    powered by