Docs: Improve Text Alignment Example

[coliff]

Description

On the Text alignment example all the text is left-aligned to start with and doesn't change on any viewport change. I think it makes much more sense for it to end-aligned on certain breakpoints.

I also added a missing text-xxl-end class :-)

I didn't use dashes between the breakpoint size names to match the Breakpoints docs (https://getbootstrap.com/docs/5.3/layout/breakpoints/#available-breakpoints)

Motivation & Context

Improved UX/DX for users/developers

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-38872--twbs-bootstrap.netlify.app/docs/5.3/utilities/text/#text-alignment

Related issues