UI Elements

Buttons


Classes


The HighLand template offers you new button classes that can be used along with the default Bootstrap 3 buttons:

Example

Sizes


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

Example

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

Example

Disable state


Make buttons look unclickable by fading them back 50%.

Button element

Add the disabled attribute to <button> buttons.

Example
Anchor element

Add the .disabled class to <a> buttons.

Example

Panels


While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

In the HighLand template we have added several new classes to the panel element. For full documentation on panels, please refer to the official Bootstrap page.

Example

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Info boards


You can emphasize some contents by wrapping it in a .info-board. Four classes are available:

Example

Info board title

Info board content

Info board title

Info board content

Info board title

Info board content

Info board title

Info board content


Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

Tabs


Note the .nav-tabs class requires the .nav base class.

Example
Home tab content
Profile tab content
Message tab content
Settings tab content

Pills


Take that same HTML, but use .nav-pills instead.

Example
Home tab content
Profile tab content
Message tab content
Settings tab content

Choose one of the six colors by adding an exta class:

Example

Alerts


Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

Example
Warning! Best check yo self, you're not looking too good.
Warning! Best check yo self, you're not looking too good.
Warning! Best check yo self, you're not looking too good.
Warning! Best check yo self, you're not looking too good.

Please visit the official Bootstrap page for full documentation.

Thumbnails


Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

Example
...

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Button Button

...

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Button Button

...

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Button Button

Social Icons


Use the code below to add social icons on any page of your website:

Example

Adjust the size of your icons by adding a .social-icons-small or a social-icons-large class.

Example

Section Header


Wrap your section header in a <h1 class="animated slideInLeft"><span> ... </span></h1>, then center it by wrapping in a .container and a .section-header div for correct look and block positioning.

Remove .animated slideInLeft if you want to get rid of the animation effect.

Example

Section Header

Page Tip


Wrap your tip contents in a .container and a .page-tip animated slideInDown to get a neat tip box with a slide down effect.

Again, remove .animated slideInLeft if you don't want things to move.

Example

This tip looks great!

Block header


Use the following code to add a block header.

Example

Block Title

Tags


Easily add tags on your blog or news page using the code below.

Example