Typography

This documentation was adapted from Bootstrap3 at http://getbootstrap.com official website in providing useful references on its many helpers included. However due to Blogger post editor limitations, slight changes has been made by theme designer to allow the features to work with the existing environment.

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. A Bootstrap heading

Semibold 36px

h2. A Bootstrap heading

Semibold 30px

h3. A Bootstrap heading

Semibold 24px

h4. A Bootstrap heading

Semibold 20px

h5. A Bootstrap heading

Semibold 16px

h6. A Bootstrap heading

Semibold 14px

<h1>h1. A Bootstrap heading</h1>
<h2>h2. A Bootstrap heading</h2>
<h3>h3. A Bootstrap heading</h3>
<h4>h4. A Bootstrap heading</h4>
<h5>h5. A Bootstrap heading</h5>
<h6>h6. A Bootstrap heading</h6>

Body Copy

h1. A Bootstrap heading Secondary text

h2. A Bootstrap heading Secondary text

h3. A Bootstrap heading Secondary text

h4. A Bootstrap heading Secondary text

h5. A Bootstrap heading Secondary text

h6. A Bootstrap heading Secondary text

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2> 
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4> 
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Lead body copy

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<span class="lead">...</span>

Address

Irsah Indesigns.
1234 Market Street, Suite 1000
Kuala Lumpur, MALAYSIA 68000
P: (123) 456-7890

Full Name
first.last@example.com

<address>
<strong>Irsah Indesigns</strong>
<br>1234 Market Street, Suite 1000
<br>Kuala Lumpur, MALAYSIA 68000
<br><abbr title="Phone">P:</abbr> (123) 456-7890 
</address>

<address>
<strong>Full Name</strong>
<br><a href="mailto:#">first.last@example.com</a>
</address>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

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

<blockquote>
 <span class="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</span>
</blockquote>

Blockquote options

Style & content changes for simple variations on a standard <blockquote>.

Naming a source

Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.

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

Someone famous in Source Title

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alternate displays

Add .blockquote-reverse for a blockquote with right-aligned content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.Someone famous in Source Title

<blockquote class="blockquote-reverse">
 ...
</blockquote>

Lists

Unordered

A list of items in which the order does not explicitly matter.

• 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

<ul>
 <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

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
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

<ol>
<li>...</li>
</ol>

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

• 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

<ul class="list-unstyled">
<li>...</li>
</ul>

Forms

Basic example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with.form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Email address

Password

File input

Example block-level help text here.

Check me out

<form> 
 <div class="form-group">
  <label for="exampleInputEmail1">Email address</label> 
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
 </div> 
 <div class="form-group"> 
  <label for="exampleInputPassword1">Password</label> 
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
 </div> 
 <div class="form-group"> 
  <label for="exampleInputFile">File input</label> 
  <input type="file" id="exampleInputFile"> 
  <div class="help-block p">Example block-level help text here.</div>
 </div> 
 <div class="checkbox">
  <label><input type="checkbox"> Check me out </label> 
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
</form>

Buttons

Button tags

Use the button classes on an <a>, <button>, or <input> element.

Link

<a class="btn btn-default" href="#" role="button">Link</a> 
<button class="btn btn-default" type="submit">Button</button> 
<input class="btn btn-default" type="button" value="Input"/> 
<input class="btn btn-default" type="submit" value="Submit"/><

Options

Use any of the available button classes to quickly create a styled button.

<!-- Standard button --> 
<button type="button" class="btn btn-default">Default</button> 

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button> 

<!-- Indicates a successful or positive action --> 
<button type="button" class="btn btn-success">Success</button> 

<!-- Contextual button for informational alert messages --> 
<button type="button" class="btn btn-info">Info</button> 

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button> 

<!-- Indicates a dangerous or potentially negative action --> 
<button type="button" class="btn btn-danger">Danger</button> 

<!-- Deemphasize a button by making it look like a link while maintaining button behavior --> 
<button type="button" class="btn btn-link">Link</button>

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

<div class="p">
 <button type="button" class="btn btn-primary btn-lg">Large button</button> 
 <button type="button" class="btn btn-default btn-lg">Large button</button> 
</div> 

<div class="p"> 
 <button type="button" class="btn btn-primary">Default button</button>
 <button type="button" class="btn btn-default">Default button</button>
</div> 

<div class="p"> 
 <button type="button" class="btn btn-primary btn-sm">Small button</button> 
 <button type="button" class="btn btn-default btn-sm">Small button</button> 
</div> 

<div class="p"> 
 <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
 <button type="button" class="btn btn-default btn-xs">Extra small button</button> 
</div>

All credits documentation from Bootstrap3