• 1.
    [col_grid_wrap]
  • 2.
     
  • 3.
    [col_grid]
  • 4.
    [col_size class="col-4 typo-first-grid" padding="yes"]
  • 5.
    <h3 class="typo-title no-margin">Grid system</h3>
  • 6.
    <div class="code-explained">
  • 7.
     
  • 8.
    <a class="view-code btn btn-small btn-info" id="pop0" href="javascript:void();">Code explained</a>
  • 9.
    <div id="pop0_content" style="display: none;">
  • 10.
    <div class="popTitle">Grid system</div>
  • 11.
    <div class="popContent">
  • 12.
     
  • 13.
    The default DW Fixel grid system utilizes 4 columns. As this is a 4-column grid, you should always add up to 4 for each row.
  • 14.
    <pre class="prettyprint linenums">&lt;div class="grid-wrap"&gt;
  • 15.
      &lt;div class="col-grid"&gt;
  • 16.
        &lt;div class="col-1"&gt;.col-1&lt;/div&gt;
  • 17.
        &lt;div class="col-1"&gt;.col-1&lt;/div&gt;
  • 18.
        &lt;div class="col-1"&gt;.col-1&lt;/div&gt;
  • 19.
        &lt;div class="col-1"&gt;.col-1&lt;/div&gt;
  • 20.
      &lt;/div&gt;
  • 21.
      &lt;div class="col-grid"&gt;
  • 22.
        &lt;div class="col-3"&gt;.col-3&lt;/div&gt;
  • 23.
        &lt;div class="col-1"&gt;.col-1&lt;/div&gt;
  • 24.
      &lt;/div&gt;
  • 25.
    &lt;/div&gt;</pre>
  • 26.
    </div>
  • 27.
    </div>
  • 28.
    </div>
  • 29.
    [/col_size]
  • 30.
    [/col_grid]
  • 31.
     
  • 32.
    [col_grid]<br class="nc" />[col_size class="col-1 textcenter" padding="yes"].col-1[/col_size]
  • 33.
    [col_size class="col-1 textcenter" padding="yes"].col-1[/col_size]
  • 34.
    [col_size class="col-1 textcenter" padding="yes"].col-1[/col_size]
  • 35.
    [col_size class="col-1 textcenter" padding="yes"].col-1[/col_size]<br class="nc" />[/col_grid]
  • 36.
     
  • 37.
    [col_grid]
  • 38.
     
  • 39.
    [col_size class="col-2 textcenter" padding="yes"].col-2[/col_size]
  • 40.
    [col_size class="col-2 textcenter" padding="yes"].col-2[/col_size]
  • 41.
    [/col_grid]
  • 42.
     
  • 43.
    [col_grid]
  • 44.
     
  • 45.
    [col_size class="col-1 textcenter" padding="yes"].col-1[/col_size]
  • 46.
    [col_size class="col-2 textcenter" padding="yes"].col-2[/col_size]
  • 47.
    [col_size class="col-1 textcenter" padding="yes"].col-1[/col_size]
  • 48.
    [/col_grid]
  • 49.
     
  • 50.
    [col_grid]
  • 51.
     
  • 52.
    [col_size class="col-3 textcenter" padding="yes"].col-3[/col_size]
  • 53.
    [col_size class="col-1 textcenter" padding="yes"].col-1[/col_size]
  • 54.
    [/col_grid]
  • 55.
     
  • 56.
    [col_grid]
  • 57.
     
  • 58.
    [col_size class="col-4 textcenter" padding="yes"].col-4[/col_size]
  • 59.
     
  • 60.
    [/col_grid]
  • 61.
     
  • 62.
    [col_grid]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 63.
    <h3 class="typo-title">Headings</h3>
  • 64.
    <div class="code-explained">
  • 65.
     
  • 66.
    <a class="view-code btn btn-small btn-info" id="pop1" href="javascript:void();">Code explained</a>
  • 67.
    <div id="pop1_content" style="display: none;">
  • 68.
    <div class="popTitle">Headings</div>
  • 69.
    <div class="popContent">
  • 70.
     
  • 71.
    All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.
  • 72.
     
  • 73.
    </div>
  • 74.
    </div>
  • 75.
    </div>
  • 76.
    <h1>h1. Heading 1</h1>
  • 77.
    <h2>h2. Heading 2</h2>
  • 78.
    <h3>h3. Heading 3</h3>
  • 79.
    <h4>h4. Heading 4</h4>
  • 80.
    <h5>h5. Heading 5</h5>
  • 81.
    <h6>h6. Heading 6</h6>
  • 82.
    [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 83.
    <h3 class="typo-title">Alert Messages</h3>
  • 84.
    <!-- Code explained-->
  • 85.
    <div class="code-explained">
  • 86.
     
  • 87.
    <a class="view-code btn btn-small btn-info" id="pop2" href="javascript:void();">Code explained</a>
  • 88.
    <div id="pop2_content" style="display: none;">
  • 89.
    <div class="popTitle">Alert Messages</div>
  • 90.
    <div class="popContent">
  • 91.
     
  • 92.
    Display alert messages by using the follwing markup with <code>.alert-error</code>, <code>.alert-info</code>, <code>.alert-info</code> or <code>.alert-success</code> classes. To change the icon in the left of alert messages, you can add <code>.icon-NAME</code> class to span elements, more details about the icon-NAME at <a href="http://fortawesome.github.io/Font-Awesome/icons/">Font-Awesome</a>
  • 93.
    <pre class="prettyprint linenums">&lt;div class="alert alert-info fade in"&gt;
  • 94.
      &lt;a class="close" data-dismiss="alert" href="#"&gt;×&lt;/a&gt;
  • 95.
      &lt;span class="icon-info-sign"&gt; &lt;/span&gt;
  • 96.
      messages goes here...
  • 97.
    &lt;/div&gt;</pre>
  • 98.
    </div>
  • 99.
    </div>
  • 100.
    </div>
  • 101.
    <!-- // Code explained-->
  • 102.
    <div class="alert fade in"><a class="close" href="#" data-dismiss="alert">×</a>
  • 103.
    <span class="icon-exclamation-sign"> </span>
  • 104.
    General message. Your message goes here... Lorem ipsum dolor sit amet.</div>
  • 105.
    <div class="alert alert-error fade in"><a class="close" href="#" data-dismiss="alert">×</a>
  • 106.
    <span class="icon-warning-sign"> </span>
  • 107.
    Error message. Your message goes here... Lorem ipsum dolor sit amet.</div>
  • 108.
    <div class="alert alert-info fade in"><a class="close" href="#" data-dismiss="alert">×</a>
  • 109.
    <span class="icon-info-sign"> </span>
  • 110.
    Info message. Your message goes here... Lorem ipsum dolor sit amet.</div>
  • 111.
    <div class="alert alert-success fade in"><a class="close" href="#" data-dismiss="alert">×</a>
  • 112.
    <span class="icon-flag"> </span>
  • 113.
    Success message. Your message goes here... Lorem ipsum dolor sit amet.</div>
  • 114.
    [/col_size]<br class="nc" />[/col_grid]<br class="nc" />[col_grid]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 115.
    <h3 class="typo-title">HTML Styles</h3>
  • 116.
    <div class="code-explained">
  • 117.
     
  • 118.
    <a class="view-code btn btn-small btn-info" id="pop3" href="javascript:void();">Code explained</a>
  • 119.
    <div id="pop3_content" style="display: none;">
  • 120.
    <div class="popTitle">HTML Styles</div>
  • 121.
    <div class="popContent">
  • 122.
     
  • 123.
    Simple HTML Styles
  • 124.
    <pre class="prettyprint linenums">&lt;a href="#"&gt;...&lt;a&gt;
  • 125.
    &lt;span class="underline"&gt;...&lt;span&gt;
  • 126.
    &lt;span class="highlight"&gt;...&lt;span&gt;</pre>
  • 127.
    </div>
  • 128.
    </div>
  • 129.
    </div>
  • 130.
    <a href="#">This is text link</a> lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="underline">This is underlined text</span> morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. <span class="highlight">This is highlighted text</span> sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.
  • 131.
     
  • 132.
    [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 133.
    <h3 class="typo-title">Columns</h3>
  • 134.
    <!-- Code explained-->
  • 135.
    <div class="code-explained">
  • 136.
     
  • 137.
    <a class="view-code btn btn-small btn-info" id="pop4" href="javascript:void();">Code explained</a>
  • 138.
    <div id="pop4_content" style="display: none;">
  • 139.
    <div class="popTitle">Columns</div>
  • 140.
    <div class="popContent">
  • 141.
     
  • 142.
    For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
  • 143.
    <pre class="prettyprint linenums">&lt;div class="row"&gt;
  • 144.
      &lt;div class="span4"&gt;...&lt;/div&gt;
  • 145.
      &lt;div class="span8"&gt;...&lt;/div&gt;
  • 146.
    &lt;/div&gt;</pre>
  • 147.
    </div>
  • 148.
    </div>
  • 149.
    </div>
  • 150.
    <!-- // Code explained-->
  • 151.
    <div class="bs-docs-grid">
  • 152.
    <div class="row-fluid show-grid">
  • 153.
    <div class="span1">1</div>
  • 154.
    <div class="span1">1</div>
  • 155.
    <div class="span1">1</div>
  • 156.
    <div class="span1">1</div>
  • 157.
    <div class="span1">1</div>
  • 158.
    <div class="span1">1</div>
  • 159.
    <div class="span1">1</div>
  • 160.
    <div class="span1">1</div>
  • 161.
    <div class="span1">1</div>
  • 162.
    <div class="span1">1</div>
  • 163.
    <div class="span1">1</div>
  • 164.
    <div class="span1">1</div>
  • 165.
    </div>
  • 166.
    <div class="row-fluid show-grid">
  • 167.
    <div class="span4">4</div>
  • 168.
    <div class="span4">4</div>
  • 169.
    <div class="span4">4</div>
  • 170.
    </div>
  • 171.
    <div class="row-fluid show-grid">
  • 172.
    <div class="span4">4</div>
  • 173.
    <div class="span8">8</div>
  • 174.
    </div>
  • 175.
    <div class="row-fluid show-grid">
  • 176.
    <div class="span6">6</div>
  • 177.
    <div class="span6">6</div>
  • 178.
    </div>
  • 179.
    <div class="row-fluid show-grid">
  • 180.
    <div class="span12">12</div>
  • 181.
    </div>
  • 182.
    </div>
  • 183.
    [/col_size]<br class="nc" />[/col_grid]
  • 184.
     
  • 185.
    [col_grid]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 186.
    <h3 class="typo-title">Lists</h3>
  • 187.
    <!-- Code explained-->
  • 188.
    <div class="code-explained">
  • 189.
     
  • 190.
    <a class="view-code btn btn-small btn-info" id="pop5" href="javascript:void();">Code explained</a>
  • 191.
    <div id="pop5_content" style="display: none;">
  • 192.
    <div class="popTitle">Lists</div>
  • 193.
    <div class="popContent">
  • 194.
     
  • 195.
    Unordered Lists
  • 196.
    <pre class="prettyprint linenums">&lt;ul class="styled"&gt;
  • 197.
      &lt;li&gt;...&lt;/li&gt;
  • 198.
    &lt;/ul&gt;</pre>
  • 199.
    Ordered Lists
  • 200.
    <pre class="prettyprint linenums">&lt;ol&gt;
  • 201.
      &lt;li&gt;...&lt;/li&gt;
  • 202.
    &lt;/ol&gt;</pre>
  • 203.
    </div>
  • 204.
    </div>
  • 205.
    </div>
  • 206.
    <!-- // Code explained-->
  • 207.
    <div class="row-fluid">
  • 208.
    <div class="span6">
  • 209.
    <ul class="styled">
  • 210.
    	<li>Fusce dapibus, tellus.</li>
  • 211.
    	<li>Etiam porta sem malesuada magna.</li>
  • 212.
    	<li>Donec ullamcorper nulla non metus.</li>
  • 213.
    	<li>Duis mollis, est non.</li>
  • 214.
    </ul>
  • 215.
    </div>
  • 216.
    <div class="span6">
  • 217.
    <ol>
  • 218.
    	<li>Fusce dapibus, tellus.</li>
  • 219.
    	<li>Etiam porta sem malesuada magna.</li>
  • 220.
    	<li>Donec ullamcorper nulla non metus.</li>
  • 221.
    	<li>Duis mollis, est non.</li>
  • 222.
    </ol>
  • 223.
    </div>
  • 224.
    </div>
  • 225.
    [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 226.
    <h3 class="typo-title">Labels &amp; Badges</h3>
  • 227.
    <!-- Code explained-->
  • 228.
    <div class="code-explained">
  • 229.
     
  • 230.
    <a class="view-code btn btn-small btn-info" id="pop6" href="javascript:void();">Code explained</a>
  • 231.
    <div id="pop6_content" style="display: none;">
  • 232.
    <div class="popTitle">Labels &amp; Badges</div>
  • 233.
    <div class="popContent">
  • 234.
     
  • 235.
    Use the <code>span</code> tag with <code>-success</code>, <code>-warning</code>, <code>-important</code>, <code>-info</code> or <code>.inverse</code> classes.
  • 236.
    <pre class="prettyprint linenums">&lt;span class="label [label-NAME]"&gt;Default&lt;/span&gt;</pre>
  • 237.
    <pre class="prettyprint linenums">&lt;span class="badge [badge-NAME]"&gt;1&lt;/span&gt;</pre>
  • 238.
    </div>
  • 239.
    </div>
  • 240.
    </div>
  • 241.
    <!-- // Code explained-->
  • 242.
    <div class="row-fluid">
  • 243.
    <div class="span6">
  • 244.
     
  • 245.
    <span class="label">Default</span> Lorem ipsum dolor sit amet.
  • 246.
     
  • 247.
    <span class="label label-success">Success</span> Lorem ipsum dolor sit amet.
  • 248.
     
  • 249.
    <span class="label label-warning">Warning</span> Lorem ipsum dolor sit amet.
  • 250.
     
  • 251.
    <span class="label label-important">Important</span> Lorem ipsum dolor sit amet.
  • 252.
     
  • 253.
    <span class="label label-info">Info</span> Lorem ipsum dolor sit amet.
  • 254.
     
  • 255.
    </div>
  • 256.
    <div class="span6">
  • 257.
     
  • 258.
    <span class="badge">1</span> Lorem ipsum dolor sit amet.
  • 259.
     
  • 260.
    <span class="badge badge-success">2</span> Lorem ipsum dolor sit amet.
  • 261.
     
  • 262.
    <span class="badge badge-warning">4</span> Lorem ipsum dolor sit amet.
  • 263.
     
  • 264.
    <span class="badge badge-important">6</span> Lorem ipsum dolor sit amet.
  • 265.
     
  • 266.
    <span class="badge badge-info">7</span> Lorem ipsum dolor sit amet.
  • 267.
     
  • 268.
    </div>
  • 269.
    </div>
  • 270.
    [/col_size]<br class="nc" />[/col_grid]
  • 271.
    [col_grid]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 272.
    <h3 class="typo-title">Tabs</h3>
  • 273.
    <!-- Code explained-->
  • 274.
    <div class="code-explained">
  • 275.
     
  • 276.
    <a class="view-code btn btn-small btn-info" id="pop7" href="javascript:void();">Code explained</a>
  • 277.
    <div id="pop7_content" style="display: none;">
  • 278.
    <div class="popTitle">Tabs</div>
  • 279.
    <div class="popContent">
  • 280.
    <pre class="prettyprint linenums">&lt;ul class="nav nav-tabs" id="myTab"&gt;
  • 281.
      &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#tab1"&gt;tab name 1..&lt;/a&gt;&lt;/li&gt;
  • 282.
      &lt;li&gt;&lt;a data-toggle="tab" href="#tab2"&gt;tab name 2..&lt;/a&gt;&lt;/li&gt;
  • 283.
    &lt;/ul&gt;
  • 284.
    &lt;div class="tab-content" id="myTabContent"&gt;
  • 285.
      &lt;div id="tab1" class="tab-pane fade in active"&gt;content 1...&lt;/div&gt;
  • 286.
      &lt;div id="tab1" class="tab-pane fade"&gt;content 2...&lt;/div&gt;
  • 287.
    &lt;/div&gt;</pre>
  • 288.
    </div>
  • 289.
    </div>
  • 290.
    </div>
  • 291.
    <!-- // Code explained-->
  • 292.
    <ul class="nav nav-tabs" id="myTab">
  • 293.
    	<li class="active"><a href="#tab1" data-toggle="tab">Content Area 1</a></li>
  • 294.
    	<li><a href="#tab2" data-toggle="tab">Content Area 2</a></li>
  • 295.
    	<li><a href="#tab3" data-toggle="tab">Content Area 3</a></li>
  • 296.
    </ul>
  • 297.
    <div class="tab-content" id="myTabContent">
  • 298.
    <div class="tab-pane fade in active" id="tab1"><img class="alignleft" alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-63-300x300.jpg" width="100" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.</div>
  • 299.
    <div class="tab-pane fade" id="tab2"><img class="alignleft" alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-60-300x300.jpg" width="100" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.</div>
  • 300.
    <div class="tab-pane fade" id="tab3"><img class="alignleft" alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-32-300x300.jpg" width="100" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.</div>
  • 301.
    </div>
  • 302.
    [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 303.
    <h3 class="typo-title">Accordion</h3>
  • 304.
    <!-- Code explained-->
  • 305.
    <div class="code-explained">
  • 306.
     
  • 307.
    <a class="view-code btn btn-small btn-info" id="pop8" href="javascript:void();">Code explained</a>
  • 308.
    <div id="pop8_content" style="display: none;">
  • 309.
    <div class="popTitle">Accordion</div>
  • 310.
    <div class="popContent">
  • 311.
    <pre class="prettyprint linenums">&lt;div class="accordion" id="accordion2"&gt;
  • 312.
      &lt;div class="accordion-group"&gt;
  • 313.
        &lt;div class="accordion-heading"&gt;
  • 314.
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"&gt;
  • 315.
            Content Area 1
  • 316.
            &lt;i class="icon-chevron-down"&gt;&lt;/i&gt;
  • 317.
          &lt;/a&gt;
  • 318.
        &lt;/div&gt;
  • 319.
      &lt;div id="collapseOne" class="accordion-body collapse"&gt;
  • 320.
        &lt;div class="accordion-inner"&gt;
  • 321.
          content 1...
  • 322.
        &lt;/div&gt;
  • 323.
      &lt;/div&gt;
  • 324.
    &lt;/div&gt;
  • 325.
    &lt;div class="accordion" id="accordion2"&gt;
  • 326.
      &lt;div class="accordion-group"&gt;
  • 327.
        &lt;div class="accordion-heading"&gt;
  • 328.
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"&gt;
  • 329.
            Content Area 2
  • 330.
            &lt;i class="icon-chevron-down"&gt;&lt;/i&gt;
  • 331.
          &lt;/a&gt;
  • 332.
        &lt;/div&gt;
  • 333.
      &lt;div id="collapseOne" class="accordion-body collapse"&gt;
  • 334.
        &lt;div class="accordion-inner"&gt;
  • 335.
          content 2...
  • 336.
        &lt;/div&gt;
  • 337.
      &lt;/div&gt;
  • 338.
    &lt;/div&gt;</pre>
  • 339.
    </div>
  • 340.
    </div>
  • 341.
    </div>
  • 342.
    <!-- // Code explained-->
  • 343.
    <div class="accordion" id="accordion2">
  • 344.
    <div class="accordion-group">
  • 345.
    <div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">
  • 346.
    Content Area 1
  • 347.
    <i class="icon-chevron-down"></i>
  • 348.
    </a></div>
  • 349.
    <div class="accordion-body collapse" id="collapseOne">
  • 350.
    <div class="accordion-inner"><img class="alignleft" alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-63-300x300.jpg" width="100" />
  • 351.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.</div>
  • 352.
    </div>
  • 353.
    </div>
  • 354.
    <div class="accordion-group">
  • 355.
    <div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">
  • 356.
    Content Area 2
  • 357.
    <i class="icon-chevron-down"></i>
  • 358.
    </a></div>
  • 359.
    <div class="accordion-body collapse" id="collapseTwo">
  • 360.
    <div class="accordion-inner"><img class="alignleft" alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-60-300x300.jpg" width="100" />
  • 361.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.</div>
  • 362.
    </div>
  • 363.
    </div>
  • 364.
    <div class="accordion-group">
  • 365.
    <div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2">
  • 366.
    Content Area 3
  • 367.
    <i class="icon-chevron-down"></i>
  • 368.
    </a></div>
  • 369.
    <div class="accordion-body collapse" id="collapseThree">
  • 370.
    <div class="accordion-inner"><img class="alignleft" alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-32-300x300.jpg" width="100" />
  • 371.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.</div>
  • 372.
    </div>
  • 373.
    </div>
  • 374.
    </div>
  • 375.
    [/col_size]<br class="nc" />[/col_grid]
  • 376.
    [col_grid]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 377.
    <h3 class="typo-title">Blockquote</h3>
  • 378.
    <!-- Code explained-->
  • 379.
    <div class="code-explained">
  • 380.
     
  • 381.
    <a class="view-code btn btn-small btn-info" id="pop9" href="javascript:void();">Code explained</a>
  • 382.
    <div id="pop9_content" style="display: none;">
  • 383.
    <div class="popTitle">Blockquote</div>
  • 384.
    <div class="popContent">
  • 385.
     
  • 386.
    Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.
  • 387.
    <pre class="prettyprint linenums">&lt;blockquote&gt;
  • 388.
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
  • 389.
      &lt;small&gt;Someone famous in &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/small&gt;
  • 390.
    &lt;/blockquote&gt;</pre>
  • 391.
    </div>
  • 392.
    </div>
  • 393.
    </div>
  • 394.
    <!-- // Code explained-->
  • 395.
    <blockquote>This is a sample <strong>Blockquote</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.
  • 396.
     
  • 397.
    <small>Someone famous <cite title="Source Title">Source Title</cite></small></blockquote>
  • 398.
    [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 399.
    <h3 class="typo-title">Code</h3>
  • 400.
    <!-- Code explained-->
  • 401.
    <div class="code-explained">
  • 402.
     
  • 403.
    <a class="view-code btn btn-small btn-info" id="pop10" href="javascript:void();">Code explained</a>
  • 404.
    <div id="pop10_content" style="display: none;">
  • 405.
    <div class="popTitle">Code</div>
  • 406.
    <div class="popContent">
  • 407.
     
  • 408.
    Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
  • 409.
    <pre class="prettyprint linenums">&lt;pre class="prettyprint linenums"&gt;
  • 410.
    pre {
  • 411.
      width: 100%;
  • 412.
      margin: 0 0 15px 0;
  • 413.
      padding: 0 10px;
  • 414.
      background-color: #F2F2F2;
  • 415.
    }&lt;/pre&gt;</pre>
  • 416.
    </div>
  • 417.
    </div>
  • 418.
    </div>
  • 419.
    <!-- // Code explained-->
  • 420.
    <pre class="prettyprint linenums">pre {
  • 421.
      width: 100%;
  • 422.
      margin: 0 0 15px 0;
  • 423.
      padding: 0 10px;
  • 424.
      background-color: #F2F2F2;
  • 425.
    }</pre>
  • 426.
    [/col_size]<br class="nc" />[/col_grid]
  • 427.
    [col_grid]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 428.
    <h3 class="typo-title">Table</h3>
  • 429.
    <!-- Code explained-->
  • 430.
    <div class="code-explained">
  • 431.
     
  • 432.
    <a class="view-code btn btn-small btn-info" id="pop11" href="javascript:void();">Code explained</a>
  • 433.
    <div id="pop11_content" style="display: none;">
  • 434.
    <div class="popTitle">Table</div>
  • 435.
    <div class="popContent">
  • 436.
     
  • 437.
    Add any of the following classes to the <code>.table</code> base class.
  • 438.
    <code>.table-striped</code>, <code>.table-bordered</code>, <code>.table-hover</code>, <code>.table-condensed</code>
  • 439.
     
  • 440.
    Use contextual classes to color table rows.
  • 441.
    <code>.success</code>, <code>.error</code>, <code>.warning</code>, <code>.info</code>
  • 442.
     
  • 443.
    </div>
  • 444.
    </div>
  • 445.
    </div>
  • 446.
    <!-- // Code explained-->
  • 447.
    <table class="table table-striped">
  • 448.
    <thead>
  • 449.
    <tr>
  • 450.
    <th>#</th>
  • 451.
    <th>First Name</th>
  • 452.
    <th>Last Name</th>
  • 453.
    <th>Username</th>
  • 454.
    </tr>
  • 455.
    </thead>
  • 456.
    <tbody>
  • 457.
    <tr>
  • 458.
    <td>1</td>
  • 459.
    <td>Mark</td>
  • 460.
    <td>Otto</td>
  • 461.
    <td>@mdo</td>
  • 462.
    </tr>
  • 463.
    <tr>
  • 464.
    <td>2</td>
  • 465.
    <td>Jacob</td>
  • 466.
    <td>Thornton</td>
  • 467.
    <td>@fat</td>
  • 468.
    </tr>
  • 469.
    <tr>
  • 470.
    <td>3</td>
  • 471.
    <td>Larry</td>
  • 472.
    <td>the Bird</td>
  • 473.
    <td>@twitter</td>
  • 474.
    </tr>
  • 475.
    </tbody>
  • 476.
    </table>
  • 477.
    <table class="table table-bordered">
  • 478.
    <thead>
  • 479.
    <tr>
  • 480.
    <th>#</th>
  • 481.
    <th>First Name</th>
  • 482.
    <th>Last Name</th>
  • 483.
    <th>Username</th>
  • 484.
    </tr>
  • 485.
    </thead>
  • 486.
    <tbody>
  • 487.
    <tr>
  • 488.
    <td rowspan="2">1</td>
  • 489.
    <td>Mark</td>
  • 490.
    <td>Otto</td>
  • 491.
    <td>@mdo</td>
  • 492.
    </tr>
  • 493.
    <tr>
  • 494.
    <td>Mark</td>
  • 495.
    <td>Otto</td>
  • 496.
    <td>@TwBootstrap</td>
  • 497.
    </tr>
  • 498.
    <tr>
  • 499.
    <td>2</td>
  • 500.
    <td>Jacob</td>
  • 501.
    <td>Thornton</td>
  • 502.
    <td>@fat</td>
  • 503.
    </tr>
  • 504.
    <tr>
  • 505.
    <td>3</td>
  • 506.
    <td colspan="2">Larry the Bird</td>
  • 507.
    <td>@twitter</td>
  • 508.
    </tr>
  • 509.
    </tbody>
  • 510.
    </table>
  • 511.
    [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 512.
    <h3 class="typo-title">Dropcaps</h3>
  • 513.
    <!-- Code explained-->
  • 514.
    <div class="code-explained">
  • 515.
     
  • 516.
    <a class="view-code btn btn-small btn-info" id="pop12" href="javascript:void();">Code explained</a>
  • 517.
    <div id="pop12_content" style="display: none;">
  • 518.
    <div class="popTitle">Dropcaps</div>
  • 519.
    <div class="popContent">
  • 520.
    <pre class="prettyprint linenums">&lt;p&gt;&lt;span class="dropcap nocolor"&gt;L&lt;/span&gt;orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan.&lt;/p&gt;
  • 521.
    &lt;p&gt;&lt;span class="dropcap"&gt;L&lt;/span&gt;orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan.&lt;/p&gt;
  • 522.
    &lt;p&gt;&lt;span class="dropcap color"&gt;L&lt;/span&gt;orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan.&lt;/p&gt;</pre>
  • 523.
    </div>
  • 524.
    </div>
  • 525.
    </div>
  • 526.
    <!-- // Code explained-->
  • 527.
     
  • 528.
    <span class="dropcap nocolor">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.
  • 529.
     
  • 530.
    <span class="dropcap">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.
  • 531.
     
  • 532.
    <span class="dropcap color">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.
  • 533.
     
  • 534.
    [/col_size]<br class="nc" />[/col_grid]
  • 535.
    [col_grid]<br class="nc" />[col_size class="col-4" padding="yes"]
  • 536.
    <h3 class="typo-title">Form</h3>
  • 537.
    <!-- Code explained-->
  • 538.
    <div class="code-explained">
  • 539.
     
  • 540.
    <a class="view-code btn btn-small btn-info" id="pop13" href="javascript:void();">Code explained</a>
  • 541.
    <div id="pop13_content" style="display: none;">
  • 542.
    <div class="popTitle">Form</div>
  • 543.
    <div class="popContent">
  • 544.
    <h4>Inline form</h4>
  • 545.
    Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.
  • 546.
    <h4>Horizontal form</h4>
  • 547.
    Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:
  • 548.
    <ul>
  • 549.
    	<li>Add <code>.form-horizontal</code> to the form</li>
  • 550.
    	<li>Wrap labels and controls in <code>.control-group</code></li>
  • 551.
    	<li>Add <code>.control-label</code> to the label</li>
  • 552.
    	<li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
  • 553.
    </ul>
  • 554.
    </div>
  • 555.
    </div>
  • 556.
    </div>
  • 557.
    <!-- // Code explained-->
  • 558.
    <div class="row-fluid">
  • 559.
    <div class="span6"><input class="input-medium" type="text" placeholder=".input-medium" />
  • 560.
    <input class="input-large" type="text" placeholder=".input-large" />
  • 561.
    <input class="input-xlarge" type="text" placeholder=".input-xlarge" />
  • 562.
    <input class="input-xlarge" id="disabledInput" type="text" disabled="disabled" placeholder="Disabled input here..." />
  • 563.
    <div class="control-group error">
  • 564.
    <div class="controls"><input class="input-xlarge" type="text" placeholder="Please correct the error..." /></div>
  • 565.
    </div>
  • 566.
    </div>
  • 567.
    <div class="span6"><input type="radio" name="sex" value="male" />Male<input type="radio" name="sex" value="female" />Female<input type="checkbox" name="vehicle" value="Bike" />I have a bike
  • 568.
     
  • 569.
    <input type="checkbox" name="vehicle" value="Car" />I have a car
  • 570.
     
  • 571.
    <select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option></select><select multiple="multiple"><option selected="selected" value="audi">Audi</option><option value="saab">Saab</option><option value="opel">Opel</option><option value="volvo">Volvo</option></select></div>
  • 572.
    </div>
  • 573.
    <textarea id="" cols="30" name="" placeholder="Type your message..." rows="10"></textarea>
  • 574.
    <input class="btn" type="submit" value="Submit" />
  • 575.
    <input class="btn btn-warning" type="reset" value="Reset" />
  • 576.
    [/col_size][/col_grid]
  • 577.
    [col_grid]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 578.
    <h3 class="typo-title">Buttons</h3>
  • 579.
    <!-- Code explained-->
  • 580.
    <div class="code-explained">
  • 581.
     
  • 582.
    <a class="view-code btn btn-small btn-info" id="pop14" href="javascript:void();">Code explained</a>
  • 583.
    <div id="pop14_content" style="display: none;">
  • 584.
    <div class="popTitle">Buttons</div>
  • 585.
    <div class="popContent">
  • 586.
     
  • 587.
    Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.
  • 588.
    <h4>Button classes</h4>
  • 589.
    <code>btn</code>, <code>btn btn-primary</code>, <code>btn btn-info</code>, <code>btn btn-success</code>, <code>btn btn-warning</code>, <code>btn btn-danger</code>, <code>btn btn-inverse</code>, <code>btn btn-link</code>
  • 590.
    <h4>Button sizes</h4>
  • 591.
    Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.
  • 592.
     
  • 593.
    </div>
  • 594.
    </div>
  • 595.
    </div>
  • 596.
    <!-- // Code explained-->
  • 597.
    <div class="row-fluid" style="text-align: center;">
  • 598.
    <div class="span6"><button class="btn" type="button">Large Button</button>
  • 599.
    <button class="btn btn-primary" type="button">Large Button</button>
  • 600.
    <button class="btn btn-info" type="button">Large Button</button>
  • 601.
    <button class="btn btn-success" type="button">Large Button</button>
  • 602.
    <button class="btn btn-warning" type="button">Large Button</button>
  • 603.
    <button class="btn btn-danger" type="button">Large Button</button></div>
  • 604.
    <div class="span6"><button class="btn btn-small" type="button">Small Button</button>
  • 605.
    <button class="btn btn-primary btn-small" type="button">Small Button</button>
  • 606.
    <button class="btn btn-info btn-small" type="button">Small Button</button>
  • 607.
    <button class="btn btn-success btn-small" type="button">Small Button</button>
  • 608.
    <button class="btn btn-warning btn-small" type="button">Small Button</button>
  • 609.
    <button class="btn btn-danger btn-small" type="button">Small Button</button></div>
  • 610.
    </div>
  • 611.
    [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 612.
    <h3 class="typo-title">Progress Bar</h3>
  • 613.
    <!-- Code explained-->
  • 614.
    <div class="code-explained">
  • 615.
     
  • 616.
    <a class="view-code btn btn-small btn-info" id="pop15" href="javascript:void();">Code explained</a>
  • 617.
    <div id="pop15_content" style="display: none;">
  • 618.
    <div class="popTitle">Progress Bar</div>
  • 619.
    <div class="popContent">
  • 620.
     
  • 621.
    Default progress bar with a vertical gradient.
  • 622.
    <pre class="prettyprint linenums">&lt;div class="progress"&gt;
  • 623.
      &lt;div class="bar" style="width: 60%;"&gt;&lt;/div&gt;
  • 624.
    &lt;/div&gt;</pre>
  • 625.
    Uses a gradient to create a striped effect. Not available in IE7-8.
  • 626.
    <pre class="prettyprint linenums">&lt;div class="progress progress-striped"&gt;
  • 627.
      &lt;div class="bar" style="width: 20%;"&gt;&lt;/div&gt;
  • 628.
    &lt;/div&gt;</pre>
  • 629.
    Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.
  • 630.
    <pre class="prettyprint linenums">&lt;div class="progress progress-striped active"&gt;
  • 631.
      &lt;div class="bar" style="width: 20%;"&gt;&lt;/div&gt;
  • 632.
    &lt;/div&gt;</pre>
  • 633.
    </div>
  • 634.
    </div>
  • 635.
    </div>
  • 636.
    <!-- // Code explained-->
  • 637.
    <div class="progress progress-info progress-striped"></div>
  • 638.
    <div class="progress active progress-info progress-striped"></div>
  • 639.
    <div class="progress progress-success progress-striped"></div>
  • 640.
    <div class="progress progress-warning progress-striped"></div>
  • 641.
    <div class="progress progress-danger progress-striped"></div>
  • 642.
    <div class="progress-bar">
  • 643.
    <div class="progress">
  • 644.
    <div class="bar" style="width: 60%;">Photoshop</div>
  • 645.
    </div>
  • 646.
    </div>
  • 647.
    <div class="progress-bar">
  • 648.
    <div class="progress">
  • 649.
    <div class="bar" style="width: 75%;">HTML &amp; CSS</div>
  • 650.
    </div>
  • 651.
    </div>
  • 652.
    <div class="progress-bar">
  • 653.
    <div class="progress">
  • 654.
    <div class="bar" style="width: 33%;">JavaScript</div>
  • 655.
    </div>
  • 656.
    </div>
  • 657.
    <div class="progress-bar">
  • 658.
    <div class="progress">
  • 659.
    <div class="bar" style="width: 83%;">PHP</div>
  • 660.
    </div>
  • 661.
    </div>
  • 662.
    [/col_size]<br class="nc" />[/col_grid]
  • 663.
    [col_grid]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 664.
    <h3 class="typo-title">Slider</h3>
  • 665.
    <!-- Code explained-->
  • 666.
    <div class="code-explained">
  • 667.
     
  • 668.
    <a class="view-code btn btn-small btn-info" id="pop16" href="javascript:void();">Code explained</a>
  • 669.
    <div id="pop16_content" style="display: none;">
  • 670.
    <div class="popTitle">Slider</div>
  • 671.
    <div class="popContent">
  • 672.
     
  • 673.
    Default progress bar with a vertical gradient.
  • 674.
    <pre class="prettyprint linenums">&lt;div id="myCarousel" class="carousel slide"&gt;
  • 675.
      &lt;ol class="carousel-indicators"&gt;
  • 676.
        &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
  • 677.
        &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
  • 678.
      &lt;/ol&gt;
  • 679.
      <!-- Carousel items -->
  • 680.
      &lt;div class="carousel-inner"&gt;
  • 681.
        &lt;div class="active item"&gt;
  • 682.
          &lt;img src=".." /&gt;
  • 683.
          &lt;div class="carousel-caption"&gt;caption 1...&lt;/div&gt;
  • 684.
        &lt;/div&gt;
  • 685.
        &lt;div class="item"&gt;
  • 686.
          &lt;img src=".." /&gt;
  • 687.
          &lt;div class="carousel-caption"&gt;caption 2...&lt;/div&gt;
  • 688.
        &lt;/div&gt;
  • 689.
      &lt;/div&gt;
  • 690.
      <!-- Carousel nav -->
  • 691.
      &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&lt;i class="icon-chevron-left"&gt; &lt;/i&gt;&lt;/a&gt;
  • 692.
      &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&lt;i class="icon-chevron-right"&gt; &lt;/i&gt;&lt;/a&gt;
  • 693.
    &lt;/div&gt;</pre>
  • 694.
    </div>
  • 695.
    </div>
  • 696.
    </div>
  • 697.
    <!-- // Code explained-->
  • 698.
    <div class="carousel slide" id="myCarousel">
  • 699.
    <div class="carousel-inner">
  • 700.
    <div class="active item"><img alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-slider-1.jpg" />
  • 701.
    <div class="carousel-caption">
  • 702.
    <h4>Branding Package By Marcus Heydays</h4>
  • 703.
    A wonderful serenity has taken possession of my entire soul.
  • 704.
     
  • 705.
    </div>
  • 706.
    </div>
  • 707.
    <div class="item"><img alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-slider-2.jpg" />
  • 708.
    <div class="carousel-caption">
  • 709.
    <h4>Like these sweet mornings</h4>
  • 710.
    Donec pellentesque venenatis elit, quis aliquet mauris malesuada el.
  • 711.
     
  • 712.
    </div>
  • 713.
    </div>
  • 714.
    </div>
  • 715.
    <a class="carousel-control left" href="#myCarousel" data-slide="prev"><i class="icon-chevron-left"> </i></a>
  • 716.
    <a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="icon-chevron-right"> </i></a>
  • 717.
     
  • 718.
    </div>
  • 719.
    [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"]
  • 720.
    <h3 class="typo-title">Video</h3>
  • 721.
    <!-- Code explained-->
  • 722.
    <div class="code-explained">
  • 723.
     
  • 724.
    <a class="view-code btn btn-small btn-info" id="pop17" href="javascript:void();">Code explained</a>
  • 725.
    <div id="pop17_content" style="display: none;">
  • 726.
    <div class="popTitle">Video</div>
  • 727.
    <div class="popContent">
  • 728.
    <pre class="prettyprint linenums">&lt;iframe src="http://player.vimeo.com/video/70002703" height="361" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;&lt;/iframe&gt;</pre>
  • 729.
    </div>
  • 730.
    </div>
  • 731.
    </div>
  • 732.
    <!-- // Code explained-->
  • 733.
     
  • 734.
    <iframe src="http://player.vimeo.com/video/70002703" height="361" width="320" allowfullscreen="" frameborder="0"></iframe>[/col_size]<br class="nc" />[/col_grid]
  • 735.
    [col_grid]<br class="nc" />[col_size class="col-4" padding="yes"]
  • 736.
    <h3 class="typo-title">Icons</h3>
  • 737.
    <!-- Code explained-->
  • 738.
    <div class="code-explained">
  • 739.
     
  • 740.
    <a class="view-code btn btn-small btn-info" id="pop18" href="javascript:void();">Code explained</a>
  • 741.
    <div id="pop18_content" style="display: none;">
  • 742.
    <div class="popTitle">Icons</div>
  • 743.
    <div class="popContent">
  • 744.
     
  • 745.
    You can use icons by adding class name <code>.icon-[ICON_NAME]</code> to any element, find more details at <a href="http://fortawesome.github.io/Font-Awesome/icons/">Font-Awesome</a>
  • 746.
     
  • 747.
    </div>
  • 748.
    </div>
  • 749.
    </div>
  • 750.
    <!-- // Code explained-->
  • 751.
    <ul class="the-icons clearfix">
  • 752.
    	<li><i class="icon-glass"></i> icon-glass</li>
  • 753.
    	<li><i class="icon-music"></i> icon-music</li>
  • 754.
    	<li><i class="icon-search"></i> icon-search</li>
  • 755.
    	<li><i class="icon-envelope"></i> icon-envelope</li>
  • 756.
    	<li><i class="icon-heart"></i> icon-heart</li>
  • 757.
    	<li><i class="icon-star"></i> icon-star</li>
  • 758.
    	<li><i class="icon-star-empty"></i> icon-star-empty</li>
  • 759.
    	<li><i class="icon-user"></i> icon-user</li>
  • 760.
    	<li><i class="icon-film"></i> icon-film</li>
  • 761.
    	<li><i class="icon-th-large"></i> icon-th-large</li>
  • 762.
    	<li><i class="icon-th"></i> icon-th</li>
  • 763.
    	<li><i class="icon-th-list"></i> icon-th-list</li>
  • 764.
    	<li><i class="icon-ok"></i> icon-ok</li>
  • 765.
    	<li><i class="icon-remove"></i> icon-remove</li>
  • 766.
    	<li><i class="icon-zoom-in"></i> icon-zoom-in</li>
  • 767.
    	<li><i class="icon-zoom-out"></i> icon-zoom-out</li>
  • 768.
    	<li><i class="icon-off"></i> icon-off</li>
  • 769.
    	<li><i class="icon-signal"></i> icon-signal</li>
  • 770.
    	<li><i class="icon-cog"></i> icon-cog</li>
  • 771.
    	<li><i class="icon-trash"></i> icon-trash</li>
  • 772.
    	<li><i class="icon-home"></i> icon-home</li>
  • 773.
    	<li><i class="icon-file"></i> icon-file</li>
  • 774.
    	<li><i class="icon-time"></i> icon-time</li>
  • 775.
    	<li><i class="icon-road"></i> icon-road</li>
  • 776.
    	<li><i class="icon-download-alt"></i> icon-download-alt</li>
  • 777.
    	<li><i class="icon-download"></i> icon-download</li>
  • 778.
    	<li><i class="icon-upload"></i> icon-upload</li>
  • 779.
    	<li><i class="icon-inbox"></i> icon-inbox</li>
  • 780.
    	<li><i class="icon-play-circle"></i> icon-play-circle</li>
  • 781.
    	<li><i class="icon-repeat"></i> icon-repeat</li>
  • 782.
    	<li><i class="icon-refresh"></i> icon-refresh</li>
  • 783.
    	<li><i class="icon-list-alt"></i> icon-list-alt</li>
  • 784.
    	<li><i class="icon-lock"></i> icon-lock</li>
  • 785.
    	<li><i class="icon-flag"></i> icon-flag</li>
  • 786.
    	<li><i class="icon-headphones"></i> icon-headphones</li>
  • 787.
    	<li><i class="icon-volume-off"></i> icon-volume-off</li>
  • 788.
    	<li><i class="icon-volume-down"></i> icon-volume-down</li>
  • 789.
    	<li><i class="icon-volume-up"></i> icon-volume-up</li>
  • 790.
    	<li><i class="icon-qrcode"></i> icon-qrcode</li>
  • 791.
    	<li><i class="icon-barcode"></i> icon-barcode</li>
  • 792.
    	<li><i class="icon-tag"></i> icon-tag</li>
  • 793.
    	<li><i class="icon-tags"></i> icon-tags</li>
  • 794.
    	<li><i class="icon-book"></i> icon-book</li>
  • 795.
    	<li><i class="icon-bookmark"></i> icon-bookmark</li>
  • 796.
    	<li><i class="icon-print"></i> icon-print</li>
  • 797.
    	<li><i class="icon-camera"></i> icon-camera</li>
  • 798.
    	<li><i class="icon-font"></i> icon-font</li>
  • 799.
    	<li><i class="icon-bold"></i> icon-bold</li>
  • 800.
    	<li><i class="icon-italic"></i> icon-italic</li>
  • 801.
    	<li><i class="icon-text-height"></i> icon-text-height</li>
  • 802.
    	<li><i class="icon-text-width"></i> icon-text-width</li>
  • 803.
    	<li><i class="icon-align-left"></i> icon-align-left</li>
  • 804.
    	<li><i class="icon-align-center"></i> icon-align-center</li>
  • 805.
    	<li><i class="icon-align-right"></i> icon-align-right</li>
  • 806.
    	<li><i class="icon-align-justify"></i> icon-align-justify</li>
  • 807.
    	<li><i class="icon-list"></i> icon-list</li>
  • 808.
    	<li><i class="icon-indent-left"></i> icon-indent-left</li>
  • 809.
    	<li><i class="icon-indent-right"></i> icon-indent-right</li>
  • 810.
    	<li><i class="icon-facetime-video"></i> icon-facetime-video</li>
  • 811.
    	<li><i class="icon-picture"></i> icon-picture</li>
  • 812.
    	<li><i class="icon-pencil"></i> icon-pencil</li>
  • 813.
    	<li><i class="icon-map-marker"></i> icon-map-marker</li>
  • 814.
    	<li><i class="icon-adjust"></i> icon-adjust</li>
  • 815.
    	<li><i class="icon-tint"></i> icon-tint</li>
  • 816.
    	<li><i class="icon-edit"></i> icon-edit</li>
  • 817.
    	<li><i class="icon-share"></i> icon-share</li>
  • 818.
    	<li><i class="icon-check"></i> icon-check</li>
  • 819.
    	<li><i class="icon-move"></i> icon-move</li>
  • 820.
    	<li><i class="icon-step-backward"></i> icon-step-backward</li>
  • 821.
    	<li><i class="icon-fast-backward"></i> icon-fast-backward</li>
  • 822.
    	<li><i class="icon-backward"></i> icon-backward</li>
  • 823.
    	<li><i class="icon-play"></i> icon-play</li>
  • 824.
    	<li><i class="icon-pause"></i> icon-pause</li>
  • 825.
    	<li><i class="icon-stop"></i> icon-stop</li>
  • 826.
    	<li><i class="icon-forward"></i> icon-forward</li>
  • 827.
    	<li><i class="icon-fast-forward"></i> icon-fast-forward</li>
  • 828.
    	<li><i class="icon-step-forward"></i> icon-step-forward</li>
  • 829.
    	<li><i class="icon-eject"></i> icon-eject</li>
  • 830.
    	<li><i class="icon-chevron-left"></i> icon-chevron-left</li>
  • 831.
    	<li><i class="icon-chevron-right"></i> icon-chevron-right</li>
  • 832.
    	<li><i class="icon-plus-sign"></i> icon-plus-sign</li>
  • 833.
    	<li><i class="icon-minus-sign"></i> icon-minus-sign</li>
  • 834.
    	<li><i class="icon-remove-sign"></i> icon-remove-sign</li>
  • 835.
    	<li><i class="icon-ok-sign"></i> icon-ok-sign</li>
  • 836.
    	<li><i class="icon-question-sign"></i> icon-question-sign</li>
  • 837.
    	<li><i class="icon-info-sign"></i> icon-info-sign</li>
  • 838.
    	<li><i class="icon-screenshot"></i> icon-screenshot</li>
  • 839.
    	<li><i class="icon-remove-circle"></i> icon-remove-circle</li>
  • 840.
    	<li><i class="icon-ok-circle"></i> icon-ok-circle</li>
  • 841.
    	<li><i class="icon-ban-circle"></i> icon-ban-circle</li>
  • 842.
    	<li><i class="icon-arrow-left"></i> icon-arrow-left</li>
  • 843.
    	<li><i class="icon-arrow-right"></i> icon-arrow-right</li>
  • 844.
    	<li><i class="icon-arrow-up"></i> icon-arrow-up</li>
  • 845.
    	<li><i class="icon-arrow-down"></i> icon-arrow-down</li>
  • 846.
    	<li><i class="icon-share-alt"></i> icon-share-alt</li>
  • 847.
    	<li><i class="icon-resize-full"></i> icon-resize-full</li>
  • 848.
    	<li><i class="icon-resize-small"></i> icon-resize-small</li>
  • 849.
    	<li><i class="icon-plus"></i> icon-plus</li>
  • 850.
    	<li><i class="icon-minus"></i> icon-minus</li>
  • 851.
    	<li><i class="icon-asterisk"></i> icon-asterisk</li>
  • 852.
    	<li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
  • 853.
    	<li><i class="icon-gift"></i> icon-gift</li>
  • 854.
    	<li><i class="icon-leaf"></i> icon-leaf</li>
  • 855.
    	<li><i class="icon-fire"></i> icon-fire</li>
  • 856.
    	<li><i class="icon-eye-open"></i> icon-eye-open</li>
  • 857.
    	<li><i class="icon-eye-close"></i> icon-eye-close</li>
  • 858.
    	<li><i class="icon-warning-sign"></i> icon-warning-sign</li>
  • 859.
    	<li><i class="icon-plane"></i> icon-plane</li>
  • 860.
    	<li><i class="icon-calendar"></i> icon-calendar</li>
  • 861.
    	<li><i class="icon-random"></i> icon-random</li>
  • 862.
    	<li><i class="icon-comment"></i> icon-comment</li>
  • 863.
    	<li><i class="icon-magnet"></i> icon-magnet</li>
  • 864.
    	<li><i class="icon-chevron-up"></i> icon-chevron-up</li>
  • 865.
    	<li><i class="icon-chevron-down"></i> icon-chevron-down</li>
  • 866.
    	<li><i class="icon-retweet"></i> icon-retweet</li>
  • 867.
    	<li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
  • 868.
    	<li><i class="icon-folder-close"></i> icon-folder-close</li>
  • 869.
    	<li><i class="icon-folder-open"></i> icon-folder-open</li>
  • 870.
    	<li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
  • 871.
    	<li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
  • 872.
    	<li><i class="icon-hdd"></i> icon-hdd</li>
  • 873.
    	<li><i class="icon-bullhorn"></i> icon-bullhorn</li>
  • 874.
    	<li><i class="icon-bell"></i> icon-bell</li>
  • 875.
    	<li><i class="icon-certificate"></i> icon-certificate</li>
  • 876.
    	<li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
  • 877.
    	<li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
  • 878.
    	<li><i class="icon-hand-right"></i> icon-hand-right</li>
  • 879.
    	<li><i class="icon-hand-left"></i> icon-hand-left</li>
  • 880.
    	<li><i class="icon-hand-up"></i> icon-hand-up</li>
  • 881.
    	<li><i class="icon-hand-down"></i> icon-hand-down</li>
  • 882.
    	<li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
  • 883.
    	<li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
  • 884.
    	<li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
  • 885.
    	<li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
  • 886.
    	<li><i class="icon-globe"></i> icon-globe</li>
  • 887.
    	<li><i class="icon-wrench"></i> icon-wrench</li>
  • 888.
    	<li><i class="icon-tasks"></i> icon-tasks</li>
  • 889.
    	<li><i class="icon-filter"></i> icon-filter</li>
  • 890.
    	<li><i class="icon-briefcase"></i> icon-briefcase</li>
  • 891.
    	<li><i class="icon-fullscreen"></i> icon-fullscreen</li>
  • 892.
    </ul>
  • 893.
    [/col_size]<br class="nc" />[/col_grid]
  • 894.
    [/col_grid_wrap]
[col_grid_wrap] [col_grid] [col_size class="col-4 typo-first-grid" padding="yes"] <h3 class="typo-title no-margin">Grid system</h3> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop0" href="javascript:void();">Code explained</a> <div id="pop0_content" style="display: none;"> <div class="popTitle">Grid system</div> <div class="popContent"> The default DW Fixel grid system utilizes 4 columns. As this is a 4-column grid, you should always add up to 4 for each row. <pre class="prettyprint linenums">&lt;div class="grid-wrap"&gt; &lt;div class="col-grid"&gt; &lt;div class="col-1"&gt;.col-1&lt;/div&gt; &lt;div class="col-1"&gt;.col-1&lt;/div&gt; &lt;div class="col-1"&gt;.col-1&lt;/div&gt; &lt;div class="col-1"&gt;.col-1&lt;/div&gt; &lt;/div&gt; &lt;div class="col-grid"&gt; &lt;div class="col-3"&gt;.col-3&lt;/div&gt; &lt;div class="col-1"&gt;.col-1&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre> </div> </div> </div> [/col_size] [/col_grid] [col_grid]<br class="nc" />[col_size class="col-1 textcenter" padding="yes"].col-1[/col_size] [col_size class="col-1 textcenter" padding="yes"].col-1[/col_size] [col_size class="col-1 textcenter" padding="yes"].col-1[/col_size] [col_size class="col-1 textcenter" padding="yes"].col-1[/col_size]<br class="nc" />[/col_grid] [col_grid] [col_size class="col-2 textcenter" padding="yes"].col-2[/col_size] [col_size class="col-2 textcenter" padding="yes"].col-2[/col_size] [/col_grid] [col_grid] [col_size class="col-1 textcenter" padding="yes"].col-1[/col_size] [col_size class="col-2 textcenter" padding="yes"].col-2[/col_size] [col_size class="col-1 textcenter" padding="yes"].col-1[/col_size] [/col_grid] [col_grid] [col_size class="col-3 textcenter" padding="yes"].col-3[/col_size] [col_size class="col-1 textcenter" padding="yes"].col-1[/col_size] [/col_grid] [col_grid] [col_size class="col-4 textcenter" padding="yes"].col-4[/col_size] [/col_grid] [col_grid]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">Headings</h3> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop1" href="javascript:void();">Code explained</a> <div id="pop1_content" style="display: none;"> <div class="popTitle">Headings</div> <div class="popContent"> All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available. </div> </div> </div> <h1>h1. Heading 1</h1> <h2>h2. Heading 2</h2> <h3>h3. Heading 3</h3> <h4>h4. Heading 4</h4> <h5>h5. Heading 5</h5> <h6>h6. Heading 6</h6> [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">Alert Messages</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop2" href="javascript:void();">Code explained</a> <div id="pop2_content" style="display: none;"> <div class="popTitle">Alert Messages</div> <div class="popContent"> Display alert messages by using the follwing markup with <code>.alert-error</code>, <code>.alert-info</code>, <code>.alert-info</code> or <code>.alert-success</code> classes. To change the icon in the left of alert messages, you can add <code>.icon-NAME</code> class to span elements, more details about the icon-NAME at <a href="http://fortawesome.github.io/Font-Awesome/icons/">Font-Awesome</a> <pre class="prettyprint linenums">&lt;div class="alert alert-info fade in"&gt; &lt;a class="close" data-dismiss="alert" href="#"&gt;×&lt;/a&gt; &lt;span class="icon-info-sign"&gt; &lt;/span&gt; messages goes here... &lt;/div&gt;</pre> </div> </div> </div> <!-- // Code explained--> <div class="alert fade in"><a class="close" href="#" data-dismiss="alert">×</a> <span class="icon-exclamation-sign"> </span> General message. Your message goes here... Lorem ipsum dolor sit amet.</div> <div class="alert alert-error fade in"><a class="close" href="#" data-dismiss="alert">×</a> <span class="icon-warning-sign"> </span> Error message. Your message goes here... Lorem ipsum dolor sit amet.</div> <div class="alert alert-info fade in"><a class="close" href="#" data-dismiss="alert">×</a> <span class="icon-info-sign"> </span> Info message. Your message goes here... Lorem ipsum dolor sit amet.</div> <div class="alert alert-success fade in"><a class="close" href="#" data-dismiss="alert">×</a> <span class="icon-flag"> </span> Success message. Your message goes here... Lorem ipsum dolor sit amet.</div> [/col_size]<br class="nc" />[/col_grid]<br class="nc" />[col_grid]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">HTML Styles</h3> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop3" href="javascript:void();">Code explained</a> <div id="pop3_content" style="display: none;"> <div class="popTitle">HTML Styles</div> <div class="popContent"> Simple HTML Styles <pre class="prettyprint linenums">&lt;a href="#"&gt;...&lt;a&gt; &lt;span class="underline"&gt;...&lt;span&gt; &lt;span class="highlight"&gt;...&lt;span&gt;</pre> </div> </div> </div> <a href="#">This is text link</a> lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="underline">This is underlined text</span> morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. <span class="highlight">This is highlighted text</span> sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">Columns</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop4" href="javascript:void();">Code explained</a> <div id="pop4_content" style="display: none;"> <div class="popTitle">Columns</div> <div class="popContent"> For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent). <pre class="prettyprint linenums">&lt;div class="row"&gt; &lt;div class="span4"&gt;...&lt;/div&gt; &lt;div class="span8"&gt;...&lt;/div&gt; &lt;/div&gt;</pre> </div> </div> </div> <!-- // Code explained--> <div class="bs-docs-grid"> <div class="row-fluid show-grid"> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> </div> <div class="row-fluid show-grid"> <div class="span4">4</div> <div class="span4">4</div> <div class="span4">4</div> </div> <div class="row-fluid show-grid"> <div class="span4">4</div> <div class="span8">8</div> </div> <div class="row-fluid show-grid"> <div class="span6">6</div> <div class="span6">6</div> </div> <div class="row-fluid show-grid"> <div class="span12">12</div> </div> </div> [/col_size]<br class="nc" />[/col_grid] [col_grid]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">Lists</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop5" href="javascript:void();">Code explained</a> <div id="pop5_content" style="display: none;"> <div class="popTitle">Lists</div> <div class="popContent"> Unordered Lists <pre class="prettyprint linenums">&lt;ul class="styled"&gt; &lt;li&gt;...&lt;/li&gt; &lt;/ul&gt;</pre> Ordered Lists <pre class="prettyprint linenums">&lt;ol&gt; &lt;li&gt;...&lt;/li&gt; &lt;/ol&gt;</pre> </div> </div> </div> <!-- // Code explained--> <div class="row-fluid"> <div class="span6"> <ul class="styled"> <li>Fusce dapibus, tellus.</li> <li>Etiam porta sem malesuada magna.</li> <li>Donec ullamcorper nulla non metus.</li> <li>Duis mollis, est non.</li> </ul> </div> <div class="span6"> <ol> <li>Fusce dapibus, tellus.</li> <li>Etiam porta sem malesuada magna.</li> <li>Donec ullamcorper nulla non metus.</li> <li>Duis mollis, est non.</li> </ol> </div> </div> [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">Labels &amp; Badges</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop6" href="javascript:void();">Code explained</a> <div id="pop6_content" style="display: none;"> <div class="popTitle">Labels &amp; Badges</div> <div class="popContent"> Use the <code>span</code> tag with <code>-success</code>, <code>-warning</code>, <code>-important</code>, <code>-info</code> or <code>.inverse</code> classes. <pre class="prettyprint linenums">&lt;span class="label [label-NAME]"&gt;Default&lt;/span&gt;</pre> <pre class="prettyprint linenums">&lt;span class="badge [badge-NAME]"&gt;1&lt;/span&gt;</pre> </div> </div> </div> <!-- // Code explained--> <div class="row-fluid"> <div class="span6"> <span class="label">Default</span> Lorem ipsum dolor sit amet. <span class="label label-success">Success</span> Lorem ipsum dolor sit amet. <span class="label label-warning">Warning</span> Lorem ipsum dolor sit amet. <span class="label label-important">Important</span> Lorem ipsum dolor sit amet. <span class="label label-info">Info</span> Lorem ipsum dolor sit amet. </div> <div class="span6"> <span class="badge">1</span> Lorem ipsum dolor sit amet. <span class="badge badge-success">2</span> Lorem ipsum dolor sit amet. <span class="badge badge-warning">4</span> Lorem ipsum dolor sit amet. <span class="badge badge-important">6</span> Lorem ipsum dolor sit amet. <span class="badge badge-info">7</span> Lorem ipsum dolor sit amet. </div> </div> [/col_size]<br class="nc" />[/col_grid] [col_grid]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">Tabs</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop7" href="javascript:void();">Code explained</a> <div id="pop7_content" style="display: none;"> <div class="popTitle">Tabs</div> <div class="popContent"> <pre class="prettyprint linenums">&lt;ul class="nav nav-tabs" id="myTab"&gt; &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#tab1"&gt;tab name 1..&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a data-toggle="tab" href="#tab2"&gt;tab name 2..&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="tab-content" id="myTabContent"&gt; &lt;div id="tab1" class="tab-pane fade in active"&gt;content 1...&lt;/div&gt; &lt;div id="tab1" class="tab-pane fade"&gt;content 2...&lt;/div&gt; &lt;/div&gt;</pre> </div> </div> </div> <!-- // Code explained--> <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#tab1" data-toggle="tab">Content Area 1</a></li> <li><a href="#tab2" data-toggle="tab">Content Area 2</a></li> <li><a href="#tab3" data-toggle="tab">Content Area 3</a></li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade in active" id="tab1"><img class="alignleft" alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-63-300x300.jpg" width="100" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.</div> <div class="tab-pane fade" id="tab2"><img class="alignleft" alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-60-300x300.jpg" width="100" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.</div> <div class="tab-pane fade" id="tab3"><img class="alignleft" alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-32-300x300.jpg" width="100" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.</div> </div> [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">Accordion</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop8" href="javascript:void();">Code explained</a> <div id="pop8_content" style="display: none;"> <div class="popTitle">Accordion</div> <div class="popContent"> <pre class="prettyprint linenums">&lt;div class="accordion" id="accordion2"&gt; &lt;div class="accordion-group"&gt; &lt;div class="accordion-heading"&gt; &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"&gt; Content Area 1 &lt;i class="icon-chevron-down"&gt;&lt;/i&gt; &lt;/a&gt; &lt;/div&gt; &lt;div id="collapseOne" class="accordion-body collapse"&gt; &lt;div class="accordion-inner"&gt; content 1... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="accordion" id="accordion2"&gt; &lt;div class="accordion-group"&gt; &lt;div class="accordion-heading"&gt; &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"&gt; Content Area 2 &lt;i class="icon-chevron-down"&gt;&lt;/i&gt; &lt;/a&gt; &lt;/div&gt; &lt;div id="collapseOne" class="accordion-body collapse"&gt; &lt;div class="accordion-inner"&gt; content 2... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre> </div> </div> </div> <!-- // Code explained--> <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2"> Content Area 1 <i class="icon-chevron-down"></i> </a></div> <div class="accordion-body collapse" id="collapseOne"> <div class="accordion-inner"><img class="alignleft" alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-63-300x300.jpg" width="100" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.</div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2"> Content Area 2 <i class="icon-chevron-down"></i> </a></div> <div class="accordion-body collapse" id="collapseTwo"> <div class="accordion-inner"><img class="alignleft" alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-60-300x300.jpg" width="100" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.</div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2"> Content Area 3 <i class="icon-chevron-down"></i> </a></div> <div class="accordion-body collapse" id="collapseThree"> <div class="accordion-inner"><img class="alignleft" alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-32-300x300.jpg" width="100" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.</div> </div> </div> </div> [/col_size]<br class="nc" />[/col_grid] [col_grid]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">Blockquote</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop9" href="javascript:void();">Code explained</a> <div id="pop9_content" style="display: none;"> <div class="popTitle">Blockquote</div> <div class="popContent"> Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>. <pre class="prettyprint linenums">&lt;blockquote&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt; &lt;small&gt;Someone famous in &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/small&gt; &lt;/blockquote&gt;</pre> </div> </div> </div> <!-- // Code explained--> <blockquote>This is a sample <strong>Blockquote</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra. <small>Someone famous <cite title="Source Title">Source Title</cite></small></blockquote> [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">Code</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop10" href="javascript:void();">Code explained</a> <div id="pop10_content" style="display: none;"> <div class="popTitle">Code</div> <div class="popContent"> Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering. <pre class="prettyprint linenums">&lt;pre class="prettyprint linenums"&gt; pre { width: 100%; margin: 0 0 15px 0; padding: 0 10px; background-color: #F2F2F2; }&lt;/pre&gt;</pre> </div> </div> </div> <!-- // Code explained--> <pre class="prettyprint linenums">pre { width: 100%; margin: 0 0 15px 0; padding: 0 10px; background-color: #F2F2F2; }</pre> [/col_size]<br class="nc" />[/col_grid] [col_grid]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">Table</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop11" href="javascript:void();">Code explained</a> <div id="pop11_content" style="display: none;"> <div class="popTitle">Table</div> <div class="popContent"> Add any of the following classes to the <code>.table</code> base class. <code>.table-striped</code>, <code>.table-bordered</code>, <code>.table-hover</code>, <code>.table-condensed</code> Use contextual classes to color table rows. <code>.success</code>, <code>.error</code>, <code>.warning</code>, <code>.info</code> </div> </div> </div> <!-- // Code explained--> <table class="table table-striped"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td rowspan="2">1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>Mark</td> <td>Otto</td> <td>@TwBootstrap</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">Dropcaps</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop12" href="javascript:void();">Code explained</a> <div id="pop12_content" style="display: none;"> <div class="popTitle">Dropcaps</div> <div class="popContent"> <pre class="prettyprint linenums">&lt;p&gt;&lt;span class="dropcap nocolor"&gt;L&lt;/span&gt;orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan.&lt;/p&gt; &lt;p&gt;&lt;span class="dropcap"&gt;L&lt;/span&gt;orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan.&lt;/p&gt; &lt;p&gt;&lt;span class="dropcap color"&gt;L&lt;/span&gt;orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan.&lt;/p&gt;</pre> </div> </div> </div> <!-- // Code explained--> <span class="dropcap nocolor">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. <span class="dropcap">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. <span class="dropcap color">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. [/col_size]<br class="nc" />[/col_grid] [col_grid]<br class="nc" />[col_size class="col-4" padding="yes"] <h3 class="typo-title">Form</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop13" href="javascript:void();">Code explained</a> <div id="pop13_content" style="display: none;"> <div class="popTitle">Form</div> <div class="popContent"> <h4>Inline form</h4> Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout. <h4>Horizontal form</h4> Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form: <ul> <li>Add <code>.form-horizontal</code> to the form</li> <li>Wrap labels and controls in <code>.control-group</code></li> <li>Add <code>.control-label</code> to the label</li> <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li> </ul> </div> </div> </div> <!-- // Code explained--> <div class="row-fluid"> <div class="span6"><input class="input-medium" type="text" placeholder=".input-medium" /> <input class="input-large" type="text" placeholder=".input-large" /> <input class="input-xlarge" type="text" placeholder=".input-xlarge" /> <input class="input-xlarge" id="disabledInput" type="text" disabled="disabled" placeholder="Disabled input here..." /> <div class="control-group error"> <div class="controls"><input class="input-xlarge" type="text" placeholder="Please correct the error..." /></div> </div> </div> <div class="span6"><input type="radio" name="sex" value="male" />Male<input type="radio" name="sex" value="female" />Female<input type="checkbox" name="vehicle" value="Bike" />I have a bike <input type="checkbox" name="vehicle" value="Car" />I have a car <select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option></select><select multiple="multiple"><option selected="selected" value="audi">Audi</option><option value="saab">Saab</option><option value="opel">Opel</option><option value="volvo">Volvo</option></select></div> </div> <textarea id="" cols="30" name="" placeholder="Type your message..." rows="10"></textarea> <input class="btn" type="submit" value="Submit" /> <input class="btn btn-warning" type="reset" value="Reset" /> [/col_size][/col_grid] [col_grid]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">Buttons</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop14" href="javascript:void();">Code explained</a> <div id="pop14_content" style="display: none;"> <div class="popTitle">Buttons</div> <div class="popContent"> Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering. <h4>Button classes</h4> <code>btn</code>, <code>btn btn-primary</code>, <code>btn btn-info</code>, <code>btn btn-success</code>, <code>btn btn-warning</code>, <code>btn btn-danger</code>, <code>btn btn-inverse</code>, <code>btn btn-link</code> <h4>Button sizes</h4> Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes. </div> </div> </div> <!-- // Code explained--> <div class="row-fluid" style="text-align: center;"> <div class="span6"><button class="btn" type="button">Large Button</button> <button class="btn btn-primary" type="button">Large Button</button> <button class="btn btn-info" type="button">Large Button</button> <button class="btn btn-success" type="button">Large Button</button> <button class="btn btn-warning" type="button">Large Button</button> <button class="btn btn-danger" type="button">Large Button</button></div> <div class="span6"><button class="btn btn-small" type="button">Small Button</button> <button class="btn btn-primary btn-small" type="button">Small Button</button> <button class="btn btn-info btn-small" type="button">Small Button</button> <button class="btn btn-success btn-small" type="button">Small Button</button> <button class="btn btn-warning btn-small" type="button">Small Button</button> <button class="btn btn-danger btn-small" type="button">Small Button</button></div> </div> [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">Progress Bar</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop15" href="javascript:void();">Code explained</a> <div id="pop15_content" style="display: none;"> <div class="popTitle">Progress Bar</div> <div class="popContent"> Default progress bar with a vertical gradient. <pre class="prettyprint linenums">&lt;div class="progress"&gt; &lt;div class="bar" style="width: 60%;"&gt;&lt;/div&gt; &lt;/div&gt;</pre> Uses a gradient to create a striped effect. Not available in IE7-8. <pre class="prettyprint linenums">&lt;div class="progress progress-striped"&gt; &lt;div class="bar" style="width: 20%;"&gt;&lt;/div&gt; &lt;/div&gt;</pre> Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE. <pre class="prettyprint linenums">&lt;div class="progress progress-striped active"&gt; &lt;div class="bar" style="width: 20%;"&gt;&lt;/div&gt; &lt;/div&gt;</pre> </div> </div> </div> <!-- // Code explained--> <div class="progress progress-info progress-striped"></div> <div class="progress active progress-info progress-striped"></div> <div class="progress progress-success progress-striped"></div> <div class="progress progress-warning progress-striped"></div> <div class="progress progress-danger progress-striped"></div> <div class="progress-bar"> <div class="progress"> <div class="bar" style="width: 60%;">Photoshop</div> </div> </div> <div class="progress-bar"> <div class="progress"> <div class="bar" style="width: 75%;">HTML &amp; CSS</div> </div> </div> <div class="progress-bar"> <div class="progress"> <div class="bar" style="width: 33%;">JavaScript</div> </div> </div> <div class="progress-bar"> <div class="progress"> <div class="bar" style="width: 83%;">PHP</div> </div> </div> [/col_size]<br class="nc" />[/col_grid] [col_grid]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">Slider</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop16" href="javascript:void();">Code explained</a> <div id="pop16_content" style="display: none;"> <div class="popTitle">Slider</div> <div class="popContent"> Default progress bar with a vertical gradient. <pre class="prettyprint linenums">&lt;div id="myCarousel" class="carousel slide"&gt; &lt;ol class="carousel-indicators"&gt; &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt; &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt; &lt;/ol&gt; <!-- Carousel items --> &lt;div class="carousel-inner"&gt; &lt;div class="active item"&gt; &lt;img src=".." /&gt; &lt;div class="carousel-caption"&gt;caption 1...&lt;/div&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src=".." /&gt; &lt;div class="carousel-caption"&gt;caption 2...&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; <!-- Carousel nav --> &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&lt;i class="icon-chevron-left"&gt; &lt;/i&gt;&lt;/a&gt; &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&lt;i class="icon-chevron-right"&gt; &lt;/i&gt;&lt;/a&gt; &lt;/div&gt;</pre> </div> </div> </div> <!-- // Code explained--> <div class="carousel slide" id="myCarousel"> <div class="carousel-inner"> <div class="active item"><img alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-slider-1.jpg" /> <div class="carousel-caption"> <h4>Branding Package By Marcus Heydays</h4> A wonderful serenity has taken possession of my entire soul. </div> </div> <div class="item"><img alt="" src="http://www.dev.joomlart.com/jadev2_data/sites/auto/qs.dw-fixel.1402901423/wp-content/uploads/img-slider-2.jpg" /> <div class="carousel-caption"> <h4>Like these sweet mornings</h4> Donec pellentesque venenatis elit, quis aliquet mauris malesuada el. </div> </div> </div> <a class="carousel-control left" href="#myCarousel" data-slide="prev"><i class="icon-chevron-left"> </i></a> <a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="icon-chevron-right"> </i></a> </div> [/col_size]<br class="nc" />[col_size class="col-2" padding="yes"] <h3 class="typo-title">Video</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop17" href="javascript:void();">Code explained</a> <div id="pop17_content" style="display: none;"> <div class="popTitle">Video</div> <div class="popContent"> <pre class="prettyprint linenums">&lt;iframe src="http://player.vimeo.com/video/70002703" height="361" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;&lt;/iframe&gt;</pre> </div> </div> </div> <!-- // Code explained--> <iframe src="http://player.vimeo.com/video/70002703" height="361" width="320" allowfullscreen="" frameborder="0"></iframe>[/col_size]<br class="nc" />[/col_grid] [col_grid]<br class="nc" />[col_size class="col-4" padding="yes"] <h3 class="typo-title">Icons</h3> <!-- Code explained--> <div class="code-explained"> <a class="view-code btn btn-small btn-info" id="pop18" href="javascript:void();">Code explained</a> <div id="pop18_content" style="display: none;"> <div class="popTitle">Icons</div> <div class="popContent"> You can use icons by adding class name <code>.icon-[ICON_NAME]</code> to any element, find more details at <a href="http://fortawesome.github.io/Font-Awesome/icons/">Font-Awesome</a> </div> </div> </div> <!-- // Code explained--> <ul class="the-icons clearfix"> <li><i class="icon-glass"></i> icon-glass</li> <li><i class="icon-music"></i> icon-music</li> <li><i class="icon-search"></i> icon-search</li> <li><i class="icon-envelope"></i> icon-envelope</li> <li><i class="icon-heart"></i> icon-heart</li> <li><i class="icon-star"></i> icon-star</li> <li><i class="icon-star-empty"></i> icon-star-empty</li> <li><i class="icon-user"></i> icon-user</li> <li><i class="icon-film"></i> icon-film</li> <li><i class="icon-th-large"></i> icon-th-large</li> <li><i class="icon-th"></i> icon-th</li> <li><i class="icon-th-list"></i> icon-th-list</li> <li><i class="icon-ok"></i> icon-ok</li> <li><i class="icon-remove"></i> icon-remove</li> <li><i class="icon-zoom-in"></i> icon-zoom-in</li> <li><i class="icon-zoom-out"></i> icon-zoom-out</li> <li><i class="icon-off"></i> icon-off</li> <li><i class="icon-signal"></i> icon-signal</li> <li><i class="icon-cog"></i> icon-cog</li> <li><i class="icon-trash"></i> icon-trash</li> <li><i class="icon-home"></i> icon-home</li> <li><i class="icon-file"></i> icon-file</li> <li><i class="icon-time"></i> icon-time</li> <li><i class="icon-road"></i> icon-road</li> <li><i class="icon-download-alt"></i> icon-download-alt</li> <li><i class="icon-download"></i> icon-download</li> <li><i class="icon-upload"></i> icon-upload</li> <li><i class="icon-inbox"></i> icon-inbox</li> <li><i class="icon-play-circle"></i> icon-play-circle</li> <li><i class="icon-repeat"></i> icon-repeat</li> <li><i class="icon-refresh"></i> icon-refresh</li> <li><i class="icon-list-alt"></i> icon-list-alt</li> <li><i class="icon-lock"></i> icon-lock</li> <li><i class="icon-flag"></i> icon-flag</li> <li><i class="icon-headphones"></i> icon-headphones</li> <li><i class="icon-volume-off"></i> icon-volume-off</li> <li><i class="icon-volume-down"></i> icon-volume-down</li> <li><i class="icon-volume-up"></i> icon-volume-up</li> <li><i class="icon-qrcode"></i> icon-qrcode</li> <li><i class="icon-barcode"></i> icon-barcode</li> <li><i class="icon-tag"></i> icon-tag</li> <li><i class="icon-tags"></i> icon-tags</li> <li><i class="icon-book"></i> icon-book</li> <li><i class="icon-bookmark"></i> icon-bookmark</li> <li><i class="icon-print"></i> icon-print</li> <li><i class="icon-camera"></i> icon-camera</li> <li><i class="icon-font"></i> icon-font</li> <li><i class="icon-bold"></i> icon-bold</li> <li><i class="icon-italic"></i> icon-italic</li> <li><i class="icon-text-height"></i> icon-text-height</li> <li><i class="icon-text-width"></i> icon-text-width</li> <li><i class="icon-align-left"></i> icon-align-left</li> <li><i class="icon-align-center"></i> icon-align-center</li> <li><i class="icon-align-right"></i> icon-align-right</li> <li><i class="icon-align-justify"></i> icon-align-justify</li> <li><i class="icon-list"></i> icon-list</li> <li><i class="icon-indent-left"></i> icon-indent-left</li> <li><i class="icon-indent-right"></i> icon-indent-right</li> <li><i class="icon-facetime-video"></i> icon-facetime-video</li> <li><i class="icon-picture"></i> icon-picture</li> <li><i class="icon-pencil"></i> icon-pencil</li> <li><i class="icon-map-marker"></i> icon-map-marker</li> <li><i class="icon-adjust"></i> icon-adjust</li> <li><i class="icon-tint"></i> icon-tint</li> <li><i class="icon-edit"></i> icon-edit</li> <li><i class="icon-share"></i> icon-share</li> <li><i class="icon-check"></i> icon-check</li> <li><i class="icon-move"></i> icon-move</li> <li><i class="icon-step-backward"></i> icon-step-backward</li> <li><i class="icon-fast-backward"></i> icon-fast-backward</li> <li><i class="icon-backward"></i> icon-backward</li> <li><i class="icon-play"></i> icon-play</li> <li><i class="icon-pause"></i> icon-pause</li> <li><i class="icon-stop"></i> icon-stop</li> <li><i class="icon-forward"></i> icon-forward</li> <li><i class="icon-fast-forward"></i> icon-fast-forward</li> <li><i class="icon-step-forward"></i> icon-step-forward</li> <li><i class="icon-eject"></i> icon-eject</li> <li><i class="icon-chevron-left"></i> icon-chevron-left</li> <li><i class="icon-chevron-right"></i> icon-chevron-right</li> <li><i class="icon-plus-sign"></i> icon-plus-sign</li> <li><i class="icon-minus-sign"></i> icon-minus-sign</li> <li><i class="icon-remove-sign"></i> icon-remove-sign</li> <li><i class="icon-ok-sign"></i> icon-ok-sign</li> <li><i class="icon-question-sign"></i> icon-question-sign</li> <li><i class="icon-info-sign"></i> icon-info-sign</li> <li><i class="icon-screenshot"></i> icon-screenshot</li> <li><i class="icon-remove-circle"></i> icon-remove-circle</li> <li><i class="icon-ok-circle"></i> icon-ok-circle</li> <li><i class="icon-ban-circle"></i> icon-ban-circle</li> <li><i class="icon-arrow-left"></i> icon-arrow-left</li> <li><i class="icon-arrow-right"></i> icon-arrow-right</li> <li><i class="icon-arrow-up"></i> icon-arrow-up</li> <li><i class="icon-arrow-down"></i> icon-arrow-down</li> <li><i class="icon-share-alt"></i> icon-share-alt</li> <li><i class="icon-resize-full"></i> icon-resize-full</li> <li><i class="icon-resize-small"></i> icon-resize-small</li> <li><i class="icon-plus"></i> icon-plus</li> <li><i class="icon-minus"></i> icon-minus</li> <li><i class="icon-asterisk"></i> icon-asterisk</li> <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li> <li><i class="icon-gift"></i> icon-gift</li> <li><i class="icon-leaf"></i> icon-leaf</li> <li><i class="icon-fire"></i> icon-fire</li> <li><i class="icon-eye-open"></i> icon-eye-open</li> <li><i class="icon-eye-close"></i> icon-eye-close</li> <li><i class="icon-warning-sign"></i> icon-warning-sign</li> <li><i class="icon-plane"></i> icon-plane</li> <li><i class="icon-calendar"></i> icon-calendar</li> <li><i class="icon-random"></i> icon-random</li> <li><i class="icon-comment"></i> icon-comment</li> <li><i class="icon-magnet"></i> icon-magnet</li> <li><i class="icon-chevron-up"></i> icon-chevron-up</li> <li><i class="icon-chevron-down"></i> icon-chevron-down</li> <li><i class="icon-retweet"></i> icon-retweet</li> <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li> <li><i class="icon-folder-close"></i> icon-folder-close</li> <li><i class="icon-folder-open"></i> icon-folder-open</li> <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li> <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li> <li><i class="icon-hdd"></i> icon-hdd</li> <li><i class="icon-bullhorn"></i> icon-bullhorn</li> <li><i class="icon-bell"></i> icon-bell</li> <li><i class="icon-certificate"></i> icon-certificate</li> <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li> <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li> <li><i class="icon-hand-right"></i> icon-hand-right</li> <li><i class="icon-hand-left"></i> icon-hand-left</li> <li><i class="icon-hand-up"></i> icon-hand-up</li> <li><i class="icon-hand-down"></i> icon-hand-down</li> <li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li> <li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li> <li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li> <li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li> <li><i class="icon-globe"></i> icon-globe</li> <li><i class="icon-wrench"></i> icon-wrench</li> <li><i class="icon-tasks"></i> icon-tasks</li> <li><i class="icon-filter"></i> icon-filter</li> <li><i class="icon-briefcase"></i> icon-briefcase</li> <li><i class="icon-fullscreen"></i> icon-fullscreen</li> </ul> [/col_size]<br class="nc" />[/col_grid] [/col_grid_wrap]

Copy Code to Clipboard Raw

Sign-in or Create a Free Account.

Snippi uses Twitter or Facebook to register and create accounts. Registration will enable you to keep track of your snippets. We never spam your timeline or wall. Ever.

Sign-in with Facebook Sign-in with Twitter