Alignment classes

Easily realign text to components with text alignment classes.

Transformation classes

Transform text in components with text capitalization classes.

Adresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

Blockquotes

Default blockquotes

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Blockquote options

Style and content changes for simple variations.

Naming a source

Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.

Reversed blockquote

Add .blockquote-reverse for a blockquote with right-aligned content.

Centered blockquote

Add .text-center for a centered blockquote.

Lists

Standard <ul> and <ol> list are supported.
Several classes will change the list display

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

Icon list

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.

Striped rows

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

Bordered table

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

Basic example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

Checkboxes and radios

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

A checkbox or radio with the disabled attribute will be styled appropriately. To have the label for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your .radio, .radio-inline, .checkbox, .checkbox-inline, or fieldset.

Selects

Use the default option, or add multiple to show multiple options at once.

Options

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

block level buttons

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

Sizes

Fancy larger or smaller buttons? Add .large, .small, or .x-small for additional sizes.

Disabled state

Add the disabled attribute to <button> buttons. Add the .disabled class to <a> buttons.

Icon button

Social buttons

Social icons

By default, social icons will get their own color. They can be square, rounded or circular using .squared, .rounded or .circle classes.

Colored icons

Theme colors

Use theme color classes to color the icons: .main-color, .dark-main-color, .light-main-color, .dark-color or .light-color.

Colored hover icons

Add .social-hover class to keep the social network color on rollovers.

Minimal icons

Just remove the .circle class to display simple and minimal icons.

Sizes

Add .x-large, .large or .medium for additional sizes.

Icon fonts magic will make your icons always look great no matter which screen they are displayed on. We have included a custom icon font pack. Here is a example on how to use these icons fonts.

Just change the class name to switch the icon inside you html element. Here is a link showing the complete custom pack included with your theme.

You can extend the icons with the Fontello library. To add more icons to the set:

1. Go to http://fontello.com/
2. Click on the settings and choose "import config.json"
3. Import the file from font-icons/custom-icons. This will highlight the icons of the set
4. Choose the icons you want, download, unzip and replace the files

Icon sizes

Add .x-large, .large, .medium, .small for additional sizes.

Icon circle

Add .circle for circle icons.

Icon rounded

Add .rounded for rounded icons.

Icon squared

Add .squared for squared icons.

Icon colors

Add .main-color, .main-dark-color, .main-light-color, .light-color, .dark-color to apply theme colors on backgrounds of rounded icons.

Icon animated

Add .animated for animated icons.

Margins modifier

Margin bottom

Add .mb-large, .mb-medium, .mb-small and .no-mb to add or remove margin bottom on elements

Margin top

Add .mt-large, .mt-medium, .mt-small and .no-mt to add or remove margin top on elements

Paddings modifier

Padding bottom

Add .pb-large, .pb-medium, .pb-small and .no-pb to add or remove padding bottom on elements

Padding top

Add .pt-large, .pt-medium, .pt-small and .no-mt to add or remove padding top on elements

Responsive images

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

Image shapes

Add classes .circle, .rounded or .thumbnail to an img element to easily style images in any project.

Avatar

Add classes .avatar to an img element to easily style avatar images. Avatar images class comes with 4 size: standard (40px) .large (80px), .medium (60px) or .small (20px).