All components defined in Blazor Bootstrap support a common set of shorthand functionality for defining spacing for components as margins and paddings.

Bootstrap defines 7 different values for different sizes of spacing, as you can see from the Bootstrap documentation.

These values are defined in the Spacing enumeration. The enumeration defines the following constants.

• Auto
• Zero
• One
• Two
• Three
• Four
• Five

This enumeration is used in the Margin, MarginTop, MarginRight, MarginBottom, MarginLeft, MarginX, MarginY, Padding, PaddingTop, PaddingRight, PaddingBottom, PaddingLeft, PaddingX and PaddingY parameters. Since they are all defined in the BootstrapComponentBase, they are available to all components defined by Blazor Bootstrap, since all Blazor Bootstrap components inherit from this base class, either directly or indirectly.

Use the MarginX property to center align an element.

<Span MaringX="Spacing.Auto">
    This text is centered.
</Span>

You can also use the same mechanism to right-align an element.

<Span MaringLeft="Spacing.Auto">
    This text is right aligned.
</Span>