Here you can see examples of all Bootstrap CSS styles 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 styles of Bootstrap are supported by DMT Flat Helix to avoid conflicts with core functions of osTicket - that's the reason why javascript functions of Bootstrap are not implemented, too.

Important: For adding Bootstrap styles and components to your articles, you have to edit them in redactors source code view. To enter the source code view simple press "<>", for a preview of your editings press "<>" again. Because of osTicket css some Bootstrap styles in the backend may look a little different from the frontend view.
col-lg-12
col-lg-4
col-lg-4
col-lg-4
col-lg-6
col-lg-6
col-lg-9 / col-sm-6
col-lg-3 / col-sm-6

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text

Inline text

All inline text elements are used by a opening tag <TAGNAME>with a text inside and a closing tag</TAGNAME>. Here you can see the tags with the effect on the text between them. Don't forget to close the tag at the end of the formatted text.

<mark> You can use the tag to highlight text.
<del> This line of text is meant to be treated as deleted text.
<s> This line of text is meant to be treated as no longer accurate.
<ins> This line of text is meant to be treated as an addition to the document.
<u> This line of text is rendered as underlined
<small> This line of text is meant to be treated as fine print.
<strong> This line will be rendered as bold text.
<em> This line will be rendered as italicized text.
<code> This Text will be rendered as <strong>.
<kbd> To indicate input that is typically entered via keyboard. E.g.: Type cd followed by the name of the directory. Press ctrl + ,
<var> To indicate text as variables. E.g.: y = mx + b

Blockquotes

Default Blockquote

For quoting blocks of content from another source within your document. Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Blockquote Options

Style and content changes for simple variations on a standard <blockquote>.

Naming a source: Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Alternate Display: Add .blockquote-reverse for a blockquote with right-aligned content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

Basic Style

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, Bootstrap opted to isolate their custom table styles.

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped Style

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

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered Style

Use .table-bordered to add borders around the table and table cells.

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hover Style

Add .table-hover to enable a hover state on table rows within a <tbody>.

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Button Tags

Use the button classes on an <a> or <button> element.

Links acting as buttons

If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

Link

Options

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

Conveying meaning to assistive technologies

Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the .sr-only class.

Class Appearance
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

Size

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

Class Appearance
.btn-lg
.btn-sm
.btn-xs

Responsive images

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

To center images which use the .img-responsive class, use .center-block instead of .text-center.

Image shapes

Add classes to an <img> element to easily style images in any project. Use <img-rounded> for rounded corners, <img-circle> for a circle shape and <img-thumbnail> for a framed image with rounded corners. Keep in mind that Internet Explorer 8 lacks support for rounded corners.

140x140 140x140 140x140

Contextual Colors

Dealing with specificity

Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the .sr-only class.

Class Appearance
.text-muted Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
.text-primary Nullam id dolor id nibh ultricies vehicula ut id elit.
.text-success Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
.text-info Maecenas sed diam eget risus varius blandit sit amet non magna.
.text-warning Etiam porta sem malesuada magna mollis euismod.
.text-danger Donec ullamcorper nulla non metus auctor fringilla.

Contextual Backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Dealing with specificity

Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div> with the class.

Conveying meaning to assistive technologies

As with contextual colors, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.

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

Please Wait!

Please wait... it will take a second!


Warning: PHP Startup: Unable to load dynamic library 'D:\XAMPP\php\ext/php_bz2.dll' - D:\XAMPP\php\ext/php_bz2.dll: cannot open shared object file: No such file or directory in Unknown on line 0

Warning: PHP Startup: Unable to load dynamic library 'D:\XAMPP\php\ext/php_curl.dll' - D:\XAMPP\php\ext/php_curl.dll: cannot open shared object file: No such file or directory in Unknown on line 0

Warning: PHP Startup: Unable to load dynamic library 'D:\XAMPP\php\ext/php_fileinfo.dll' - D:\XAMPP\php\ext/php_fileinfo.dll: cannot open shared object file: No such file or directory in Unknown on line 0

Warning: PHP Startup: Unable to load dynamic library 'D:\XAMPP\php\ext/php_gd2.dll' - D:\XAMPP\php\ext/php_gd2.dll: cannot open shared object file: No such file or directory in Unknown on line 0

Warning: PHP Startup: Unable to load dynamic library 'D:\XAMPP\php\ext/php_gettext.dll' - D:\XAMPP\php\ext/php_gettext.dll: cannot open shared object file: No such file or directory in Unknown on line 0

Warning: PHP Startup: Unable to load dynamic library 'D:\XAMPP\php\ext/php_intl.dll' - D:\XAMPP\php\ext/php_intl.dll: cannot open shared object file: No such file or directory in Unknown on line 0

Warning: PHP Startup: Unable to load dynamic library 'D:\XAMPP\php\ext/php_imap.dll' - D:\XAMPP\php\ext/php_imap.dll: cannot open shared object file: No such file or directory in Unknown on line 0

Warning: PHP Startup: Unable to load dynamic library 'D:\XAMPP\php\ext/php_mbstring.dll' - D:\XAMPP\php\ext/php_mbstring.dll: cannot open shared object file: No such file or directory in Unknown on line 0

Warning: PHP Startup: Unable to load dynamic library 'D:\XAMPP\php\ext/php_exif.dll' - D:\XAMPP\php\ext/php_exif.dll: cannot open shared object file: No such file or directory in Unknown on line 0

Warning: PHP Startup: Unable to load dynamic library 'D:\XAMPP\php\ext/php_mysqli.dll' - D:\XAMPP\php\ext/php_mysqli.dll: cannot open shared object file: No such file or directory in Unknown on line 0

Warning: PHP Startup: Unable to load dynamic library 'D:\XAMPP\php\ext/php_pdo_mysql.dll' - D:\XAMPP\php\ext/php_pdo_mysql.dll: cannot open shared object file: No such file or directory in Unknown on line 0

Warning: PHP Startup: Unable to load dynamic library 'D:\XAMPP\php\ext/php_pdo_sqlite.dll' - D:\XAMPP\php\ext/php_pdo_sqlite.dll: cannot open shared object file: No such file or directory in Unknown on line 0

Warning: PHP Startup: Unable to load dynamic library 'D:\XAMPP\php\ext/php_openssl.dll' - D:\XAMPP\php\ext/php_openssl.dll: cannot open shared object file: No such file or directory in Unknown on line 0

Warning: PHP Startup: Unable to load dynamic library 'D:\XAMPP\php\ext/php_ftp.dll' - D:\XAMPP\php\ext/php_ftp.dll: cannot open shared object file: No such file or directory in Unknown on line 0

Warning: Cannot open 'D:\XAMPP\php\extras\browscap.ini' for reading in Unknown on line 0