Shortcodes para Traballo en Espazo Lectura

Pricing table example

Silver

POPULAR

  • 10 users
  • Unlimited access
  • 3TB of space
  • E-mail support

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.


$15.99 / month


Select plan

Bronze

POPULAR

  • 20 users
  • Unlimited access with no limits
  • 5TB of space

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.


$10.99 / month


Select plan

Economy

BUDGET

  • 10 users
  • 5TB of space

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.


$8.99 / month


Select plan

<div class="span3">
	<div class="well">
		<h2 class="muted">Silver</h2>
		<p><span class="label">POPULAR</span></p>
		<ul>
			<li>10 users</li>
			<li>Unlimited access</li>
			<li>3TB of space</li>
			<li>E-mail support</li>
		</ul>          
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
		<hr>
		<h3>$15.99 / month</h3>
		<hr>
		<p><a class="btn btn-large" href="#"><i class="icon-ok"></i> Select plan</a></p>
	</div>
</div>
<div class="span3">
	<div class="well">
		<h2 class="text-warning">Bronze</h2>
		<p><span class="label label-success">POPULAR</span></p>
		<ul>
			<li>20 users</li>
			<li>Unlimited access with no limits</li>
			<li>5TB of space</li>
		</ul>          
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
		<hr>
		<h3>$10.99 / month</h3>
		<hr>
		<p><a class="btn btn-success btn-large" href="#"><i class="icon-ok"></i> Select plan</a></p>
	</div>
</div>
<div class="span3">
	<div class="well">
		<h2 class="text-info">Economy</h2>
		<p><span class="label label-info">BUDGET</span></p>
		<ul>
			<li>10 users</li>
			<li>5TB of space</li>
		</ul>          
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
		<hr>
		<h3>$8.99 / month</h3>
		<hr>
      <p><a class="btn btn-large" href="#"><i class="icon-ok"></i> Select plan</a></p>
	</div>
</div>


Tables

Default styles
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table class="table">
<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>

With zebra-striping
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<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>

With borders and rounded corners
#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
<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>

Enable a hover state on table rows
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table table-hover">
<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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

Color table rows
#ProductPayment TakenStatus
1TB – Monthly01/04/2012Approved
2TB – Monthly02/04/2012Declined
3TB – Monthly03/04/2012Pending
4TB – Monthly04/04/2012Call in to confirm
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Product</th>
<th>Payment Taken</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="warning">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody>
</table>

Condensed table example
UsernameDate registeredRoleStatus
Donna R. Folse2012/05/06Editor Active
Emily F. Burns2011/12/01Staff Banned
Andrew A. Stout2010/08/21User Inactive
Mary M. Bryan2009/04/11Editor Pending
Mary A. Lewis2007/02/01Staff Active
<div class="span5">
<table class="table table-striped table-condensed">
	  <thead>
      <tr>
          <th>Username</th>
          <th>Date registered</th>
          <th>Role</th>
          <th>Status</th>                                          
      </tr>
  </thead>   
  <tbody>
    <tr>
        <td>Donna R. Folse</td>
        <td class="center">2012/05/06</td>
        <td class="center">Editor</td>
        <td class="center">
            <span class="label label-success">Active</span>
        </td>                                       
    </tr>
    <tr>
        <td>Emily F. Burns</td>
        <td class="center">2011/12/01</td>
        <td class="center">Staff</td>
        <td class="center">
            <span class="label label-important">Banned</span>
        </td>                                       
    </tr>
    <tr>
        <td>Andrew A. Stout</td>
        <td class="center">2010/08/21</td>
        <td class="center">User</td>
        <td class="center">
            <span class="label">Inactive</span>
        </td>                                        
    </tr>
    <tr>
        <td>Mary M. Bryan</td>
        <td class="center">2009/04/11</td>
        <td class="center">Editor</td>
        <td class="center">
            <span class="label label-warning">Pending</span>
        </td>                                       
    </tr>
    <tr>
        <td>Mary A. Lewis</td>
        <td class="center">2007/02/01</td>
        <td class="center">Staff</td>
        <td class="center">
            <span class="label label-success">Active</span>
        </td>                                        
    </tr>                                   
  </tbody>
</table>
</div>

Stats example

Vital Stats 1268
  • 36% Clicks 167

  • 52% Uniquie Clicks 77

  • 93% Impressions 157

  • 5% Online Users 8

