Isle of Man Graphic Design - Advertising - Marketing - Publishing - Print

Default grid system: 12 columns with a responsive twist

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.

It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.

[row]
[span4]...[/span4]
[span4]...[/span4]
[/row]

As shown here, a basic layout can be created with two “columns,” each spanning a number of the 12 foundational columns we defined as part of our grid system.

Typography: Headings, paragraphs, lists, and other inline type elements


This is [H1]

This is [H2]

This is [H3]

This is [H4]

This is [H5]
This is [H6]

This is <H1>

This is <H2>

This is <H3>

This is <H4>

This is <H5>
This is <H6>

<p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus etmag.

<strong>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus etmag

<em>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus etmag

[well]...[/well]

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus etmag


[well2]...[/well2]





Unordered list

<ul>

  • 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


Unstyled list

<ul class="unstyled">

  • 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 list

<ol>

  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


list with icons

<ul class="unstyled"> + icons

  • Web design
  • Responsive design
  • Cross-everything
  • Styleguide docs
  • jQuery plugins
  • Built for and by nerds
  • 12-column grid
  • Max-width 1200px
  • Growing library


Pricing Tables: Pure CSS3 Pricing Tables

Start package

FREE

  • Responsive design
  • jQuery plugins
  • Built for and by nerds
  • 12-column grid

Register Now

Advanced package

$20

  • Cross-everything
  • Styleguide docs
  • jQuery plugins
  • Built for and by nerds
  • 12-column grid

Register Now

Premium package

$39.99

  • Web design
  • Responsive design
  • Cross-everything
  • Styleguide docs
  • jQuery plugins
  • Built for and by nerds
  • 12-column grid
  • Max-width 1200px
  • Growing library

Register Now

Business package

$30

  • Responsive design
  • Cross-everything
  • Styleguide docs
  • jQuery plugins
  • Built for and by nerds
  • Cross-everything
  • 12-column grid

Register Now

Normal Pricing Tables

[pricet title="Start package" price="FREE" btn="Register Now" url="http://myurl.com"] CONTENT [/pricet]

Active Pricing Tables

[active_pricet title="Start package" price="FREE" btn="Register Now" url="http://myurl.com"] CONTENT [/pricet]



Nivo Responsive Slider

[nivo]

[nivoimg url="..." caption="Some caption text here"]
[nivoimg url="..."]
[nivoimg url="..." caption="Another caption"]

[/nivo]

Stylized Images

[style_image image="http://www.isleofmandesign.co.uk/wp-content/uploads/2012/07/gal12.jpg" alt="" size="one_six" link=0/1 zoom=0/1 url="http://www.google.com"]



Testimonial rotator

[testimonialrotator]

[testimonial author="..."]
[/testimonial]

[testimonial author="..."]
[/testimonial]

.
.
.

[testimonial author="..."]
[/testimonial]

[/testimonialrotator]

Simple slider

[blog show_posts=3 header="Recent from the blog"]

Recent from the blog



Buttons

Button Shortcode Description
[btn url="#"]Text[/btn] Standard gray button with gradient
[btn url="#" style="btn-info"]Text[/btn] Used as an alternate to the default styles
[btn url="#" style="btn-inverse"]Text[/btn] Alternate dark gray button, not tied to a semantic action or use
[btn url="#" style="btn-inverse"][icon image="icon-ok" style="icon-white"][/btn] Button with incons
Multiple sizes
Button Shortcode
[btn size="large" url="#"]Large[/btn]
[btn url="#"]Text[/btn]
[btn size="small" url="#"]Small[/btn]
[btn size="mini" url="#"]Mini[/btn]



Separators

Separator Shortcode

[hr]

[hr style="dash"]


Icons Graciously 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

Built as a sprite

Instead of making every icon an extra request, we’ve compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

Bootstrap uses an [icon] tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

[icon image="icon-search"]

There are also styles available for inverted (white) icons, made ready with one extra class:

[icon iamge="icon-search" style="icon-white"]

There are 120 classes to choose from for your icons. Just add an [icon] tag with the right classes and you’re set. You can find the full list in sprites.less or right here in this document.

Heads up!
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the [icon] tag for proper spacing.

Use cases

Icons are great, but where would one use them? Here are a few ideas:

  • As visuals for your sidebar navigation
  • For a purely icon-driven navigation
  • For buttons to help convey the meaning of an action
  • With links to share context on a user’s destination

Essentially, anywhere you can put an [icon] tag, you can put an icon.


Allerts

Default

×Oh snap! Change a few things up and try submitting again.
[alert ]
  ...
[/alert]

Error or danger

×Oh snap! Change a few things up and try submitting again.
[alert style="alert-error"]
  ...
[/alert]

Success

×Well done! You successfully read this important alert message.
[alert style="alert-success"]
  ...
[/alert]

Information

×Heads up! This alert needs your attention, but it’s not super important.
[alert style="alert-info"]
  ...
[/alert]

Inline labels


Labels Markup
Default [label]Default[/label]
Success [label style="label-success"]Success[/label]
Warning [label style="label-warning"]Warning[/label]
Important [label style="label-important"]Important[/label]
Info [label style="label-info"]Info[/label]
Inverse [label style="label-inverse"]Inverse[/label]

Badges


Name Example Markup
Default 1 [badge]1[/badge]
Success 2 [badge style="badge-success"]2[/badge]
Warning 4 [badge style="badge-warning"]4[/badge]
Error 6 [badge style="badge-error"]6[/badge]
Info 8 [badge style="badge-info"]8[/badge]
Inverse 10 [badge style="badge-inverse"]10[/badge]


Dropcaps

Dropcaps Markup
L alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. [dropcap1]L[/dropcap1]orem ipsum… ]
L alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. [dropcap2]L[/dropcap2]orem ipsum… ]
L alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. [dropcap3]L[/dropcap3]orem ipsum… ]
L alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. [dropcap4]L[/dropcap4]orem ipsum… ]
L alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. [dropcap5]L[/dropcap5]orem ipsum… ]


Blockquotes

Blockquote Markup

Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

Some author
[blockquote1]Some text[/blockquote1]

Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote1]Some text[/blockquote1]

Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote2]Some text[/blockquote2]

Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote3]Some text[/blockquote3]

Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote4]Some text[/blockquote4]

Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote5]Some text[/blockquote5]

Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote6]Some text[/blockquote6]

Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote7]Some text[/blockquote7]

Pride is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote8]Some text[/blockquote8]

Portfolio shortcodes


lovecoffeebeans.com

Design & Print

Code Club

Brand Development

SEFTON GROUP

Design & Marketing

IOM Woodland Trust

Logo Design

[6col_portfolio pcat=category-slug show_posts=4]


lovecoffeebeans.com

Design & Print

Code Club

Brand Development

[4col_portfolio pcat=category-slug show_posts=4]


[3col_portfolio pcat=category-slug show_posts=3]


Visit link
lovecoffeebeans.com

Design & Print

[2col_portfolio pcat=category-slug show_posts=2]


HTML TABS

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis.
Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.
Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Nullam mollis.

<ul class="nav nav-tabs mytabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">Some text</div>
    <div class="tab-pane" id="profile">Some text</div>
    <div class="tab-pane" id="messages">Some text</div>
    <div class="tab-pane" id="settings">Some text</div>
</div>