Text Alignment Classes


You can use these text alignment classes to align and format your text content.

ClassDescriptionTest
.text-startAlign the text to the left.Example
.text-centerAlign the text to the center.Example
.text-endAlign the text to the right.Example
.text-wrapWrap the overflowing text.Example
.text-nowrapPrevent text from wrapping.Example
.text-truncateTruncate the text with an ellipsis.Example
.text-breakBreak the long words to prevent overflow.Example
.text-lowercaseTransform the text to lowercase.Example
.text-uppercaseTransform the text to uppercase.Example
.text-capitalizeCapitalize the first letter of each word.Example
.fw-boldSet the font-weight of an element to bold.Example
.fw-bolderSet the font-weight of an element to bolder (relative to the parent).Example
.fw-normalSet the font-weight of an element to normal.Example
.fw-lightSet the light font-weight for an element.Example
.fw-lighterSet the lighter font-weight for an element (relative to the parent).Example
.fst-italicSet the font-style of an element to italic.Example
.fst-normalSet the font-style of an element to normal.Example
.font-monospaceSet the font-family of an element to monospace font (fixed-width)Example
.text-resetReset the color of a text or link (inherits the color from its parent).Example
.text-decoration-noneRemove the text decoration such as underline from a text.Example
.text-decoration-underlineAdd underline to text.Example
.text-decoration-line-throughAdd line through the middle of text.Example

Border Classes

You can use the border utility classes to quickly style the border and border-radius of an element. They are very useful for images, buttons, or any other element.

ClassDescriptionTest
.borderAdd a border on all sides of an element.Example
.border-topAdd a border on the top side of an element.Example
.border-endAdd a border on the right side of an element.Example
.border-bottomAdd a border on the bottom side of an element.Example
.border-startAdd a border on the left side of an element.Example
.border-0Remove the border from all sides of an element.Example
.border-top-0Remove the border from top side of an element.Example
.border-end-0Remove the border from right side of an element.Example
.border-bottom-0Remove the border from bottom side of an element.Example
.border-start-0Remove the border from left side of an element.Example
.border-primaryChange the border-color of an element to blue (#007bff).Example
.border-secondaryChange the border-color of an element to grey (#6c757d).Example
.border-successChange the border-color of an element to green (#28a745).Example
.border-dangerChange the border-color of an element to red (#dc3545).Example
.border-warningChange the border-color of an element to yellow (#ffc107).Example
.border-infoChange the border-color of an element to teal (#17a2b8).Example
.border-lightChange the border-color of an element to very light grey (#f8f9fa).Example
.border-darkChange the border-color of an element to dark grey (#343a40).Example
.border-whiteChange the border-color of an element to white (#fff).Example
.roundedRound all corners of an element.Example
.rounded-topRound top-left and top-right corners of an element.Example
.rounded-endRound top-right and bottom-right corners of an element.Example
.rounded-bottomRound bottom-left and bottom-right corners of an element.Example
.rounded-startRound top-left and bottom-left corners of an element.Example
.rounded-circleRound an element into circle shape.Example
.rounded-pillRound an element into pill shape.Example
.rounded-0Remove round corners from an element.Example
.rounded-1Set border-radius of 0.2rem for an element.Example
.rounded-2Set border-radius of 0.25rem for an element.Example
.rounded-3Set border-radius of 0.3rem for an element.Example

Leave a Reply

Your email address will not be published. Required fields are marked *