• Switzerland
    • Australia Australia
    • Austria Austria
    • Brazil Brazil
    • Canada Canada
    • China China
    • Czech Czech Republic
    • Denmark Denmark
    • Finland Finland
    • France France
    • Germany Germany
    • Italy Italy
    • Japan Japan
    • Korea Korea
    • Latin America Latin America
    • Netherlands Netherlands
    • New Zealand New Zealand
    • Norway Norway
    • Poland Poland
    • Russia Russia
    • Slovakia Slovakia
    • South Africa South Africa
    • Spain Spain
    • Sweden Sweden
    • Switzerland Switzerland DE
    • Switzerland Switzerland FR
    • Taiwan Taiwan
    • USA USA
    • United Kingdom United Kingdom
  • Dienstleistungen
  • Kontakt

IDEXX

  • Kleintiere
    Alle ansehen
    Kleintiere
    • View all Kleintiere
    • Analysegeräte
      Analysegeräte
      • View all Analysegeräte
      • Catalyst One
      • ProCyte Dx
      • SediVue Dx
      • Testmenü praxisinterne Diagnostik
      • Support für Analysegeräte
      • Garantieverlängerung
      • Alle Analysegeräte
    • IDEXX Diavet Schweiz
      IDEXX Diavet Schweiz
      • View all IDEXX Diavet Schweiz
      • Antragsformulare
      • Aktuelle Tests
      • Vademecum
      • Medizinische Fachberatung
      • Kurieranforderung
      • Materialbestellungen
      • Qualitätsmanagement
      • SDMA
      • Labor Überblick
      • Registrierung Kundendaten
    • Praxismanagement
      Praxismanagement
      • View all Praxismanagement
      • VetConnect PLUS
      • SmartService Solutions
      • InterLink
      • Alle Software-Produkte & -Leistungen
    • Ressourcen & Support
      Ressourcen & Support
      • View all Ressourcen & Support
      • Digitale Bibliothek
      • Analysezertifikate
      • MyIDEXX
    • Schnelltests
      Schnelltests
      • View all Schnelltests
      • SNAP-Tests – Technologie
      • SNAP 4Dx Plus
      • SNAP Giardia
      • Alle Schnelltests
    • Minimale Datenbasis
      Minimale Datenbasis
      • View all Minimale Datenbasis
      • Patientenbewertung
      • Arbeitsablauf
      • Patientenversorgung
    • Kontakt & Service
      Kontakt & Service
      • View all Kontakt & Service
      • Feiertage
  • Nutztiere
    Alle ansehen
    Nutztiere
    • View all Nutztiere
    • Nutztiere tests
      Nutztiere tests
      • View all Nutztiere tests
      • Wiederkäuer
      • Schweine
      • Geflügel
      • Pferde (DE)
    • IDEXX-Testlösungen
      IDEXX-Testlösungen
      • View all IDEXX-Testlösungen
      • Alertys Trächtigkeitstests
      • IDEXX RealPCR-Tests
    • xChekPlus Software
      xChekPlus Software
      • View all xChekPlus Software
      • Ressourcen zu xChek
    • Ressourcen & Support
      Ressourcen & Support
      • View all Ressourcen & Support
      • Packungsbeilagen für Produkte
      • Analysezertifikate
      • (Material) Sicherheitsdatenblätter (MSDS)
      • Rechnungsstellung
      • Online bestellen
    • Kontakt
  • Milch
    Alle ansehen
    Milch
    • View all Milch
    • Alle Milchuntersuchungen
      Alle Milchuntersuchungen
      • View all Alle Milchuntersuchungen
      • Milchuntersuchungen
      • Zubehör
      • Alle Nutztiertests
    • Ressourcen & Support
      Ressourcen & Support
      • View all Ressourcen & Support
      • Packungsbeilagen für Produkte
      • Schulung
      • Digitale-Bibliothek
      • Analysezertifikate
      • Sicherheitsdatenblätter (SDS, Safety Data Sheets)
      • Rechnungsstellung
    • Kontakt
  • Pferde
  • Wasser (DE)
  • Wissen (DE)
    View all Wissen
    Wissen (DE)
    • View all Wissen
    • Diagnosethemen (DE)
    • Fortbildungen
  • Über uns
    Alle ansehen
    Über uns
    • View all Über
    • Über uns
      Über uns
      • View all Über uns
      • Unsere Ziele (USA)
      • Unternehmensverantwortung (USA)
      • Investor relations (USA)
      • Nachrichtenzentrale (USA)
      • Unternehmensführung (USA)
      • Standorte weltweit
    • Kontakt
  • Dienstleistungen
  • Kontakt