<div class="span4">
	<h4>Vital Stats  <span class="label label-success pull-right">1268</span></h4>
	<ul class="unstyled">
	    <li>
	        36% Clicks <span class="pull-right strong">167</span>
	        <div class="progress progress-striped ">
	            <div class="bar" style="width: 36%;"></div>
	        </div>
	    </li>
	    <li>52% Uniquie Clicks <span class="pull-right strong">77</span>
	        <div class="progress progress-success progress-striped ">
	            <div class="bar" style="width: 52%;"></div>
	        </div>
	    </li>
	    <li>93% Impressions <span class="pull-right strong">157</span>
	        <div class="progress progress-warning progress-striped ">
	            <div class="bar" style="width: 93%;"></div>
	        </div>
	    </li>
	    <li>5% Online Users <span class="pull-right strong">8</span>
	        <div class="progress progress-danger progress-striped ">
	            <div class="bar" style="width: 5%;"></div>
	        </div>
	    </li>
	</ul>
</div>

Togglable tabs

Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

<div class="tabbable">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#tab1" data-toggle="tab">Section</a></li>
              <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
              <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="tab1">
                <p class="last">Donec venenatis blandit consequat. Vivamus placerat condimentum ligula, adipiscing luctus dolor adipiscing non. Suspendisse dictum porta lorem, ac iaculis nisl porttitor at.</p>
              </div><!-- tab-pane -->
              <div class="tab-pane" id="tab2">
                <ul class="nav nav-list">
          		  <li class="nav-header">List header</li>
          		  <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
          		  <li><a href="#"><i class="icon-book"></i> Library</a></li>
          		  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
          		  <li class="nav-header">Another list header</li>
          		  <li><a href="#"><i class="icon-user"></i> Profile</a></li>
          		  <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
          		  <li class="divider"></li>
          		  <li><a href="#"><i class="icon-flag"></i> Help</a></li>
        		</ul>
              </div><!-- tab-pane -->
              <div class="tab-pane" id="tab3">
                <ul class="tags clearfix">
      	    	  <li><a href="#">quote</a></li>
	        	  <li><a href="#">copyright</a></li>
	        	  <li><a href="#">brand</a></li>
	        	  <li><a href="#">tag</a></li>
	        	  <li><a href="#">design</a></li>
	        	  <li><a href="#">graphics</a></li>
	        	  <li><a href="#">battle</a></li>
	        	  <li><a href="#">envato</a></li>
		  		</ul>
              </div><!-- tab-pane -->
            </div><!-- tab-content -->
          </div><!-- tabbable -->

Live fluid grid example

The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

Span1+Span11

Curabitur lobortis dolor id metus.
Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.

Span2+Span10

Curabitur lobortis dolor id metus aliquam eget suscipit elit aliquam.
Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.

Span3+Span9

Curabitur lobortis dolor id metus aliquam eget suscipit elit aliquam.
Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.


Span4+Span8

Vivamus ipsum nisi, congue eget mollis et, ultrices vel urna. Duis molestie eros magna, sed feugiat est. Quisque nulla augue, volutpat viverra auctor sed, blandit eget diam. Donec lacinia lectus eget neque vulputate euismod. Etiam at velit quam, eu accumsan ipsum. Phasellus dapibus nulla vitae mi varius vestibulum. Integer convallis nunc vel metus tincidunt at commodo nulla consequat.
Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.

Span5+Span7

Vivamus ipsum nisi, congue eget mollis et, ultrices vel urna. Duis molestie eros magna, sed feugiat est. Quisque nulla augue, volutpat viverra auctor sed, blandit eget diam. Donec lacinia lectus eget neque vulputate euismod. Etiam at velit quam, eu accumsan ipsum. Phasellus dapibus nulla vitae mi varius vestibulum. Integer convallis nunc vel metus tincidunt at commodo nulla consequat.
Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.

Span6+Span6

Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.
Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.

Span7+Span5

Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.
Vivamus ipsum nisi, congue eget mollis et, ultrices vel urna. Duis molestie eros magna, sed feugiat est. Quisque nulla augue, volutpat viverra auctor sed, blandit eget diam. Donec lacinia lectus eget neque vulputate euismod. Etiam at velit quam, eu accumsan ipsum. Phasellus dapibus nulla vitae mi varius vestibulum. Integer convallis nunc vel metus tincidunt at commodo nulla consequat.

