Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos voluptatem sequi nesciunt.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos voluptatem sequi nesciunt.
Section Heading Subtitle
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
46px - Roboto, Regular
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
36px - Roboto, Regular
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
28px - Roboto, Regular
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
20px - Roboto, Regular
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
16px - Roboto, Regular
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
14px - Roboto, Regular
Single & Double Decoration Lines
Add the class title-line to your heading tag div container for a centered title with side borders
<div class="title-line"> <h3>Your Title</h3> </div>
Add the class title-line double-line to your heading tag container for a centered title with double borders
<div class="title-line double-line"> <h3>Your Title</h3> </div>
Add the class line-color for colored borders
<div class="title-line single-line line-color"><h3>Your Title</h3></div>
<div class="title-line double-line line-color"><h3>Your Title</h3></div>
Add the class title-line-right title-right to your heading tag container for a right border title
<div class="title-line-right title-right"> <h3>Your Title</h3> </div>
Add the class title-line-right title-double-right to your heading tag container for a double right border title
<div class="title-line-right title-double-right"> <h3>Your Title</h3> </div>
Add the class title-line-left title-left to your heading tag container for a left border title
<div class="title-line-left title-left"> <h3>Your Title</h3> </div>
<div class="title-line-left title-double-left"> <h3>Your Title</h3> </div>
Add the class line-color for a border color title
<div class="title-line-right title-right line-color"> <h3>Your Title</h3> </div>
Sed ut perspiciatis bold text natus error voluptatem sit accusantium doloremque laudantium, superscript text totam rem aperiam, illo inventore veritatis et quasi architecto dicta subscript text sunt explicabo. Nemo enim voluptatem sit strikethrough text aspernatur aut odit aut fugit, sed quia consequuntur magni nesciunt. Neque porro quisquam est, qui dolor sit amet, consectetur, emphasized text, sed quia non numquam eius modi underlined text ut labore voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem italic text laboriosam, nisi ut aliquid ex ea this is a link.
<p>Sed ut perspiciatis <b>bold text</b> natus error voluptatem sit accusantium doloremque laudantium, <sup>superscript text</sup> totam rem aperiam, illo inventore veritatis et quasi architecto dicta <sub>subscript text</sub> sunt explicabo. Nemo enim voluptatem sit <strike>strikethrough text</strike> aspernatur aut odit aut fugit, sed quia consequuntur magni nesciunt. Neque porro quisquam est, qui dolor sit amet, consectetur, <em>emphasized text</em>, sed quia non numquam eius modi <u>underlined text</u> ut labore voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem <i>italic text</i> laboriosam, nisi ut aliquid ex ea <a href="#">this is a link</a>.</p>
Using the first-letter pseudo element
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
<p class="dropcap">Lorem ipsum dolor sit amet...</p>
Using a custom span class for first letter
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
<p><span class="geniux-dropcap dropcap-square">L</span>orem ipsum dolor sit amet...</p>
Dropcap Circle Style
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
<p><span class="geniux-dropcap dropcap-circle">L</span>orem ipsum dolor sit amet...</p>
Using the highlight class, you can create text with highlighting effects
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat.
<p class="dropcap">Lorem ipsum dolor sit amet, <span class="highlight">consectetur</span> adipisicing elit, sed do eiusmod tempor ut labore et dolore <span class="highlight" style="background-color:#999; color:#fff">incididunt</span>magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex <span class="highlight" style="background-color:#d55167; color:#fff">commodo consequat.</span></p>
Create small text pop up that appears when user places the mouse pointer over links or buttons to provide additional information about the element being hovered.
<ul class="list-inline"> <li><a href="#" data-toggle="tooltip" title="Default tooltip">Tooltip</a></li> <li><a href="#" data-toggle="tooltip" title="Another tooltip">Another tooltip</a></li> <li><a href="#" data-toggle="tooltip" title="A much longer tooltip to demonstrate the max-width of the Bootstrap tooltip.">Large tooltip</a></li> <li><a href="#" data-toggle="tooltip" data-html="true" title="<img src='assets/images/gallery/gall-1.jpg'>Image description">Tooltip with image</a></li> </ul>
The blockquote element is used to present content from another source:
Consectetur adipisicing 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.
<blockquote> <p class="m-b-40">Consectetur adipisicing 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.</p><p class="author"> <a href="#" target="_blank"><i class="fa fa-user" aria-hidden="true"></i> Mike Ross</a> </p> </blockquote>
To show the quote on the right use the class .blockquote-reverse:
Consectetur adipisicing 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.
<blockquote class="blockquote-reverse"> <p>Consectetur adipisicing 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.</p> <p class="author"> <a href="#" target="_blank"><i class="fa fa-user" aria-hidden="true"></i> Mike Ross</a> </p> </blockquote>