You are here

  1. Startseite
  2. styleguide

Navigation

  • Templates
  • Typography
  • Iconography
  • Tables
  • Forms
  • Grid
  • Components
  • Utility

Online Styleguide

The Online Styleguide is a uniformed compendium for project managers, web publisher, designers or developers of how to maintain, update or further develop a website. This section is covering an overview of all available templates developed for this website.

Browser Support

Google Chrome*, Mozilla Firefox*, Apple Safari, Internet Explorer 11+ * latest 2 iterations

Typography

This section defines default stylings and behaviours for HTML and CSS that can be used within a wysiwyg text editor. A full documentation and detailed examples can be found within the Bootstrap documentation. We only display the most important elements here.

Headings

Headings have to follow a chronologically order. For example a <h1> is followed by <h2> than <h3> and so on. You should not use different headings just because of their styling. So placing first a <h2> and than a <h4> causes SEO problems.

You should avoid the overuse of <h1> tags. In contrary to some beliefs, it is no problem to use multiple <h1> tags however the html outline should always be respected.

h1. Sample Heading

h2. Sample Heading

h3. Sample Heading

h4. Sample Heading

h5. Sample Heading
h6. Sample Heading Secondary text

h1, h2, h3, h4, h5, h6, h6.small


Body Text

The main content part of an area. Always be wary that the most important aspect of SEO is to have well written and structured content. The best design and code will not help your ranking with a bad content strategy.

This is a lead text describing the start of a content area to get the attention of the reader.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

p.lead, p, small


Colors

The color palette defines the main look & feel of a website and is mostly adapted from an available CI & CD

In addition to Bootstrap's defaults, we added the .brand-secondary class to the list as many brands have at least two main colours.

primary, secondary, success, info, warning, danger, muted

.text-{name} for text color
.brand-{name} for background color

{name} can be:
primary, secondary, success, info, warning, danger, muted


Lists

Lists are a great way of displaying structured informations. If this data has a specific order use the <ol> (ordered list) tag otherwise the <ul> (unordered list) tag.

Sometimes you have information that leads to an explanation or more information. For this the definition list is the markup to choose from. Simple nest a definition term <dt> and than the definition description <dd> within the definition list <dl>. There can be multiple definition description follow after a definition term.

Unordered

  • Lorem ipsum dolor
  • Facilisis in pretium
    • Nulla volutpat aliquam
    • Facilisis in pretium
      • Nulla volutpat aliquam
  • Eget porttitor

Ordered

  1. Lorem ipsum dolor
  2. Facilisis in pretium
    • Nulla volutpat aliquam
    • Facilisis in pretium
      • Nulla volutpat aliquam
  3. Eget porttitor

Description

Euismod Dolor
A description list is perfect for defining terms. Etiam porta sem malesuada Etiam porta sem malesuada magna mollis euismod. magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Donec id elit non mi porta gravida at eget metus.

Emphasis

In addition to the main elements described above, you can utilise an even broader set of html tags listed here in the emphasis section.

Most WYSIWYG editors are able to produce them simply by pressing a button, but it is wise to study them and eventually add missing tags through the source code mode.

A full list and detailed description can be found within the W3C HTML5 documentation.

The hyperlink element
<a href="#">My text</a>

The abbr element
<abbr title="#">TXT</abbr>

The address element
<address>My text<address>

The cite element
<cite>My text</cite>

The code element
<code>My text</code>

The delete element
<del>My text</del>

The definition element
<dfn>My text</dfn>

The emphasis element
<em>My text</em>

The insert element
<ins>My text</ins>

The keyboard element
<kbd>My text</kbd>

The mark element
<mark>My text</mark>

The strikethrough element
<s>My text</s>

The sample element
<samp>My text</samp>

The small element
<small>My text</small>

The span element
<span>My text</span>

The strong element
<strong>My text</strong>

The subscript element
<sub>My text</sub>

The superscript element
<sup>My text</sup>