Span8+Span4

Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.
Vivamus ipsum nisi, congue eget mollis et, ultrices vel urna. Duis molestie eros magna, sed feugiat est. Quisque nulla augue, volutpat viverra auctor sed, blandit eget diam. Donec lacinia lectus eget neque vulputate euismod. Etiam at velit quam, eu accumsan ipsum. Phasellus dapibus nulla vitae mi varius vestibulum. Integer convallis nunc vel metus tincidunt at commodo nulla consequat.

Span9+Span3

Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.
Vivamus ipsum nisi, congue eget mollis et, ultrices vel urna. Duis molestie eros magna, sed feugiat est. Quisque nulla augue, volutpat viverra auctor sed, blandit eget diam.

Span10+Span2

Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.
Vivamus ipsum nisi, congue eget mollis et, ultrices vel urna. Duis molestie eros magna, sed feugiat est.

Span11+Span1

Nulla et justo at felis ultrices accumsan vel molestie tellus. Curabitur sed nulla quis metus suscipit scelerisque eget sed nisl. Quisque cursus dignissim augue. Duis eleifend lorem vitae libero ornare sed porttitor lacus ultrices. Praesent a massa dui, eu feugiat metus. Etiam ante metus, blandit ac pharetra non, bibendum vitae est. Integer in ipsum magna. Sed volutpat interdum ipsum a adipiscing. Etiam lorem est, tincidunt nec condimentum a, placerat vitae ipsum. Donec convallis est non lacus cursus in eleifend ante ornare. Nulla orci lorem, fringilla quis laoreet sed, ullamcorper nec orci. Aliquam eleifend sapien at ipsum consequat porta. Donec vitae mollis erat. Sed scelerisque, lectus at volutpat mattis, nunc ligula consectetur enim, at facilisis orci dui semper erat.
Curabitur lobortis dolor id metus.
[row][spanX]content here[/spanX][/row] Where spanX – span1…span12


Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen



icon_name: glass


icon_name: heart


icon_name: film


icon_name: ok

[icon icon_name='bootstrap icon name']Name for icons here after icon-

Badges

1

2
3
4
5
6
[badge style='1..6']content here[/badge]

Labels

label #1

label #2
label #3
label #4
label #5
label #6
[label style='1..6']content here[/label]

Alerts

Alert Error
Alert Success
Alert Information
[alert style='1..3']content here[/alert]

Progress Bars

[progress percent="Bar Percent" style='1..4']


AdSense with float Left

Maecenas odio purus, imperdiet sit amet pellentesque et, venenatis eget turpis. Donec fringilla porttitor massa, a tristique nibh varius nec. Maecenas tincidunt egestas consequat. Vestibulum imperdiet, velit in adipiscing vestibulum, massa nisi ultricies eros, ac mattis mauris nulla ac urna. Vivamus leo libero, vestibulum quis blandit quis, lobortis at quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas porta sem vitae turpis congue aliquet.

In hac habitasse platea dictumst. Praesent sollicitudin est id enim elementum in placerat sapien aliquam. Curabitur in est tellus, placerat pellentesque nulla. Quisque eu eleifend neque. Nulla purus eros, tempus vitae varius ullamcorper, ornare vel purus. Donec adipiscing, justo at consequat commodo, sapien lacus pellentesque mauris, a faucibus ante tortor ac neque. Integer in euismod massa. Suspendisse potenti. Morbi diam neque, rhoncus in pellentesque et, sollicitudin id est.

Cras quam nisi, molestie a imperdiet ut, sagittis sit amet ante. Mauris adipiscing, lorem tincidunt placerat auctor, turpis diam porta risus, ac tempus augue sem nec lorem. Sed ultrices congue magna, et tempor nisl pellentesque in. Proin convallis congue libero non fermentum. Integer feugiat, elit quis rutrum fermentum, nulla elit bibendum mauris, vehicula accumsan enim dui eget arcu. Nullam sed erat sit amet lacus faucibus eleifend nec nec lorem. Quisque gravida convallis luctus. Cras convallis lacus dolor. Suspendisse sodales odio eget eros porta id interdum felis aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi mattis faucibus porttitor.

