Typography

Color Class for Text

For text colors we added some built in class as like .yellow-color,.blue-color,.red-color etc.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Etiam porta sem malesuada ultricies vehicula.

<p; class="yellow-color">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p><p; class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p><p; class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p><p; class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p><p; class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p><p; class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p><p; class="text-white">Etiam porta sem malesuada ultricies vehicula.</p>

Emphasis

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>

Headings

All HTML headings, <h1> through <h6>, are available..h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

h1. Car Rent heading

h2. Car Rent heading

h3. Car Rent heading

h4. Car Rent heading

h5. Car Rent heading
h6. Car Rent heading
<h1>h1. Car Rent heading</h1><h2>h2. Car Rent heading</h2><h3>h3. Car Rent heading</h3><h4>h4. Car Rent heading</h4><h5>h5. Car Rent heading</h5><h6>h6. Car Rent heading</h6><!-- Or use class --><p class="h1">h1. Car Rent heading</p><p class="h2">h2. Car Rent heading</p><p class="h3">h3. Car Rent heading</p><p class="h4">h4. Car Rent heading</p><p class="h5">h5. Car Rent heading</p><p class="h6">h6. Car Rent heading</p>

Line

Use <hr> to create line


<hr>

Lists

Add for <ul> class .list-unstyled to create unstyle list
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
class="list-unstyled">
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  • Add for <ul> class .list-inline to create inline list
    • Lorem ipsum
    • Phasellus iaculis
    • Nulla volutpat
     class="list-inline">
       class="list-inline-item">Lorem ipsum
       class="list-inline-item">Phasellus iaculis
       class="list-inline-item">Nulla volutpat
    
    Example for list with description
    Description lists
    A description list is perfect for defining terms.
    Euismod
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
    Donec id elit non mi porta gravida at eget metus.
    Malesuada porta
    Etiam porta sem malesuada magna mollis euismod.
    Truncated term is truncated
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    Nesting
    Nested definition list
    Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
    <dl class="row"> <dt class="col-sm-3">Description lists</dt> <dd class="col-sm-9">A description list is perfect for defining terms.</dd> <dt class="col-sm-3">Euismod</dt> <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd> <dt class="col-sm-3">Malesuada porta</dt> <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd> <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt> <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> <dt class="col-sm-3">Nesting</dt> <dd class="col-sm-9"> <dl class="row"> <dt class="col-sm-4">Nested definition list</dt> <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd> </dl> </dd></dl>