Overview

Our template framwork, Wright, incorporates Bootstrap 3 which provides an 'out-of-the-box' mobile first template. The following documentation provides a look at how to use many of the default Bootstrap elements from within your Joomla articles, or modules.

Containers

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

{% highlight html %}

...

{% endhighlight %}

Use .container-fluid for a full width container, spanning the entire width of your viewport.

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. We've incorporated this grid system into our framework for presenting content, however, you can use the grids in your Joomla articles to have great control over your content presentation as well. Here's how the Bootstrap grid system works:

The template framework makes use of the default Bootstrap grid clsses .container (fixed-width) or .container-fluid (full-width), which is set according to the option you select in the template parameters (responsive / fluid / fixed).

Use rows to create horizontal groups of columns.

Content should be placed within columns, and only columns may be immediate children of rows.

Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.

Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.

Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Look to the examples for applying these principles to your code.

Media queries

We use the following media queries in our Less files to create the key breakpoints in our grid system.

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small devices Phones (<768px)

Small devices Tablets (≥768px)

Medium devices Desktops (≥992px)

Large devices Desktops (≥1200px)

Grid behavior

Horizontal at all times

Collapsed to start, horizontal above breakpoints

Container width

None (auto)

750px

970px

1170px

Class prefix

.col-xs-

.col-sm-

.col-md-

.col-lg-

# of columns

12

Column width

Auto

~62px

~81px

~97px

Gutter width

30px (15px on each side of a column)

Nestable

Yes

Offsets

Yes

Column ordering

Yes

Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

{% highlight html %}

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

{% endhighlight %}

Example: Fluid container

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.

{% highlight html %}

...

{% endhighlight %}

Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-*.col-md-* to your columns. See the example below for a better idea of how it all works.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6

.col-xs-6

{% highlight html %}

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6

.col-xs-6

{% endhighlight %}

Example: Mobile, tablet, desktops

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

.col-xs-6 .col-sm-4

.col-xs-6 .col-sm-4

{% highlight html %}

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

.col-xs-6 .col-sm-4

.col-xs-6 .col-sm-4

{% endhighlight %}

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

.col-xs-6 .col-sm-3 Resize your viewport or check it out on your phone for an example.

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

{% highlight html %}

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

{% endhighlight %}

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

{% highlight html %}

.col-sm-5 .col-md-6

.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0

{% endhighlight %}

Offsetting columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

{% highlight html %}

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

{% endhighlight %}

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12 or less.

Level 1: .col-md-9

Level 2: .col-md-6

Level 2: .col-md-6

{% highlight html %}

Level 1: .col-md-9

Level 2: .col-md-6

Level 2: .col-md-6

{% endhighlight %}

Column ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

{% highlight html %}

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

{% endhighlight %}

Less mixins and variables

In addition to prebuilt grid classes for fast layouts, Bootstrap includes Less variables and mixins for quickly generating your own simple, semantic layouts.

Variables

Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.

Code

Inline

User input

Use the <kbd> to indicate input that is typically entered via keyboard.

To switch directories, type cd followed by the name of the directory.

{% highlight html %} To switch directories, type cdfollowed by the name of the directory. {% endhighlight %}

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>

{% highlight html %}

<p>Sample text here...</p>

{% endhighlight %}

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

Tables

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

#

First Name

Last Name

Username

1

Mark

Otto

@mdo

2

Jacob

Thornton

@fat

3

Larry

the Bird

@twitter

{% highlight html %}...{% endhighlight %}

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Cross-browser compatibility

Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

#

First Name

Last Name

Username

1

Mark

Otto

@mdo

2

Jacob

Thornton

@fat

3

Larry

the Bird

@twitter

{% highlight html %}...{% endhighlight %}

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

#

First Name

Last Name

Username

1

Mark

Otto

@mdo

Mark

Otto

@TwBootstrap

2

Jacob

Thornton

@fat

3

Larry the Bird

@twitter

{% highlight html %}...{% endhighlight %}

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

#

First Name

Last Name

Username

1

Mark

Otto

@mdo

2

Jacob

Thornton

@fat

3

Larry the Bird

@twitter

{% highlight html %}...{% endhighlight %}

Condensed table

Add .table-condensed to make tables more compact by cutting cell padding in half.

#

First Name

Last Name

Username

1

Mark

Otto

@mdo

2

Jacob

Thornton

@fat

3

Larry the Bird

@twitter

{% highlight html %}...{% endhighlight %}

Contextual classes

Use contextual classes to color table rows or individual cells.

Class

Description

.active

Applies the hover color to a particular row or cell

.success

Indicates a successful or positive action

.info

Indicates a neutral informative change or action

.warning

Indicates a warning that might need attention

.danger

Indicates a dangerous or potentially negative action

#

Column heading

Column heading

Column heading

1

Column content

Column content

Column content

2

Column content

Column content

Column content

3

Column content

Column content

Column content

4

Column content

Column content

Column content

5

Column content

Column content

Column content

6

Column content

Column content

Column content

7

Column content

Column content

Column content

8