[show_AdSense float="left" ad_client="ca-pub-XXXXXXXXXXXXXXXX" ad_slot="XXXXXXXXXX" ad_width="336" ad_height="280"]

AdSense with float Right

Maecenas odio purus, imperdiet sit amet pellentesque et, venenatis eget turpis. Donec fringilla porttitor massa, a tristique nibh varius nec. Maecenas tincidunt egestas consequat. Vestibulum imperdiet, velit in adipiscing vestibulum, massa nisi ultricies eros, ac mattis mauris nulla ac urna. Vivamus leo libero, vestibulum quis blandit quis, lobortis at quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas porta sem vitae turpis congue aliquet.

In hac habitasse platea dictumst. Praesent sollicitudin est id enim elementum in placerat sapien aliquam. Curabitur in est tellus, placerat pellentesque nulla. Quisque eu eleifend neque. Nulla purus eros, tempus vitae varius ullamcorper, ornare vel purus. Donec adipiscing, justo at consequat commodo, sapien lacus pellentesque mauris, a faucibus ante tortor ac neque. Integer in euismod massa. Suspendisse potenti. Morbi diam neque, rhoncus in pellentesque et, sollicitudin id est.

Cras quam nisi, molestie a imperdiet ut, sagittis sit amet ante. Mauris adipiscing, lorem tincidunt placerat auctor, turpis diam porta risus, ac tempus augue sem nec lorem. Sed ultrices congue magna, et tempor nisl pellentesque in. Proin convallis congue libero non fermentum. Integer feugiat, elit quis rutrum fermentum, nulla elit bibendum mauris, vehicula accumsan enim dui eget arcu. Nullam sed erat sit amet lacus faucibus eleifend nec nec lorem. Quisque gravida convallis luctus. Cras convallis lacus dolor. Suspendisse sodales odio eget eros porta id interdum felis aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi mattis faucibus porttitor.

[show_AdSense float="right" ad_client="ca-pub-XXXXXXXXXXXXXXXX" ad_slot="XXXXXXXXXX" ad_width="336" ad_height="280"]

Youtube Video

[video id="G_G8SdXktHg" type="youtube" width="" height="420"]

Vimeo Video

[video id="7449107" type="vimeo" width="" height="420"]

Dailymotion Video

[video id="xmwh7m" type="dailymotion" width="" height="420"]


Unordered List

  • Item One
  • Item Two
  • Item Three
[list style="1" underline="0"]
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]

Ordered List

  • Item One
  • Item Two
  • Item Three
[list style="2" underline="0"]
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]


Square List

  • Item One
  • Item Two
  • Item Three
[list style="3" underline="0"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]

Circle List

  • Item One
  • Item Two
  • Item Three
[list style="4" underline="0"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]


Bullet List

  • Item One
  • Item Two
  • Item Three
[list style="5" underline="0"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]

Unordered List Underline

  • Item One
  • Item Two
  • Item Three
[list style="1" underline="1"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]


Ordered List Underline

  • Item One
  • Item Two
  • Item Three
[list style="2" underline="1"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]

Square List Underline

  • Item One
  • Item Two
  • Item Three
[list style="3" underline="1"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]


Circle List Underline

  • Item One
  • Item Two
  • Item Three
[list style="4" underline="1"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]

Bullet List Underline

  • Item One
  • Item Two
  • Item Three
[list style="5" underline="1"]<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
[/list]
Cross browser compatibility

IE9 doesn’t crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

ButtonShortcodeDescription
[button style='1' caption='Default' link='button url'][/button]Standard gray button with gradient
[button style='2' caption='Primary' link='button url'][/button]Provides extra visual weight and identifies the primary action in a set of buttons
[button style='3' caption='Info' link='button url'][/button]Used as an alternative to the default styles
[button style='4' caption='Success' link='button url'][/button]Indicates a successful or positive action
[button style='5' caption='Warning' link='button url'][/button]Indicates caution should be taken with this action
[button style='6' caption='Danger' link='button url'][/button]Indicates a dangerous or potentially negative action
[button style='7' caption='Inverse' link='button url'][/button]Alternate dark gray button, not tied to a semantic action or use
[button style='8' caption='Link' link='button url'][/button]Deemphasize a button by making it look like a link while maintaining button behavior
WP Twitter Auto Publish Powered By : XYZScripts.com