CSS

Buttons

Default Size






Large Size






Small Size






Block Buttons






Default Size

[html]
<button class=”btn btn-default”>Press me!</button>
<button class=”btn btn-primary”>Press me!</button>
<button class=”btn btn-info”>Press me!</button>
<button class=”btn btn-success”>Press me!</button>
<button class=”btn btn-warning”>Press me!</button>
<button class=”btn btn-danger”>Press me!</button>
[/html]

Large Size

[html]
<button class=”btn btn-lg btn-default”>Press me!</button>
<button class=”btn btn-lg btn-primary”>Press me!</button>
<button class=”btn btn-lg btn-info”>Press me!</button>
<button class=”btn btn-lg btn-success”>Press me!</button>
<button class=”btn btn-lg btn-warning”>Press me!</button>
<button class=”btn btn-lg btn-danger”>Press me!</button>
[/html]

Small Size

[html]
<button class=”btn btn-sm btn-default”>Press me!</button>
<button class=”btn btn-sm btn-primary”>Press me!</button>
<button class=”btn btn-sm btn-info”>Press me!</button>
<button class=”btn btn-sm btn-success”>Press me!</button>
<button class=”btn btn-sm btn-warning”>Press me!</button>
<button class=”btn btn-sm btn-danger”>Press me!</button>
[/html]

Block Buttons

[html]
<button class=”btn btn-block btn-default”>Press me!</button>
<button class=”btn btn-block btn-primary”>Press me!</button>
<button class=”btn btn-block btn-info”>Press me!</button>
<button class=”btn btn-block btn-success”>Press me!</button>
<button class=”btn btn-block btn-warning”>Press me!</button>
<button class=”btn btn-block btn-danger”>Press me!</button>
[/html]

You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Headers

Header level One

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, accusamus.

Header level two

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, impedit.

Header level three

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, veniam.

Header level four

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laboriosam?

Header level five

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, expedita.

Header level six

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius!

Header level One

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, accusamus.

Header level two

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, impedit.

Header level three

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, veniam.

Header level four

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laboriosam?

Header level five

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, expedita.

Header level six

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius!

Normal Headers

[html]
<h1>Header level One</h1>
<h2>Header level two</h2>
<h3>Header level three</h3>
<h4>Header level four</h4>
<h5>Header level five</h5>
<h6>Header level six</h6>
[/html]

Section Titles

[html]
<h1 class=”section-title”>Header level One</h1>
<h2 class=”section-title”>Header level two</h2>
<h3 class=”section-title”>Header level three</h3>
<h4 class=”section-title”>Header level four</h4>
<h5 class=”section-title”>Header level five</h5>
<h6 class=”section-title”>Header level six</h6>
[/html]

You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

List

Unordered

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horizontal Description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Unordered

[html]
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
[/html]

Ordered

[html]
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
[/html]

Description

[html]
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
[/html]

Horizontal Description

[html]
<dl class=”dl-horizontal”>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
[/html]

You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

[html]
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<small>Someone famous in <cite title=”Source Title”>Source Title</cite></small>
</blockquote><blockquote class=”pull-right”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<small>Someone famous in <cite title=”Source Title”>Source Title</cite></small>
</blockquote>
[/html]

You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Badges

Nav Badges

[html]
<a href=”#”>Inbox <span class=”badge”>42</span></a>
<a href=”#”>Unread <span class=”badge”>12</span></a>
<a href=”#”>Messages <span class=”badge”>42</span></a>
[/html]

Nav Badges

[html]
<ul class=”nav nav-pills nav-stacked” style=”max-width: 260px;”>
<li class=”active”>
<a href=”#”>
<span class=”badge pull-right”>42</span>
Home
</a>
</li>
<li>
<a href=”#”>
<span class=”badge pull-right”>359</span>
Profile
</a>
</li>
<li>
<a href=”#”>
<span class=”badge pull-right”>3</span>
Messages
</a>
</li>
</ul>
[/html]

You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Labels

Default
Primary
Success
Info
Warning
Danger

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
[html]
<span class=”label label-default”>Default</span>
<span class=”label label-primary”>Primary</span>
<span class=”label label-success”>Success</span>
<span class=”label label-info”>Info</span>
<span class=”label label-warning”>Warning</span>
<span class=”label label-danger”>Danger</span><h1>Example heading <span class=”label label-default”>New</span></h1>
<h2>Example heading <span class=”label label-primary”>New</span></h2>
<h3>Example heading <span class=”label label-success”>New</span></h3>
<h4>Example heading <span class=”label label-info”>New</span></h4>
<h5>Example heading <span class=”label label-warning”>New</span></h5>
<h6>Example heading <span class=”label label-danger”>New</span></h6>
[/html]

You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Tables

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table Striped

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
[html]
<table class=”table”>
<thead>
<tr>
<th>…</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
[/html]

Table Striped

[html]
<table class=”table table-striped”>
<thead>
<tr>
<th>…</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
[/html]

You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Syntax Code

[js]
// SyntaxHighlighter makes your code snippets beautiful without tiring your servers.
// http://alexgorbatchev.com
var setArray = function(elems) {
this.length = 0;
push.apply(this, elems);
return this;
}
[/js]
[html]
<pre class=”brush: js”>// Code…
</pre>
[/html]

Syntax Highlighter Plugin

[[js]]
// code
// ...
[[/js]]
Change js for html, php, cpp, etc.