Text Alignments

For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

Example: Text Start

Text-start on all viewport sizes.

Text-start on viewports small or wider.

Text-start on viewports medium or wider.

Text-start on viewports large or wider.

Text-start on viewports extra-large or wider.

Copy

                                    
                                        <p class="text-start">Text</p>

                                        <p class="text-sm-start">Text</p>

                                        <p class="text-md-start">Text</p>

                                        <p class="text-lg-start">Text</p>

                                        <p class="text-xl-start">Text</p>

Example: Text Center

Text-center on all viewport sizes.

Text-center on viewports small or wider.

Text-center on viewports medium or wider.

Text-center on viewports large or wider.

Text-center on viewports extra-large or wider.

Copy

                                    
                                        <p class="text-center">Text</p>

                                        <p class="text-sm-center">Text</p>

                                        <p class="text-md-center">Text</p>

                                        <p class="text-lg-center">Text</p>

                                        <p class="text-xl-center">Text</p>

Example: Text End

Text-end on all viewport sizes.

Text-end on viewports small or wider.

Text-end on viewports medium or wider.

Text-end on viewports large or wider.

Text-end on viewports extra-large or wider.

Copy

                                    
                                        <p class="text-end">Text</p>

                                        <p class="text-sm-end">Text</p>

                                        <p class="text-md-end">Text</p>

                                        <p class="text-lg-end">Text</p>

                                        <p class="text-xl-end">Text</p>

Example: Text Justify

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Copy

                                    
                                        <p class="text-justify">Text</p>