LOADING

Back to elements

avatar

Headings

All HTML headings, <h1> through <h6>, are available.

i am heading 1

i am heading 2

i am heading 3

i am heading 4

i am heading 5
i am heading 6
<h1> i am heading 1 </h1>
<h2> i am heading 2 </h2>
<h3> i am heading 3 </h3>
<h4> i am heading 4 </h4>
<h5> i am heading 5 </h5>
<h6> i am heading 6 </h6>

Customizing responsive font size by using class .font-xxl to .font-sm

i am heading 1

i am heading 2

i am heading 3

i am heading 4

i am heading 5
i am heading 6
<h1 class="font-xxl" > i am heading 1 </h1>

<h2 class="font-xl" > i am heading 2 </h2>
<h3 class="font-lg" > i am heading 3 </h3>
<h4 class="font-md" > i am heading 4 </h4>
<h5 class="font-sm" > i am heading 5 </h5>
<h6 class="font-xs" > i am heading 6 </h6>

Opacity

There are diffrent opacity class .opacity-0 To .opacity-100

hello there is opacity 100

hello there is opacity 85

hello there is opacity 70

hello there is opacity 65

hello there is opacity 50

hello there is opacity 45

hello there is opacity 30

hello there is opacity 15

<p class="font-md opacity-100" > hello there is opacity 100 </p>
<p class="font-md opacity-85" > hello there is opacity 85 </p>
<p class="font-md opacity-70" > hello there is opacity 70 </p>
<p class="font-md opacity-65" > hello there is opacity 65 </p>
<p class="font-md opacity-50" > hello there is opacity 50 </p>
<p class="font-md opacity-45" > hello there is opacity 45 </p>
<p class="font-md opacity-30" > hello there is opacity 30 </p>
<p class="font-md opacity-15" > hello there is opacity 15 </p>

Text Color

You can give text color by using .text-* class

This is Primary text You can archive this adding .text-primary class

This is Secondary text You can archive this adding .text-secondary class

This is Success text You can archive this adding .text-success class

This is Info text You can archive this adding .text-info class

This is Warning text You can archive this adding .text-warning class

This is Danger text You can archive this adding .text-danger class

This is Dark text You can archive this adding .text-darkclass

This is Primary text You can archive this adding .text-muted class

<p class="text-primary">This is Primary text </p>
<p class="text-secondary">This is Secondary text </p>
<p class="text-success">This is Success text </p>
<p class="text-info">This is Info text </p>
<p class="text-warning">This is Warning text </p>
<p class="text-danger">This is Danger text </p>
<p class="text-dark">This is Dark text </p>
<p class="text-muted">This is Primary text </p>

Inline Text Elements

Styling for common inline HTML5 elements.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Alignment

Use text utilities as needed to change the alignment of your blockquote.

This is a left aligned text .text-start

This is a center aligned text .text-center

This is a right aligned text .text-end

<p class="text-start">This is a left aligned text .text-start</p>
<p class="text-center">This is a center aligned text .text-center</p>
<p class="text-end">This is a right aligned text .text-end</p>

Naming a source

The HTML spec requires that blockquote attribution be placed outside the <blockquote>. When providing attribution, wrap your <blockquote> in a <figure> and use a <figcaption> or a block level element (e.g., <p>) with the .blockquote-footer class. Be sure to wrap the name of the source work in <cite> as well.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Lists

Styling for common listing HTML5 elements

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>
    Nulla volutpat aliquam velit
       <ol>
         <li>Phasellus iaculis neque</li>
         <li>Purus sodales ultricies</li>
         <li>Vestibulum laoreet porttitor sem</li>
         <li>Ac tristique libero volutpat at</li>
      </ol>  
    </li>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
</ul>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li><i class="me-2" data-feather="chevrons-right"></i>Lorem ipsum dolor sit amet</li>
    <li><i class="me-2" data-feather="chevrons-right"></i>Lorem ipsum dolor sit amet</li>
    <li><i class="me-2" data-feather="chevrons-right"></i>Lorem ipsum dolor sit amet</li>
    <li><i class="me-2" data-feather="chevrons-right"></i>Lorem ipsum dolor sit amet</li>
    <li><i class="me-2" data-feather="chevrons-right"></i>Lorem ipsum dolor sit amet</li>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
</ul>