The time 10:00 element
<time>My text</time>

The underline element
<u>My text</u>

The variable element
<var>My text</var>

The word break element
<wbr>My text<wbr>


Block quotes

Per definition block-quotes are cites extracted from resources such as books or articles. They generally consist of a body text and the authors name.

Through Bootstrap's utilities they can be left- or right-aligned. More options are also available through different classes.

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

Someone famous in Source Title

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

Someone famous in Source Title

Spacing

There are also some extra tags and classes which might be helpful when creating your pages in order to manage spacing in between content areas.

Add the .spacer classes to the <hr /> in order do increase or decrease the spacing. This can be used on almost every element.

Linebreak


<hr />

Margins

.spacer-zero sets margin-top and margin-bottom to 0.

.spacer-xs sets margin-top and margin-bottom to $line-height-computed / 4.

.spacer sets margin-top and margin-bottom to $line-height-computed / 2.

.spacer-lg sets margin-top and margin-bottom to $line-height-computed.

Iconography

Generate font icons using the gulp icons command. The following icons are available throughout your website. Implement them using {% include "includes/icon.html" with icon="{name}" [color="{color}" title="{title}" sprite="{sprite}"] %} and replace {name} with the icon name.


Colors

Classes can be applied to non-colored icons to force their color

More will be added shortly from Spot framework


icon-white

icon-brand-primary

icon-light-primary

icon-red

icon-spot-color-neutral-60

Tables

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 we've opted to isolate our custom table styles. For complete reference, please visit the Bootstrap documentation.

Basic Table

The basic table is the default behaviour when using the .table class. Not adding a class will result in a table without styles at all.

To ensure a table is responsive, add the wrapper class .table-responsive to an element around the table. For example a <div>.

More about the basics of a table can be found within the Bootstrap documentation.

Page Visits % New Visits Revenue
/index.html 1265 32.3% $321.33
/about.html 261 33.3% $234.12
/sales.html 665 21.3% $16.34
/blog.html 9516 89.3% $1644.43
/404.html 23 34.3% $23.52
/services.html 421 60.3% $724.32
/blog/post.html 1233 93.2% $126.34

Striped Rows

Sometimes it is necessary to distinguish content form within a table from one another. For this add the class .table-striped to the table and visual even and odd colours are added.

Use this on larger table where content is difficult to read and a clear separation might be required.

More about striped rows can be found within the Bootstrap documentation.

Page Visits % New Visits Revenue
/index.html 1265 32.3% $321.33
/about.html 261 33.3% $234.12
/sales.html 665 21.3% $16.34
/blog.html 9516 89.3% $1644.43
/404.html 23 34.3% $23.52
/services.html 421 60.3% $724.32
/blog/post.html 1233 93.2% $126.34

Bordered Tables

These tables are used for displaying table data rather than just general listings or informations. Simply add the class .table-bordered to the table and a border is added around the table.

Use this on tables where structured data is displayed or the context of the table is separated from the surrounding content.

More about bordered tables can be found within the Bootstrap documentation.

Page Visits % New Visits Revenue
/index.html 1265 32.3% $321.33
/about.html 261 33.3% $234.12
/sales.html 665 21.3% $16.34
/blog.html 9516 89.3% $1644.43
/404.html 23 34.3% $23.52
/services.html 421 60.3% $724.32
/blog/post.html 1233 93.2% $126.34

Contextual Classes

At any given time, you can combine one or more table styles as described above. But always keep the use cases of each individual style in mind.

Additionally you are able to add contextual classes to the table to highlight single rows. These can be .active, .success, .info, .warning and .danger. Simply add them to the <tr> element of the table.

More about bordered tables can be found within the Bootstrap documentation.

Page Visits % New Visits Revenue
/index.html 1265 32.3% $321.33
/about.html 261 33.3% $234.12
/sales.html 665 21.3% $16.34
/blog.html 9516 89.3% $1644.43
/404.html 23 34.3% $23.52
/services.html 421 60.3% $724.32
/blog/post.html 1233 93.2% $126.34

Forms

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. For complete reference, please visit the Bootstrap documentation.

Buttons

There are various button sizes and colours to choose from. It is imperative however that you structure the usage according to the importance of the action. When using two actions together, decide which one is of more importance and make it slightly bigger.

For color usage also consider the individual use case. A red button is ideal for cancellation actions while the green counterpart signifies a success action. Please refer to the button names for its descriptive meaning.

The Spot framework only defines Default and Primary buttons, so use of others is discouraged.

Colors

Active

Disabled

Sizes

Types

Link


Button Utilities

There are additional combinations possible using the button system. You can easily add drop-down menus, icons or append more buttons to one another.

More about button utilities can be found within the Bootstrap documentation.

Left Middle Right
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link

Basic Elements

The basics of a form element include text inputs and basic controls. A form always starts with the <form> element followed with a <fieldset>. A fieldset can be the ideal element to create a two column form. Also always ensure to add the class .form to the forms class.

The entire form can also be easily displayed horizontally or vertically. Simply add either .form-horizontal or .form-inline to the forms class.

More about forms can be found within the Bootstrap documentation.

Example block-level help text here.

[email protected]


Selection Elements

These elements are ideally used for user choices.

More about controls can be found within the Bootstrap documentation.


Disabled States

Various states can be helpful to restrict user actions prior to certain requirements. They can also be helpful to just display data without the ability to change the form itself.

More about states can be found within the Bootstrap documentation.


Validation States

Validation helps the user to understand what went wrong. It is recommended to display a message as well as to highlight the specific error within input.

These states can either be shown directly using AJAX or after a page reload from the server side.

More about validation can be found within the Bootstrap documentation.

Controls

Messages

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.

Search Groups

Generic input groups aren't supported due to how buttons vs inputs look like, so only search groups are supported.

Sizing

There is no input-xs option available as of Bootstrap 3.

Grid

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mix-ins for generating more semantic layouts. For complete reference, please visit the Bootstrap documentation.

Standard Grid

.col-md-2

.col-md-2

.col-md-2

.col-md-2

.col-md-2

.col-md-2

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

Advanced Grid

col-md-4 col-lg-2 col-xs-12 Example of what we can do with bootstrap.

col-md-4 col-lg-2 col-xs-12 Example of what we can do with bootstrap.

col-md-4 col-lg-2 col-xs-12 Example of what we can do with bootstrap.

col-md-4 col-lg-2 col-xs-12 Example of what we can do with bootstrap.

col-md-4 col-lg-2 col-xs-12 Example of what we can do with bootstrap.

col-md-4 col-lg-2 col-xs-12 Example of what we can do with bootstrap.

col-md-4 col-lg-3 col-xs-12 Example of what we can do with bootstrap.

col-md-4 col-lg-3 col-xs-12 Example of what we can do with bootstrap.

col-md-4 col-lg-3 col-xs-12 Example of what we can do with bootstrap.

col-md-4 col-lg-3 col-xs-12 Example of what we can do with bootstrap.

col-md-3 col-lg-4 col-xs-12 Example of what we can do with bootstrap.

col-md-3 col-lg-4 col-xs-12 Example of what we can do with bootstrap.

col-md-3 col-lg-4 col-xs-12 Example of what we can do with bootstrap.

col-md-6 col-lg-6 col-xs-12 Example of what we can do with bootstrap.

col-md-6 col-lg-6 col-xs-12 Example of what we can do with bootstrap.

col-lg-12 Example of what we can do with bootstrap.

Grid System allows you to use some responsive helpers classes to hide or show depending of the device size.

Components

Components are reusable modular parts of a website that can be implemented multiple times. This list features the most common elements that can be found within the Bootstrap framework.

Learn more

Navigation

Default nav .nav-default

  • Item 1
  • Item 2
  • Item 3
  • Item
    multiline
  • Item 5

Tabs

Tabs are controlled over the data-toggle="tab" attribute and a reference name href="#home" which points to a container with the corresponding id="home"

More about tabs can be found within the Bootstrap documentation.

  • Home
  • Profile
  • Disabled
  • Dropdown
    • Action
    • Another action


Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.


Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.


Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.


Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.


Pills

Pills behave similar to tabs, they just use another class .nav-pills for styling.

More about tabs can be found within the Bootstrap documentation.

  • Home
  • Profile
  • Disabled
  • Dropdown
    • Action
    • Another action
    • Something else here
    • Separated link
  • Home
  • Profile
  • Disabled
  • Dropdown
    • Action
    • Another action
    • Something else here
    • Separated link

