Text

Example

preview

Code-example

<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>
<div>
  <h1>Text</h1>
  <div>
    <div>
      <h3>Large and Small</h3>
      <p class="text-large">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.</p>
      <p>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.</p>
      <p class="text-small">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.</p>
    </div>
    <div> 
      <h3>Style</h3>
      <ul>
        <li class="text-light">text-light</li>
        <li class="text-lighter">text-lighter</li>
        <li class="text-normal">text-normal</li>
        <li class="text-bolder">text-bolder</li>
        <li class="text-bold">text-bold</li>
        <li class="text-italic">text-italic</li>
        <li class="text-lowercase">text-lowercase</li>
        <li class="text-uppercase">text-uppercase</li>
        <li class="text-capitalize">text-capitalize</li>
      </ul>
      <h3>Colors</h3>
      <ul>
        <li class="text-muted">text-muted <a class="text-muted" href="#">Link</a></li>
        <li class="text-primary">text-primary <a class="text-primary" href="#">Link</a></li>
        <li class="text-secondary">text-secondary <a class="text-secondary" href="#">Link</a></li>
        <li class="text-success">text-success <a class="text-success" href="#">Link</a></li>
        <li class="text-danger">text-danger <a class="text-danger" href="#">Link</a></li>
      </ul>
    </div>
  </div>
  <h2>Text Overflow</h2>
</div>
<div>
  <div>
    <h3 class="h4">Truncate</h3>
    <p class="text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div>
    <h3 class="h4">Break</h3>
    <p class="text-break">Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.</p>
  </div>
  <div>
    <h3 class="h4">Default</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <h2>Alignment</h2>
  <div>
    <div class="text-center">
      <h2 class="h3">center</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h2 class="h3">default</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="text-right">
      <h2 class="h3">right</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

Text

Text Styling will be defined over HTML-classes. To achieve text-styling you can wrap the text with the specific html-class.

---

Available classes

Font size

• text-large increases font-size
• text-small decreases font-size

Font style

• text-light sets font-weight to light
• text-lighter sets font-weight to lighter
• text-normal sets font-weight to normal
• text-bolder sets font-weight to bolder
• text-bold sets font-weight to bold
• text-italic sets font-style italic

Text transforms

• text-lowercase sets text in lowercase
• text-uppercase sets text in uppercase
• text-capitalize sets first letter of a word in uppercase

Font color

• text-muted color gray
• text-primary color blue
• text-secondary color orange
• text-success color green
• text-danger color red

Text truncation

• text-truncate truncates the wraped text into one line
• text-break breaks the line even within words

Text alignment

• text-center centers the text
• text-right aligns the text to the right