Bootstrap Shortcodes

These shortcodes below take advantage of some of the styles offered in bootstrap.

Please Note: This is a plugin that needs to be activated.
[container]Content[/container]

With Attributes. Style should be a CSS class style.

[container style="alert"]Content[/container]

Find out more about Bootstrap Styles.

Please note: The thumbnail shortcode is use in conjunction with column shortcode.

Examples

widgets

Widgets

An introduction to widgets and commonly used widgets.

Read More

Featured Images

Featured Images

Featured images are an easy way to visually enhance your websites posts or pages.

Read More

shortcode

Shortcode

Shortcodes are used to perform complicated tasks and functions but with simple, easy of use.

Read More

How it’s done

[thumbnails]
[column size="4"]
[/column][column size="4"]
[/column][column size="4"]
[/column]
[/thumbnails]

Examples

Labels:
Default | Success | Important | Warning | Info | Inverse

Badges:
1 | 2 | 3 | 4 | 5 | 6

How it’s done

Without the attribute:

[label]Word[/label]
[badge]1[/badge]

With the name attribute:

[label name="success"]Word[/label]
[badge name="success"]1[/badge]

The “name” attribute can use these values:

  • success
  • important
  • warning
  • info
  • inverse

Examples

This text is in an alert box!

How it’s done

Without an attribute:

[alert]This text is in an alert box![/alert]

With an attribute:

[alert name="success"]This text is in an alert box![/alert]

The “name” attribute can use these values:

  • success
  • error or danger
  • info

Examples

A Button that is a link:

A Button

How it’s done

[button]A Button![/button]
[button name="primary"]A Button![/button]
[button title="Your Link Title" name="primary"]A Button![/button]

Add a link to your button

[button link="http://yourlink" name="primary"]A Button![/button]

Add a title to your button

If you don’t use the the title attribute then the buttons content will be used as the title.

[button title="Your Link Title" link="http://yourlink" name="primary"]A Button![/button]

A Button container

A Button in a Container

How it’s done

[buttoncon]A Button![/buttoncon]
[buttoncon name="primary"]A Button![/buttoncon]

Add a link to your button container

[buttoncon name="primary"]<a href="http://yourlink" title="link title">A Button!</a>[/buttoncon]


The Icon shortcode uses the attributes from Font Awesome. You can use this site to find the most current attributes.

How it’s done

Say you want to use the icon?

  • Find the icon name from Font Awesome.
  • You find out the ‘s name is “icon-leaf”
  • Use only the name of the icon after the “icon-“
  • Then this would be your shortcode [icon name=”leaf”]

What if I dont use the name attribute?

[icon] =

Allows you to change text colour or a backgrounds element colour
NEW TEXT COLOUR

[colour]Content[/colour]

Simple colour option:
NEW TEXT COLOUR

[colour option="pomegranate" ]Content[/colour]

Colour text and background:
NEW TEXT COLOUR

[colour option="pomegranate alizarin-bg"]Content[/colour]



For information on UBC Brand Colours go to: http://brand.ubc.ca/about-the-brand/visual-identity-system/colour/

Colour Options List

ubc-primary

ubc-primary-bg

ubc-secondary

ubc-secondary-bg

ubc-dark-grey

ubc-dark-grey-bg

ubc-medium-grey

ubc-medium-grey-bg

ubc-light-grey

ubc-light-grey-bg

turquoise

turquoise-bg

emerald

emerald-bg

peter-river

peter-river-bg

amethyst

amethyst-bg

wet-asphalt

wet-asphalt-bg

green-sea

green-sea-bg

nephritis

nephritis-bg

belize-hole

belize-hole-bg

westeria

westeria-bg

midnight-blue

midnight-blue-bg

sun-flower

sun-flower-bg

carrot

carrot-bg

alizarin

alizarin-bg

clouds

clouds-bg

concrete

concrete-bg

orange

orange-bg

pumpkin

pumpkin-bg

pomegranate

pomegranate-bg

silver

silver-bg

asbestos

asbestos-bg

How it’s done

[back_to_top]

How it’s done

[break]