Skip to content

HTML & CSS

Button

html <button class="btn {style-class}">Label</button>

Style classes:

  • btn-default
  • btn-primary
  • btn-success
  • btn-danger
  • btn-warning
  • btn-info
  • btn-text
  • btn-link

Width classes:

  • btn-xs-wide
  • btn-s-wide
  • btn-wide
  • btn-xx-wide
  • btn-icon-wide
  • btn-icon-x-wide
  • btn-icon-xx-wide
  • btn-full-wide – 100% width;

Size classes:

  • btn-sm
  • btn-lg

Other classes:

  • btn-icon – a button supposed to contain only an icon;

Button group

```html

```

```html

```

The class pull-right is used to align the menu to the right side.

Panel

```html

Title

```

Style classes:

  • panel-default
  • panel-success
  • panel-danger
  • panel-warning
  • panel-info
  • panel-primary

Panel body classes:

  • panel-body-form – for panels containing a form;

Table

```html

```

Classes:

  • table-fixed – sets table-layout: fixed;
  • table-no-overflow – applies overflow: hidden; text-overflow: ellipsis to cells;
  • table-striped
  • table-panel – table like a panel;
  • table-bordered-inside – with cell borders;
  • table-hover – accent on row hover;
  • no-margin – no bottom margin;

TH, TG tag classes:

  • cell-nowrap – suppresses line breaks;

TR tag classes:

  • accented

List

```html

```

Record

A field cell on a form:

```html

(field-element)

```

Grid

Columns

12 columns system:

```html

```

```html

```

```html

```

Supported screen widths:

  • xs – phones, 480px;
  • sm – tablets, 768px;
  • md – medium, 992px;
  • lg – large, 1200px;

Auto-fill grid

```html

```

Sizes:

  • xxs
  • xs
  • sm
  • md

Type

Text

Style:

  • text-soft
  • text-muted
  • text-primary
  • text-success
  • text-danger
  • text-warning
  • text-info
  • text-bold
  • text-italic (as of v8.0)
  • text-strikethrough (as of v8.2)

Size:

  • text-large
  • text-2em
  • text-3em
  • text-4em
  • text-5em
  • text-6em

Label

html <span class="label label-md label-default">Text</span>

Style classes:

  • label-default
  • label-primary
  • label-success
  • label-danger
  • label-warning
  • label-info

Size classes:

  • label-md

Misc

Centering:

  • center-align – applies text-align: center;

A horizontally centered block:

  • block-center
  • block-center-sm
  • block-center-md

A container that horizontally & vertically centers its child:

  • container-centering

Border radius:

  • radius-left – forces an element to have border radius on the left;
  • radius-right – forces an element to have border radius on the right;

Floating:

  • pull-left – applies float: left;
  • pull-right – applies float: right;

Cancelling margins:

  • no-margin – cancels margins for an element contained in a panel and other containers;
  • no-side-margin – cancels side margins for an element contained in a panel and other containers;

Margins:

  • margin – applies a margin to all sides;
  • margin-top-sm
  • margin-top
  • margin-top-2x
  • margin-bottom-sm
  • margin-bottom
  • margin-bottom-2x
  • margin-bottom-3x
  • margin-bottom-4x