Bootstrap

TRATON Design System Bootstrap Edition v4.0.0

Build and customize responsive, mobile-first applications with the TRATON edition of Bootstrap. This version includes Tegel Lite color schemes, Tegel typography, pill-shaped buttons, local Font Awesome Pro integration, and alignment with TRATON UX design principles.

Maintenance status

The Bootstrap Edition is no longer actively maintained.

For new projects, we recommend evaluating whether Tegel Lite is the right choice. This version remains available for existing applications that already depend on Bootstrap classes and do not currently have the capacity to migrate to Tegel Lite.

Get started

Based on version 5.1.0

cdn

When upgrading from TRATON Bootstrap 3.x, you can self-host these files (a dedicated TRATON CDN is being evaluated) and simply update your stylesheet and JavaScript references.

See it in action with our simple starter template, or browse the examples to jumpstart your next project. You can also choose to include Popper and our JS separately.

Explore the docs

<!-- CSS only -->
<link href="/docs/5.1/dist/css/tds-bootstrap.min.css" rel="stylesheet" integrity="sha384-xZ32DkqfXPGoqwmAvDkxzTN4UBlZAu0VBwn1SCmdzr3sGbR7APrvkx5qatrRIA5j" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-1AQEbiPPAE1JQyH4ooZJvqAgw2SgsQtPZLVvvks7pPtgPtt2UvqVpoC7CTvj0Rq0" crossorigin="anonymous"></script>

Font Awesome 5

Font Awesome 5 Pro icons are fully included in the package. Font Awesome Light (fal) is used as the standard across the design system, with Solid (fas) reserved for specific corner cases.

A limited set of TRATON icons is also available in Tegel Lite. Use these icons when applicable to stay aligned with the latest TRATON design direction.

Scalable vector graphics ensure that icons look crisp at any screen size. They can be easily styled using our standard utility classes. Below, you can explore the primary icons and copy their HTML markup instantly.

Explore Font Awesome v5

Click an icon to copy its HTML code: Copied to clipboard!

Brand Colors

Color is a powerful and universal identifier. The TRATON Blues act as our brand signal color and is complemented by a warm gray palette and a bright yellow accent.

Our colors are arranged into three different palettes: the core palette is supported by our extended palette and semantic palette to ensure flexibility and functionality.

Color Proportions

Although TRATON Dark Blue is our brand signal color, we do not paint everything blue. We strive for a light expression, dominated by TRATON Warm White where our blues can come in sparsely, complemented by the warm grays and the yellow accent.

Backgrounds & Text

Our backgrounds are primarily TRATON Warm White, but backgrounds in TRATON Warm Grays and TRATON Dark Blue are also frequently used. Our main text colors are TRATON Night Blue (on light backgrounds) and TRATON White (on dark backgrounds).

DESIGN.md

If you need the design rules more than the markup, we have created a DESIGN.md file based on the rules available in Tegel Lite.

Note: The Tegel repository on GitHub is always the best place to stay updated, so you might want to check for updates there.

Download DESIGN.md

Core Palette Copied core token!

The foundation of the TRATON color spectrum. Click a swatch to copy its CSS Custom Property (developer format):

TRATON Blues (Signal & Base)

TRATON Warm Grays (Sophistication)

Neutrals & Yellow Accent

Semantic Palette Copied semantic token!

Communicates statuses and stages. Signal Green and Signal Red are purely functional and must only be used for informational purposes:

Bootstrap Theme Mapping

Extended Palette Copied color variable!

Wider range of tones primarily used for digital touchpoints, infographics, data visualization, and UI interfaces. Click any swatch to copy: