Default Pattern
 
Welcome visitor you can login or create an account.

Typography

Typography

Client side of the template is based on «Twitter Bootstrap». On this section you will find examples of how to use the basic styles of «Twitter Bootstrap» and other styles, with help of which you will be able to design and make almost any interested you website page. In this template, we have also added a number of styles and advanced features that make the «Precise» very flexible template that is suitable for all business tasks.

Headings

All HTML headings, <h1> through <h6> are available.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Body copy

Bootstrap´s global default font-size is 13px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).

«Itembridge» сompany became famous among thousands of visitors and purchasers of the most known online resource copyright works during the short period of its existence.

«Itembridge» offers a number of creative products such as: online stores templates, one page promo sites, graphic works and corporate style for the wide audience.

The company owes its success to the friendly team of professionals, who create exclusive designs, unique and clear functionality of the templates.

Lead body copy

Make a paragraph stand out by adding .lead.

«Itembridge» сompany became famous among thousands of visitors and purchasers of the most known online resource copyright works during the short period of its existence.

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

Emphasis

Make use of HTML's default emphasis tags with lightweight styles.

<small>

For de-emphasizing inline or blocks of text, use the small tag.

This line of text is meant to be treated as fine print.

<p>
    <small>This line of text is meant to be treated as fine print.</small>
</p>

Bold

For emphasizing a snippet of text with a heavier font-weight.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italics

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Emphasis classes

Convey meaning through color with a handful of emphasis utility classes.

«Itembridge» offers a number of creative products.

The company owes its success to the friendly team of professionals.

We create exclusive designs, unique and clear functionality of the templates.

Corporate style and graphic works always have the perfect designs.

You do not have to change a lot of settings to achieve the desired style.

<p class="muted">«Itembridge» offers a number of creative products.</p>
<p class="text-warning">The company owes its success to the friendly team of professionals.</p>
<p class="text-error">We create exclusive designs, unique and clear functionality of the templates.</p>
<p class="text-info">Corporate style and graphic works always have the perfect designs.</p>
<p class="text-success">You do not have to change a lot of settings to achieve the desired style.</p>
                

Abbreviations

Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

<abbr>

For expanded text on long hover of an abbreviation, include the title attribute.

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

<abbr class="initialism">

Add .initialism to an abbreviation for a slightly smaller font-size.

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Addresses

Present contact information for the nearest ancestor or the entire body of work.

<address>

Preserve formatting by ending all lines with <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@gmail.com
<address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@gmail.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>.

«Itembridge» offers a number of creative products.

<blockquote>
    <p>«Itembridge» offers a number of creative products.</p>
</blockquote>
                

Blockquote options

Style and content changes for simple variations on a standard blockquote.

Naming a source

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

«Itembridge» offers a number of creative products.

Someone famous in Source Title

<blockquote>
    <p>«Itembridge» offers a number of creative products.</p>
    <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
                

Alternate displays

Use .pull-right for a floated, right-aligned blockquote.

«Itembridge» offers a number of creative products.

Someone famous in Source Title

<blockquote class="pull-right">
    ...
</blockquote>
                

Lists

Unordered

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

  • «Itembridge» company welcomes you
  • «Itembridge» is famous among thousands of people
  • «Itembridge» offers a number of creative products
    • It produces online stores templates
    • It produces one page promo sites
    • Company produces graphic works
  • It produces corporate style for the wide audience
  • Graphic works have the perfect design
  • You do not have to change a lot of settings
<ul>
    <li>...</li>
</ul>
                

Ordered

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

  1. «Itembridge» company welcomes you
  2. «Itembridge» is famous among thousands of people
  3. «Itembridge» offers a number of creative products
  4. It produces online stores templates
  5. It produces one page promo sites
  6. Company produces graphic works
  7. It produces corporate style for the wide audience
  8. Graphic works have the perfect design
<ol>
    <li>...</li>
</ol>
                

Unstyled

A list of items with no list-style or additional left padding.

  • «Itembridge» company welcomes you
  • «Itembridge» is famous among thousands of people
  • «Itembridge» offers a number of creative products
    • It produces online stores templates
    • It produces one page promo sites
    • Company produces graphic works
  • It produces corporate style for the wide audience
  • Graphic works have the perfect design
  • You do not have to change a lot of settings
<ul class="unstyled">
    <li>...</li>
</ul>
                

Description

A list of terms with their associated descriptions.

Description lists
A description list is perfect for defining terms.
«Itembridge»
«Itembridge» сompany became famous among thousands of visitors and purchasers of the most known online resource copyright works during the short period of its existence.
«Itembridge» offers a number of creative products.
The Team
The company owes its success to the friendly team of professionals, who create exclusive designs, unique and clear functionality of the templates.
<dl>
    <dt>...</dt>
    <dd>...</dd>
</dl>
                

Horizontal description

Make terms and descriptions in <dl> line up side-by-side.

Description lists
A description list is perfect for defining terms.
«Itembridge»
«Itembridge» сompany became famous among thousands of visitors and purchasers of the most known online resource copyright works during the short period of its existence.
«Itembridge» offers a number of creative products.
The Team
The company owes its success to the friendly team of professionals, who create exclusive designs, unique and clear functionality of the templates.
Activity
«Itembridge» produces online stores templates, one page promo sites, graphic works and corporate style for the wide audience.
<dl class="dl-horizontal">
    <dt>...</dt>
    <dd>...</dd>
</dl>
                

Heads up!
Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.
For example, <code><section></code> should be wrapped as inline.
                

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>
<pre>
    &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>
                

Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

Add classes to an <img> element to easily style images in any project.

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">
                

Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

Precise Icon Set

  • ib-icon-keyboard-cable0x1f000
  • ib-icon-wifi-router0x1f001
  • ib-icon-camera0x1f002
  • ib-icon-cloud-two0x1f003
  • ib-icon-sun-and-rainy0x1f004
  • ib-icon-smile-sad0x1f005
  • ib-icon-mail-remove0x1f006
  • ib-icon-ufo0x1f007
  • ib-icon-diary-ask0x1f008
  • ib-icon-mail-add0x1f009
  • ib-icon-cart-empty-two0x1f00a
  • ib-icon-dustbin-empty0x1f00b
  • ib-icon-cutlery0x1f00c
  • ib-icon-color-palette0x1f00d
  • ib-icon-cart-add-two0x1f00e
  • ib-icon-diagram-three-quarters0x1f00f
  • ib-icon-rankings-two0x1f010
  • ib-icon-media-paly0x1f011
  • ib-icon-medicine-tablets0x1f012
  • ib-icon-folder-two0x1f013
  • ib-icon-cart2-add-four0x1f014
  • ib-icon-wallet0x1f015
  • ib-icon-folder-third0x1f016
  • ib-icon-media-stop0x1f017
  • ib-icon-equalizer-two0x1f018
  • ib-icon-monitor-remove0x1f019
  • ib-icon-flag0x1f01a
  • ib-icon-heart-remove0x1f01b
  • ib-icon-smile-smiley0x1f01c
  • ib-icon-medicine-emblem0x1f01d
  • ib-icon-scissors-blunt0x1f01e
  • ib-icon-chain0x1f01f
  • ib-icon-ink-pen-remove0x1f020
  • ib-icon-hourglass0x1f021
  • ib-icon-magnifier0x1f022
  • ib-icon-bag-minus-three0x1f023
  • ib-icon-package-square0x1f024
  • ib-icon-cursor-press0x1f025
  • ib-icon-Paper-cup-full0x1f026
  • ib-icon-cart-remove-two0x1f027
  • ib-icon-phone-book0x1f028
  • ib-icon-code0x1f029
  • ib-icon-sheet-added0x1f02a
  • ib-icon-cart2-added-four0x1f02b
  • ib-icon-diagram-half-fourth0x1f02c
  • ib-icon-settings0x1f02d
  • ib-icon-pan-on-fire0x1f02e
  • ib-icon-ice-cream0x1f02f
  • ib-icon-radiation0x1f030
  • ib-icon-umbrella-opened0x1f031
  • ib-icon-bag-minus-five0x1f032
  • ib-icon-sensor-move-right-left-hand0x1f033
  • ib-icon-lodge0x1f034
  • ib-icon-football-ball0x1f035
  • ib-icon-battery-empty0x1f036
  • ib-icon-cart2-add0x1f037
  • ib-icon-chemistry-two0x1f038
  • ib-icon-download0x1f039
  • ib-icon-media-forward0x1f03a
  • ib-icon-folder-like0x1f03b
  • ib-icon-yin-yang0x1f03c
  • ib-icon-charts0x1f03d
  • ib-icon-sheet-remove0x1f03e
  • ib-icon-apple0x1f03f
  • ib-icon-small-gift0x1f040
  • ib-icon-ladybug0x1f041
  • ib-icon-bag-add-one0x1f042
  • ib-icon-lightning0x1f043
  • ib-icon-target0x1f044
  • ib-icon-bookmark-added0x1f045
  • ib-icon-cart2-remove0x1f046
  • ib-icon-magnet0x1f047
  • ib-icon-globe0x1f048
  • ib-icon-age-limit-210x1f049
  • ib-icon-sensor-touch-two0x1f04a
  • ib-icon-hand0x1f04b
  • ib-icon-signal-wifi0x1f04c
  • ib-icon-energy-water0x1f04d
  • ib-icon-cup0x1f04e
  • ib-icon-age-limit-60x1f04f
  • ib-icon-sheet-add0x1f050
  • ib-icon-gift-sophisticated0x1f051
  • ib-icon-battery-full-two0x1f052
  • ib-icon-signal-satellite-dish0x1f053
  • ib-icon-trumpet0x1f054
  • ib-icon-test-tube0x1f055
  • ib-icon-monitor-brightness0x1f056
  • ib-icon-mail-readed0x1f057
  • ib-icon-movies0x1f058
  • ib-icon-cart2-like-four0x1f059
  • ib-icon-cart2-remove-three0x1f05a
  • ib-icon-cart2-added-three0x1f05b
  • ib-icon-folder-remove0x1f05c
  • ib-icon-airplane0x1f05d
  • ib-icon-bucket0x1f05e
  • ib-icon-mastes-cap0x1f05f
  • ib-icon-dualshock-bluetooth0x1f060
  • ib-icon-retina-third0x1f061
  • ib-icon-cherry0x1f062
  • ib-icon-package-full0x1f063
  • ib-icon-brash0x1f064
  • ib-icon-sensor-move-right0x1f065
  • ib-icon-flag-two0x1f066
  • ib-icon-rankings-one0x1f067
  • ib-icon-rocket0x1f068
  • ib-icon-contact-book0x1f069
  • ib-icon-bulb0x1f06a
  • ib-icon-new0x1f06b
  • ib-icon-banknotes0x1f06c
  • ib-icon-waymark-left0x1f06d
  • ib-icon-spray0x1f06e
  • ib-icon-judges-gavel0x1f06f
  • ib-icon-umbrella-rain0x1f070
  • ib-icon-chacked0x1f071
  • ib-icon-cart2-minus-three0x1f072
  • ib-icon-user-to-wishlist0x1f073
  • ib-icon-uah0x1f074
  • ib-icon-badge-set0x1f075
  • ib-icon-wineglass0x1f076
  • ib-icon-note-tablet0x1f077
  • ib-icon-magnifier-remove0x1f078
  • ib-icon-shield-protected0x1f079
  • ib-icon-cart2-minus-two0x1f07a
  • ib-icon-sheet-text0x1f07b
  • ib-icon-sensor-move-left0x1f07c
  • ib-icon-cart2-minus0x1f07d
  • ib-icon-playing-card-four0x1f07e
  • ib-icon-rome0x1f07f
  • ib-icon-heart-added0x1f080
  • ib-icon-sony-psp0x1f081
  • ib-icon-case0x1f082
  • ib-icon-dualshock-cable0x1f083
  • ib-icon-rankings-fifth0x1f084
  • ib-icon-mail-close0x1f085
  • ib-icon-bookmark-remove0x1f086
  • ib-icon-bag-added0x1f087
  • ib-icon-relay0x1f088
  • ib-icon-train0x1f089
  • ib-icon-chicken-leg0x1f08a
  • ib-icon-pizza0x1f08b
  • ib-icon-start button0x1f08c
  • ib-icon-percent0x1f08d
  • ib-icon-note0x1f08e
  • ib-icon-truck0x1f08f
  • ib-icon-playing-card-three0x1f090
  • ib-icon-chess0x1f091
  • ib-icon-bag-add-four0x1f092
  • ib-icon-fire0x1f093
  • ib-icon-office-board0x1f094
  • ib-icon-bilboard-two0x1f095
  • ib-icon-alarm-clock0x1f096
  • ib-icon-monitor-added0x1f097
  • ib-icon-sensor-zoom-in0x1f098
  • ib-icon-bomb0x1f099
  • ib-icon-sensor-touch0x1f09a
  • ib-icon-mouse-double-click0x1f09b
  • ib-icon-cocktail-glass-one0x1f09c
  • ib-icon-hamburger0x1f09d
  • ib-icon-wristwatch0x1f09e
  • ib-icon-rankings-third0x1f09f
  • ib-icon-bag-remove-four0x1f0a0
  • ib-icon-bookmark-add0x1f0a1
  • ib-icon-sweet0x1f0a2
  • ib-icon-coin-pound0x1f0a3
  • ib-icon-medicine-target0x1f0a4
  • ib-icon-cart2-remove-four0x1f0a5
  • ib-icon-bag-added-three0x1f0a6
  • ib-icon-message0x1f0a7
  • ib-icon-dialog-box-info0x1f0a8
  • ib-icon-paper-cup0x1f0a9
  • ib-icon-calculator0x1f0aa
  • ib-icon-leaf0x1f0ab
  • ib-icon-ruble0x1f0ac
  • ib-icon-kegel0x1f0ad
  • ib-icon-snowflake0x1f0ae
  • ib-icon-sensor-move-left-left-hand0x1f0af
  • ib-icon-empty-package0x1f0b0
  • ib-icon-crown0x1f0b1
  • ib-icon-mail0x1f0b2
  • ib-icon-bag-like-two0x1f0b3
  • ib-icon-citylights0x1f0b4
  • ib-icon-mail-delivered0x1f0b5
  • ib-icon-womens-purse0x1f0b6
  • ib-icon-chemistry-one0x1f0b7
  • ib-icon-puzzle0x1f0b8
  • ib-icon-palette0x1f0b9
  • ib-icon-packman0x1f0ba
  • ib-icon-sheet-close0x1f0bb
  • ib-icon-sale0x1f0bc
  • ib-icon-cloudy0x1f0bd
  • ib-icon-aerostat0x1f0be
  • ib-icon-ink-pen0x1f0bf
  • ib-icon-book-opened0x1f0c0
  • ib-icon-ballon0x1f0c1
  • ib-icon-flash-memory0x1f0c2
  • ib-icon-ice-cream-two0x1f0c3
  • ib-icon-bag-remove0x1f0c4
  • ib-icon-bucket-drop0x1f0c5
  • ib-icon-drop0x1f0c6
  • ib-icon-monitor-target0x1f0c7
  • ib-icon-bag-add-three0x1f0c8
  • ib-icon-setting-up-two0x1f0c9
  • ib-icon-shield0x1f0ca
  • ib-icon-user-logout0x1f0cb
  • ib-icon-mouse-right-click0x1f0cc
  • ib-icon-printer0x1f0cd
  • ib-icon-cup-two0x1f0ce
  • ib-icon-tooth0x1f0cf
  • ib-icon-cart-full-two0x1f0d0
  • ib-icon-twist-double0x1f0d1
  • ib-icon-age-limit-00x1f0d2
  • ib-icon-cart-add-three0x1f0d3
  • ib-icon-medicine-syringe0x1f0d4
  • ib-icon-pan0x1f0d5
  • ib-icon-bawling-ball0x1f0d6
  • ib-icon-energy-sun0x1f0d7
  • ib-icon-diamond0x1f0d8
  • ib-icon-dustbin-full0x1f0d9
  • ib-icon-battery-80-percents0x1f0da
  • ib-icon-cart-remove-three0x1f0db
  • ib-icon-graph0x1f0dc
  • ib-icon-skiing0x1f0dd
  • ib-icon-money-bag0x1f0de
  • ib-icon-heart-add0x1f0df
  • ib-icon-settings-two0x1f0e0
  • ib-icon-twist0x1f0e1
  • ib-icon-mouse-bluetooth0x1f0e2
  • ib-icon-cellphone0x1f0e3
  • ib-icon-carriage0x1f0e4
  • ib-icon-bow-tie0x1f0e5
  • ib-icon-basketball-ball0x1f0e6
  • ib-icon-diary-one0x1f0e7
  • ib-icon-bag-like-three0x1f0e8
  • ib-icon-pipette0x1f0e9
  • ib-icon-medicine-tablet0x1f0ea
  • ib-icon-disabled-sign0x1f0eb
  • ib-icon-scissors-sharp0x1f0ec
  • ib-icon-heart-close0x1f0ed
  • ib-icon-cloud0x1f0ee
  • ib-icon-cart2-add-three0x1f0ef
  • ib-icon-calendar0x1f0f0
  • ib-icon-pencil0x1f0f1
  • ib-icon-question-mark0x1f0f2
  • ib-icon-pen-felt0x1f0f3
  • ib-icon-joystick0x1f0f4
  • ib-icon-car0x1f0f5
  • ib-icon-heart-lightning0x1f0f6
  • ib-icon-calendar-two0x1f0f7
  • ib-icon-mail-wishes