Features

Here you can see examples of all Bootstrap CSS components you can use in the knowledgebase and in pages. If you have any doubts how to use it correct, visit getbootsstrap.com for a reference. Be aware, that not all components and styles of Bootstrap are supported by DMT themes to avoid conflicts with core functions of osTicket - that's the reason why only some selected javascript functions of Bootstrap are implemented, too.

But you mustn't be a coder to use Bootstrap CSS styles in your content. Adjusting the code is easy, just follow the examples on the Bootstrap website. If you don't like editing the source, don't worry. We have the most common features of Bootstrap integrated in the redactor editor bar for an easy use. Just select and click is in most cases enough!

Basic Example

Adding class .label to generate a label. E.g.: <h3>Example heading <span class="label label-default">New!</span> </h3>

Example heading New!

Example heading New!

Example heading New!

Example heading New!

Example heading New!
Example heading New!

Available variations

Add any of the below mentioned modifier classes to change the appearance of a label.

Class Appearance
.label-default Nullam id dolor id nibh ultricies vehicula ut id elit. Default!
.label-primary Nullam id dolor id nibh ultricies vehicula ut id elit. Primary!
.label-success Duis mollis, est non commodo luctus, nisi erat porttitor ligula. Success!
.label-info Maecenas sed diam eget risus varius blandit sit amet non magna. Info!
.label-warning Etiam porta sem malesuada magna mollis euismod. Warning!
.label-danger Donec ullamcorper nulla non metus auctor fringilla. Danger!

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Basic Example

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes ( .alert-success, .alert-info, .alert-warning or .alert-danger ) for basic alert messages.

No default class

Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.



Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).

Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading. However, the font sizes of <h1>-<h6> are overridden by .panel-heading.

For proper link coloring, be sure to place links in headings within .panel-title.

Panels with header

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Panels with header and footer

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Please Wait!

Please wait... it will take a second!