The Highland

UI Elements

Buttons

Classes

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

Example

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-green">Green</button>
<button type="button" class="btn btn-blue">Blue</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-red">Red</button>
<button type="button" class="btn btn-turquoise">Turquoise</button>
<button type="button" class="btn btn-amethyst">Amethyst</button>

Sizes

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

Example

<button type="button" class="btn btn-default btn-lg">Large button</button>
<button type="button" class="btn btn-amethyst btn-lg">Large button</button>

<button type="button" class="btn btn-default">Default button</button>
<button type="button" class="btn btn-amethyst">Default button</button>

<button type="button" class="btn btn-default btn-sm">Small button</button>
<button type="button" class="btn btn-amethyst btn-sm">Small button</button>

<button type="button" class="btn btn-default btn-xs">Extra small button</button>
<button type="button" class="btn btn-amethyst btn-xs">Extra small button</button>

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

Example
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-green btn-lg btn-block">Block level button</button>

Disable state

Make buttons look unclickable by fading them back 50%.

Button element

Add the disabled attribute to <button> buttons.

Example
<button type="button" class="btn btn-lg btn-red" disabled="disabled">Red button</button>
<button type="button" class="btn btn-lg btn-default" disabled="disabled">Button</button>
Anchor element

Add the .disabled class to <a> buttons.

Example
Red link Link
<a href="#" class="btn btn-red btn-lg disabled">Red link</a>
<a href="#" class="btn btn-default btn-lg disabled">Link</a>

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
<div class="panel panel-green"> ... </div>
<div class="panel panel-blue"> ... </div>
<div class="panel panel-dark"> ... </div>
<div class="panel panel-red"> ... </div>
<div class="panel panel-turquoise"> ... </div>
<div class="panel panel-amethyst"> ... </div>

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

<div class="info-board info-board-green"> ... </div>
<div class="info-board info-board-blue"> ... </div>
<div class="info-board info-board-red"> ... </div>
<div class="info-board info-board-orange"> ... </div>

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
<ul class="nav nav-tabs">
<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">Home tab content</div>
<div class="tab-pane" id="profile">Profile tab content</div>
<div class="tab-pane" id="messages">Message tab content</div>
<div class="tab-pane" id="settings">Settings tab content</div>
</div>

Pills

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

Example
Home tab content
Profile tab content
Message tab content
Settings tab content
<ul class="nav nav-pills">
<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">Home tab content</div>
<div class="tab-pane" id="profile">Profile tab content</div>
<div class="tab-pane" id="messages">Message tab content</div>
<div class="tab-pane" id="settings">Settings tab content</div>
</div>

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

Example
<ul class="nav nav-pills nav-pills-green"> ... </ul>
<ul class="nav nav-pills nav-pills-blue"> ... </ul>
<ul class="nav nav-pills nav-pills-dark"> ... </ul>
<ul class="nav nav-pills nav-pills-red"> ... </ul>
<ul class="nav nav-pills nav-pills-turqouise"> ... </ul>
<ul class="nav nav-pills nav-pills-amethyst"> ... </ul>

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.
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

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

<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h4>Thumbnail label</h4>
<p><div class="rating"> ... </div></p>
<p> ... </p>
<p>
<a href="#" class="btn btn-green" role="button">Button</a>
<a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>

Social Icons

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

Example
<div class="social-icons social-icons-default">
<ul>
<li class="rss"><a href="#"><i class="fa fa-rss"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="pinterest"><a href="#"><i class="fa fa-pinterest"></i></a></li>
<li class="github"><a href="#"><i class="fa fa-github"></i></a></li>
<li class="linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li class="vk"><a href="#"><i class="fa fa-vk"></i></a></li>
<li class="plus"><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li class="dropbox"><a href="#"><i class="fa fa-dropbox"></i></a></li>
<li class="vimeo"><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
</ul>
</div>

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

Example
<div class="social-icons social-icons-small"> ... </div>
<div class="social-icons social-icons-default"> ... </div>
<div class="social-icons social-icons-large"> ... </div>

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

<div class="section-header">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1><span>Section Header</span></h1>
</div>
</div>
</div>
</div>

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!

<div class="page-tip">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>This tip looks great!</p>
</div>
</div>
</div>
</div>

Block header

Use the following code to add a block header.

Example

Block Title

<div class="block-header">
<h2><span class="title"> Block Title </span></h2>
<span class="decoration"></span>
<span class="decoration"></span>
<span class="decoration"></span>
</div>

Tags

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

Example
lorem ipsum dolor sit amet consectetur
<div class="tags">
<a href="#">lorem</a>
<a href="#">ipsum</a>
<a href="#">dolor</a>
<a href="#">sit</a>
<a href="#">amet</a>
<a href="#">consectetur</a>
</div>

© Highland 2015. Privacy Policy | Terms of Service