Additive elements

Use additive element helpers when you want ordinary HTML elements with BCL attribute composition for Bootstrap classes, spacing, colors, borders, layout, and other shared utilities.

How it works

Additive helpers render normal markup. The tag name selects the default HTML element, while the helper adds composed attributes such as spacing, display, color, border, sizing, and grid classes.

Use base-tag-name when the helper alias is convenient but the rendered HTML element needs to be different.

Available tags

Helper Default rendered element Notes
bs-div div General block container.
bs div Short generic alias.
bs-p p Paragraph text.
bs-span span Inline text.
bs-small small Small print or secondary inline text.
bs-figure figure Semantic figure container.
bs-blockquote blockquote Adds Bootstrap's blockquote class.
bs-blockquote-footer figcaption Adds Bootstrap's blockquote-footer class.
bs-figcaption figcaption Semantic figure caption.

Basic composition

Use the helper tag that matches the element you want, then add Bootstrap utility attributes directly on that helper.

This paragraph is rendered by bs-p.

Inline status Rendered with bs-small.
aspnet 

<bs-div padding="Default3" borders="All" rounded="Default3" body-bg-color="Tertiary">
    <bs-p bottom-margin="Default2">This paragraph is rendered by <code>bs-p</code>.</bs-p>
    <bs-span text-color="Success" font-weight="Bold">Inline status</bs-span>
    <bs-small start-margin="Default2" body-text-color="Secondary">Rendered with <code>bs-small</code>.</bs-small>
</bs-div>

Overriding the base tag

Use base-tag-name to keep the additive helper behavior while rendering a different element.

Section rendered from bs-div

The helper still composes attributes, but the emitted element is section.

aspnet 

<bs-div base-tag-name="section" padding="Default3" borders="All" rounded="Default3" body-bg-color="Tertiary">
    <bs-heading heading-level="Three" heading-style-level="Six">Section rendered from bs-div</bs-heading>
    <bs-p bottom-margin="None">The helper still composes attributes, but the emitted element is <code>section</code>.</bs-p>
</bs-div>

Blockquotes

Blockquote aliases add the Bootstrap classes expected by Bootstrap's quote pattern.

Additive helpers keep semantic markup close to the Bootstrap utility attributes that shape it.

BCL additive element sample
aspnet 

<bs-figure>
    <bs-blockquote>
        <bs-p>Additive helpers keep semantic markup close to the Bootstrap utility attributes that shape it.</bs-p>
    </bs-blockquote>
    <bs-blockquote-footer>BCL additive element sample</bs-blockquote-footer>
</bs-figure>

Generic alias

Use bs when no specific alias reads better. Pair it with base-tag-name for small semantic elements.

aspnet 

<bs base-tag-name="aside" padding="Default3" borders="Start" border-width="Default4" body-bg-color="Tertiary">
    <bs-p bottom-margin="None">This aside uses the generic <code>bs</code> alias.</bs-p>
</bs>