Breadcrumbs

Indicate the current page's location within a navigational hierarchy.

More about tabs can be found within the Bootstrap documentation.

  1. Home
  1. Home
  2. Library
  1. Home
  2. Library
  3. Data

Pagination

Used for navigating within multiple pages like the search results page.

More about tabs can be found within the Bootstrap documentation.

Pagination

  • «
  • 1 (current)
  • 2
  • 3
  • 4
  • 5
  • »
  • Previous
  • Next
  • Older
  • Newer

Labels & Badges

Adds additional information to a specific context.

More about tabs can be found within the Bootstrap documentation.

Labels

Default Primary Success Info Warning Danger

Badges

  • Home 42
  • Profile
  • Messages 3

Thumbnails

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

More about tabs can be found within the Bootstrap documentation.

100%x180
100%x180
100%x180

Media Object

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

As of Bootstrap 3.3.0 there are additional alignment options for the media object available such as media-top, media-middle and media-bottom.

More about the media object can be found within the Bootstrap documentation.

  • 64x64

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

List Groups

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

More about tabs can be found within the Bootstrap documentation.

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
Cras justo odio Dapibus ac facilisis in Morbi leo risus

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.


Wells

Use the well as a simple effect on an element to give it an inset effect.

More about tabs can be found within the Bootstrap documentation.

Look, I'm in a small well!
Look, I'm in a well!
Look, I'm in a large well!

Tooltips & Popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

More about tabs can be found within the Bootstrap documentation.

Tooltips

Popovers


Collapse

Get base styles and flexible support for collapsible components like accordions and navigation.

More about tabs can be found within the Bootstrap documentation.

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Carousel

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

More about tabs can be found within the Bootstrap documentation.

First slide
Second slide
Carousel caption
Third slide
Zurück Weiter

Modals

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

More about tabs can be found within the Bootstrap documentation.

Modal title

One fine body…


Progress Bars

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

More about tabs can be found within the Bootstrap documentation.

Basic

40%

Striped

60% Complete

Animated

80% Complete

Stacked

40%
30%
20%

Contextual alternatives

20% Complete
40% Complete
60% Complete
80% Complete

Utility classes

There is a number of utility classes provided, both bootstrap and custom to help with building pages apart from spacers and the ones covered in "Typography" and "Iconography"

img-responsive makes image responsive, but the image will not exceed it's original width
sr-only the text inside the element will only be visible for screen readers
clearfix when applied to a container of floated elements will expand the element correctly
invisible when applied to an element will hide it (but will maintain it's dimensions in place)
white-space-nowrap the text inside the element with this class will not wrap
white-space-normal the text inside the element with this class will wrap normally
font-weight-normal the text inside the element with this class will be rendered as a regular Open Sans
centered-content when applied to the element, will center it's contents both vertically and horizontally. for vertical centering needs a height specified
no-padding resets the padding to 0
no-margin resets the margin to 0
pull-left floats element to left
pull-right floats element to right
center-block makes block element center aligned, requires a width
row-middle when applied to a bootstrap row will center the contents of the columns vertically. only works with sm columns (will stack on xs and will be horizontal on sm
row-gutter-100 when applied to a bootstrap row will increase the gutter width to 100px (others may be added) - only meant to be used in 2 col setups

Source Code


            

Sitemap

Footer navigation

IDEXX

Über IDEXX

  • Investor Relations (USA)
  • Unternehmens- führung (USA)
  • Unsere Ziele (USA)
  • Unternehmens- übersicht (USA)

Unternehmen

  • Kleintiere
  • Nutztiere
  • Milch
  • Pferde (DE)
  • Wasser

Kontakt

  • Standorte weltweit
  • Nutzungsbedin- gungen
  • Unsere AGB
  • Datenschutz- richtlinie
  • Cookie-Anweisung
  • Impressum

Aktuelles (USA)

Karriere

Schließen

Wir verwenden Cookies, um Ihnen auf unserer Website eine optimale Benutzererfahrung zu bieten. Weitere Informationen über Cookies, deren Verwendung auf unserer Website und die Änderung Ihrer Cookie-Einstellungen finden Sie in unserer Cookie-Richtlinie. Durch die Nutzung dieser Website erklären Sie sich damit einverstanden, dass wir diese Cookies setzen.

×