Using Drop Caps in your content

Drop caps are usually used as a decorative element at the beginning of a page or paragraph, but can sometimes be used as a form of a unordered or ordered list style. For Celestial, the drop cap styles are:

The code for using drop caps is:

<div class="dropcap dropcap-grey">1</div>

For Green:

 <div class="dropcap dropcap-green">1</div>

For Blue:

<div class="dropcap dropcap-blue">1</div>

For Yellow:

<div class="dropcap dropcap-yellow">1</div>

For Red:

<div class="dropcap dropcap-red">1</div>

Using Drop Caps with In-Line Columns

You can use drop caps creatively like the screenshot above. The code to get the columns with the drop caps looks like this:

<div class="row-fluid">
<div class="span4">
<div class="dropcap dropcap-grey">1</div><h3 class="dropcap-indent"><strong>Span</strong> 4</h3>
<p class="dropcap-indent">Your content would go here.</p></div>
<div class="span4">
<div class="dropcap dropcap-green">2</div><h3 class="dropcap-indent"><strong>Span</strong> 4</h3>
<p class="dropcap-indent">Your content would go here.</p></div>
<div class="span4">
<div class="dropcap dropcap-blue">3</div><h3 class="dropcap-indent"><strong>Span</strong> 4</h3>
<p class="dropcap-indent">Your content would go here.</p></div>
</div>