Feature-request: Use bootstrap alerts for alert blocks #663

New Issue

claunia · 2026-01-29T14:42:27Z

claunia commented

2026-01-29 14:42:27 +00:00

Originally created by @Abrynos on GitHub (Mar 15, 2024).

In case bootstrap is used, alert-blocks should utilize the corresponding CSS classes.

Examples:

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

Will look like this:

Or using the dark theme:

Thank you for considering the inclusion of this feature. I'll be happy to help.

Originally created by @Abrynos on GitHub (Mar 15, 2024). In case bootstrap is used, alert-blocks should utilize the corresponding CSS classes. Examples: ```html <div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert—check it out! </div> <div class="alert alert-success" role="alert"> A simple success alert—check it out! </div> <div class="alert alert-danger" role="alert"> A simple danger alert—check it out! </div> <div class="alert alert-warning" role="alert"> A simple warning alert—check it out! </div> <div class="alert alert-info" role="alert"> A simple info alert—check it out! </div> <div class="alert alert-light" role="alert"> A simple light alert—check it out! </div> <div class="alert alert-dark" role="alert"> A simple dark alert—check it out! </div> ``` Will look like this: ![image](https://github.com/xoofx/markdig/assets/6608231/9982f694-584d-4d59-b887-a3b11e51c168) Or using the dark theme: ![image](https://github.com/xoofx/markdig/assets/6608231/1c512026-5383-42fa-80e2-1eba01351cc9) --- Thank you for considering the inclusion of this feature. I'll be happy to help.

claunia added the enhancement PR Welcome! labels 2026-01-29 14:42:27 +00:00

claunia closed this issue

2026-01-29 14:42:28 +00:00

claunia commented

2026-01-29 14:42:29 +00:00

@xoofx commented on GitHub (Mar 15, 2024):

There is an existing and rudimentary extension for Boostrap that can be extended.

@xoofx commented on GitHub (Mar 15, 2024): There is an existing and rudimentary [extension for Boostrap](https://github.com/xoofx/markdig/blob/master/src/Markdig/Extensions/Bootstrap/BootstrapExtension.cs) that can be extended.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/markdig#663