Text Utilities

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

Headings

This is H1 header

This is H2 header

This is H3 header

This is H4 header

This is H5 header
                
                    <h1>This is H1 header</h1>
                    <h2>This is H2 header</h2>
                    <h3>This is H3 header</h3>
                    <h4>This is H4 header</h4>
                    <h5>This is H5 header</h5>
                
            

Paragraph text

This is P1 paragragh

This is P3 paragragh

This is P4 paragragh

This is P5 paragragh

This is P6 paragragh

                
                    <p class="p1">This is P1 paragragh</p>
                    <p class="p2">This is P3 paragragh</p>
                    <p class="p3">This is P4 paragragh</p>
                    <p class="p4">This is P5 paragragh</p>
                    <p class="p5">This is P6 paragragh</p>
                
            

Small text

This is small text
                
                    <small>This is small text</small>
                
            

Grey text

This is grey text

                
                    <p class="p3 text-grey">This is grey text</p>
                
            

Centered text

This is centered text

                
                    <h3 class="text-center">This is centered text</h3>
                
            

Font weight

This text has 900 font weight

This text has 700 font weight

This text has 600 font weight

This text has 400 font weight

This text has 300 font weight

                
                    <div class="p3 font-weight-black">This text has 900 font weight</p>
                    <div class="p3 font-weight-bold">This text has 700 font weight</p>
                    <div class="p3 font-weight-semibold">This text has 600 font weight</p>
                    <div class="p3 font-weight-regular">This text has 400 font weight</p>
                    <div class="p3 font-weight-light">This text has 300 font weight</p>