Column content

Column content

Column content

9

Column content

Column content

Column content

{% highlight html %} ..............................{% endhighlight %}

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

#

Table heading

Table heading

Table heading

Table heading

Table heading

Table heading

1

Table cell

Table cell

Table cell

Table cell

Table cell

Table cell

2

Table cell

Table cell

Table cell

Table cell

Table cell

Table cell

3

Table cell

Table cell

Table cell

Table cell

Table cell

Table cell

#

Table heading

Table heading

Table heading

Table heading

Table heading

Table heading

1

Table cell

Table cell

Table cell

Table cell

Table cell

Table cell

2

Table cell

Table cell

Table cell

Table cell

Table cell

Table cell

3

Table cell

Table cell

Table cell

Table cell

Table cell

Table cell

{% highlight html %}

...

{% endhighlight %}

Buttons

Options

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

Sizes

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

{% highlight html %} {% endhighlight %}

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s should you need to replicate the active state progammatically.

Button element

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.

Anchor element

We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

Link functionality caveat

This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.

Context-specific usage

While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components.

Button tags

Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

Among other things, there's a Firefox bug that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.

Images

Responsive images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

{% highlight html %} {% endhighlight %}

Image shapes

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

Cross-browser compatibility

Keep in mind that Internet Explorer 8 lacks support for rounded corners.

{% highlight html %} {% endhighlight %}

Helper classes

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

{% highlight html %}

...

...

...

...

...

...

{% endhighlight %}

Dealing with specificity

Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.

Contextual backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

{% highlight html %}

...

...

...

...

...

{% endhighlight %}

Close icon

Use the generic close icon for dismissing content like modals and alerts.

{% highlight html %} {% endhighlight %}

Carets

Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

{% highlight html %}{% endhighlight %}

Quick floats

Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins.

Showing and hiding content

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.

Custom heading

Responsive utilities

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block and table toggling. Use with inline and table elements is currently not supported.

Available classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.

Extra small devices Phones (<768px)

Small devices Tablets (≥768px)

Medium devices Desktops (≥992px)

Large devices Desktops (≥1200px)

.visible-xs

Visible

Hidden

Hidden

Hidden

.visible-sm

Hidden

Visible

Hidden

Hidden

.visible-md

Hidden

Hidden

Visible

Hidden

.visible-lg

Hidden

Hidden

Hidden

Visible

.hidden-xs

Hidden

Visible

Visible

Visible

.hidden-sm

Visible

Hidden

Visible

Visible

.hidden-md

Visible

Visible

Hidden

Visible

.hidden-lg

Visible

Visible

Visible

Hidden

Print classes

Similar to the regular responsive classes, use these for toggling content for print.

Class

Browser

Print

.visible-print

Hidden

Visible

.hidden-print

Visible

Hidden

Test cases

Resize your browser or load on different devices to test the responsive utility classes.

Visible on...

Green checkmarks indicate the element is visible in your current viewport.

Extra small✔ Visible on x-small

Small✔ Visible on small

Medium✔ Visible on medium

Large✔ Visible on large

Extra small and small✔ Visible on x-small and small

Medium and large✔ Visible on medium and large

Extra small and medium✔ Visible on x-small and medium

Small and large✔ Visible on small and large

Extra small and large✔ Visible on x-small and large

Small and medium✔ Visible on small and medium

Hidden on...

Here, green checkmarks also indicate the element is hidden in your current viewport.

Extra small✔ Hidden on x-small

Small✔ Hidden on small

Medium✔ Hidden on medium

Large✔ Hidden on large

Extra small and small✔ Hidden on x-small and small

Medium and large✔ Hidden on medium and large

Extra small and medium✔ Hidden on x-small and medium

Small and large✔ Hidden on small and large

Extra small and large✔ Hidden on x-small and large

Small and medium✔ Hidden on small and medium

Glyphicons

Available glyphs

Includes 200 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.

{% for iconClassName in site.data.glyphicons %}

glyphicon {{ iconClassName }}

{% endfor %}

How to use

For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

Don't mix with other components

Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.

{% highlight html %}{% endhighlight %}

Examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

{% highlight html %} {% endhighlight %}

Button groups

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Tooltips & popovers in button groups require special setting

When using tooltips or popovers on elements within a .btn-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

Basic example

Wrap a series of buttons with .btn in .btn-group.

{% highlight html %}

{% endhighlight %}

Button toolbar

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

{% highlight html %}

...

...

...

{% endhighlight %}

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.

{% highlight html %}

...

...

...

...

{% endhighlight %}

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

Justified button groups

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

Handling borders

Due to the specific HTML and CSS used to justify buttons (namely display: table-cell), the borders between them are doubled. In regular button groups, margin-left: -1px is used to stack the borders instead of removing them. However, margin doesn't work with display: table-cell. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.

With <a> elements

With <button> elements

To use justified button groups with <button> elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to <button> elements, but since we support button dropdowns, we can workaround that.

{% highlight html %}

{% endhighlight %}

Button dropdowns

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Plugin dependency

Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.