Introduction

The cap hpi Bootstrap makes front-end web development of cap hpi related products faster and easier, and is flexible enough to work perfectly for projects of all sizes. This system is based on Bootstrap version 3, so refer to their documentation for full details.

We provide all CSS and JavaScript files minified (*.min.css and *.min.js) and full-fat versions for development (*.css and *.js). DO NOT use the unminified versions on a production site.

This page uses the full-fat development files, see here for the same page using the minified files.

Usage

Production

Reference the assets within your projects directly from https://bootstrap.cap-hpi.com/v2.0.0/css/*.min.css or https://bootstrap.cap-hpi.com/v2.0.0/js/*.min.js. This allows us to roll out bugfixes and new features without having to deploy new versions of your applications.

Development

Reference the assets within your projects directly from https://bootstrap.cap-hpi.com/v2.0.0/css/*.css or https://bootstrap.cap-hpi.com/v2.0.0/scripts/*.js. This allows us to roll out bugfixes and new features without having to deploy new versions of your applications.

The core stylesheet

You must use the core stylesheet (also read the Increasing Performance section for making rendering faster):

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/core.min.css">

This core stylesheet gives you styles for the following:

This is enough to get a basic page styled correctly.

See a demonstration page

To use more specific styles you need to include other stylesheets (details below).

JavaScript

We have a core JavaScript file which initialises the page, loading some polyfills where required and setting some classes on the html and body elements to say that JavaScript is running and the custom web fonts have loaded. Include this script just above the closing </body> tag, but above any other scripts.

<script src="https://bootstrap.cap-hpi.com/v2.0.0/js/core.min.js"></script>

For development you should use the full-fat versions:

<script src="https://bootstrap.cap-hpi.com/v2.0.0/scripts/fontfaceobserver.js"></script>
<script src="https://bootstrap.cap-hpi.com/v2.0.0/scripts/init.js"></script>

jQuery

Some of our Bootstrap components require jQuery, so if you are using those components you also need to include it. You should do this just above the closing </body> tag, so the loading and parsing of the file doesn't block rendering.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

We clearly mark which components require JavaScript below. If you're not using those components there is no need to include this JavaScript. In fact, in the interests of performance, we highly recommend you don't include JavaScript that you're not actually using on the page.

Additional styling

You can include other stylesheets for specific styling as required:

Forms

If you display forms and buttons on your page you need this stylesheet.

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/forms.min.css">
See a demonstration page
Tables

As cap hpi often display a lot of data on web pages, we have a comprehensive set of table styles.

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/tables.min.css">
See a demonstration page
Notifications and pagination

Provides styles for alerts, badges progress bars and pagination links.

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/notification-pagination.min.css">
Navigation components [requires JavaScript]

Navigation components include breadcrumbs, tabs, dropdown (and dropups), and pills. These components require JavaScript.

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/navigation-components.min.css">
Content components [requires JavaScript]

Content components include accordians, panels, list groups and wells. These components require JavaScript.

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/content-components.min.css">
See a demonstration page
Partials [requires JavaScript]

Partials are sections of HTML designed to work as standalone units, such as modals. These components require JavaScript.

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/partials.min.css">

Unsupported browsers

While this system should work perfectly for the vast majority of modern browsers, there are some older browsers - notably IE9 and below - for which we don't offer full support. Rather than block any users unfortunate enough to be using these old browsers (they've got enough to deal with, poor things) we display a message to let them know that some things may not work as intended.

We also load a set of JavaScript polyfills which enhance the capabilities of those browsers so they won't completely fail. Here's the code you need to put just after your opening <body> tag.

<!--[if IE]>
    <p class="unsupported">You are using an unsupported browser, so some parts of this page may not display or work as intended. Visit <a href="https://browsehappy.com/">browsehappy.com</a> to upgrade your browser.</p>
<![endif]-->

The strange <!--[if IE]> bit is a conditional comment which is only supported by IE9 and below. Adding this code will render something like this:

If you use Angular, or another framework which has its own browser support requirements, then you are responsible for displaying this banner (or another suitable message).

JavaScript polyfills

Some older browsers do not support some of the JavaScript APIs we use such as dataset and classList. We have a set of polyfills to add these capabilities included in the core JavaScript file, which brings less-capable browsers somewhere nearer the functionality of modern browsers.

Increasing performance

Performance of pages is hugely important, and there is a huge amount of evidence that increasing performance of web pages - particularly on mobile devices - leads to increased engagement and use. There are many statistics and case studies available at wpostats.com if you'd like to dive into this big subject.

We attempt to increase performance in two main ways.

Faster rendering

To make pages faster to render we can inline the 'critical' CSS in the head of the page. The critical CSS is the CSS required to style the visible portion of the page - normally the top of the page, especially on smaller viewports. This technique is well explained here.

There is a critical CSS file available for you to use, which contains the following:

The file is available at https://bootstrap.cap-hpi.com/v2.0.0/css/critical.min.css. It is up to you as a developer to fetch the contents of this file and cache it locally for your app so you can include it in the head of your documents like this:

<head>
    ...
    <style>
        /* the contents of /v2.0.0/css/critical.min.css go here */
    </style>
    ...
</head>

This will load the critical CSS in the fastest way possible. You then need to load the other CSS files you need later in the page lifecycle. The easiest way to do this is by adding <link> elements in the head of the page with the rel attribute set to preload:

<!-- Tell the browser to download the core.min.css file in the background, then when the page is loaded set it as a stylesheet -->
<link rel="preload" href="https://bootstrap.cap-hpi.com/v2.0.0/css/core.min.css" as="style" onload="this.rel='stylesheet'">
<!-- In case JavaScript is disabled or fails, have a fallback -->
<noscript><link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/core.min.css"></noscript>

Using this technique means the initial render of the page is much faster, which matters on mobile devices under dodgy network conditions.

See a demonstration page using critical CSS.

Preventing the "Flash of Invisible Text"

We use custom fonts to render header and body text. However, most modern browsers will hide the text until the custom font is available for rendering. This means users can get a "Flash of Invisible Text" (FOIT). This can be disconcerting for the user, and if the custom font file takes a while to load (for instance if the user is on a poor network) then this can make the page look as though it is broken.

To counter this we ensure the page is rendered using the default system font, then enhance it using the custom font when the custom font file is available. This is done by including the /v2.0.0/js/core.min.js file at the foot of your page.

    <script src="https://bootstrap.cap-hpi.com/v2.0.0/js/core.min.js"></script>
</body>

For even better performance you can inline the contents of this file, just like you can do with the critical CSS:

    <script>
        /* the contents of /v2.0.0/js/core.min.css go here */
    </script>
</body>

See a demonstration page using which avoids FOIT.

What difference does this performance tuning make?

Simulating a regular 3G network connection in Chrome shows the difference this performance tuning can make. Here's the initial page weight and filmstrip of the core demonstration page:

The page is only 5.4KB and loads in just 164ms, however the first paint is at 995ms while the page finishes rendering at 2.21 seconds. Not bad, but if we look at that first paint we see the text is actually invisible.

It's not until 1.93 seconds that the text is visible and the user can interact with the page.

So we've got two problems: the gap between the 164ms load time of the page and the first render, and the fact the text isn't visible for nearly 2 seconds.

This is why we've built the performance improvements. The critical CSS demonstration page has a larger initial page weight - because of the inlined CSS - and the final render time is similar:

However we can see the first paint is at just 483ms and contains the fully rendered text:

Those milliseconds matter when the user is on a less-than-wonderful network connection.

Usage with Angular

See guide

Demonstration apps

We've prepared some demonstration apps which combine many of the components displayed below into more realistic-looking scenarios.

Themes

CSS

To enable backwards compability, the default theme files are in https://bootstrap.cap-hpi.com/v2.0.0/css/*.css

Other themes are in their own folder, for example https://bootstrap.cap-hpi.com/v2.0.0/css/fleet-leasing-rental/*.css

Images

Images for the default theme are in https://bootstrap.cap-hpi.com/v2.0.0/img/

Other themes are in their own folder, for example https://bootstrap.cap-hpi.com/v2.0.0/img/fleet-leasing-rental/

Grid system

We use the Bootstrap Grid System as a base. See their documentation for full details, or use the following simple examples.

Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Typography

Typography is at the core of every web page or app. It may sound incredibly simple, but it will help your users if you choose the right typographic elements to render your content.

Display headings

Display headings are larger headings for the main headings on the page.

Display heading 1

Display heading 2

Display heading 3

Display heading 4

Standard headings

Standard headings are for smaller headings, such as breaking up long blocks of content.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text sizing

Lead

Useful for a larger textual description, often nested in a well (as in this example).

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Text size increase

Useful when you want to make text bigger, but not make it look like a heading.

A third bigger than normal text text-1-3x

Two thirds bigger than normal text text-1-6x

Twice as big as normal text text-2x

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

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

This line rendered as bold text.

This line rendered as italicized text.

Abbreviations

attr

Blockquotes

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

Naming a quote source

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

Someone famous in Source Title

Reverse layout

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

Someone famous in Source Title

Inline quotations

Useful for short quotations to be displayed inline.

The quotation started with Lorem ipsum dolor sit amet and continued in that vein.

Definition list

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Lists

Unordered list

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered list

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Reverse ordering

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Starting at a number different to 1

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

List Groups

Used to display a list in a more visually pleasing format...

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

List Group States

...which is especially useful when the items can have different states...

  • Dapibus ac facilisis in
  • Dapibus ac facilisis in
  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

Disabled List Group

...or be disabled...

  • Dapibus ac facilisis in
  • Dapibus ac facilisis in
  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

List Group Labels

...or need some additional data.

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

List Group Cards

If you need a each item in a list group to be slightly more separated, you can add the class list-group-cards. This works especially well in a well.

  • Dapibus ac facilisis in
  • Dapibus ac facilisis in
  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

Code

When displaying code you should escape <, > and " characters.

Inline code snippets

For example, <section> should be wrapped as inline.

Block of code

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

Variables

y = mx + b

User input

To switch directories, type cd followed by the name of the directory.

To edit settings, press ctrl + ,

Sample output

The API will give a message stating: You must provide a valid derivative ID

Icons

Font awesome icons are used. You can find a list of icons on the Font Awesome Cheatsheet.

Basic Icons

fa-camera-retro

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).

  • Example: basic icon If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.

Larger Icons

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

Custom icons

We also have a set of custom icons specifically for cap hpi use. To use these you must reference the custom font CSS file:

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/custom-icons.min.css">

There is also a development version available:

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/build/custom-icons.css">

Add the CSS class for the icon you want to an element, for example:

<i class="icon-accident"></i>

There are many icons for you to choose from:

icon-accident
icon-cruise-control
icon-dab
icon-last-service-date
icon-number-of-keys
icon-heated-seats
icon-heated-windscreen
icon-extended-warranty
icon-radio
icon-start-stop-button
icon-outstanding-finance
icon-paint-fabric-cover
icon-upholstery
icon-service-plan

icon-alloys
icon-paintwork-carried-out
icon-service-history
icon-metallic-paint
icon-panoramic-windscreen
icon-v5-present
icon-dashboard-lights
icon-parking-sensors
icon-rain-sensor-wipers
icon-dashboard-photo
icon-mileage-discrepancy
icon-sunroof
icon-towbar

icon-mileage
icon-odometer-change
icon-air-con
icon-aux-usb
icon-bluetooth
icon-climate-control
icon-sat-nav
icon-spare-tyre-type
icon-tyre-alloy-cover
icon-xenon-lights
icon-tyre-treads
icon-test-drive
icon-add-notes

You can also make these custom icons larger:

icon-outstanding-finance icon-lg

icon-outstanding-finance icon-2x

icon-outstanding-finance icon-3x

icon-outstanding-finance icon-4x

icon-outstanding-finance icon-5x

  • If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Images

Responsive images

Responsive image

Aligning images

Aligned to the left Aligned to the right

Tables

We deal with lots of tabular data, so having a comprehensive set of table styles can make an app really easy to use.

Default table with row states

# First Name Last Name Username
Primary Mark Otto @mdo
Success Jacob Thornton @fat
Warning Larry the Bird @twitter
Danger Mark Otto @mdo
Info Jacob Thornton @fat
Default Jacob Thornton @fat
Selected Bob Bobson @bob

Small table with row hover effect

For smaller tables add the table-condensed, and for a hover effect add the table-hover class.

# First Name Last Name Username
Primary Mark Otto @mdo
Success Jacob Thornton @fat
Warning Larry the Bird @twitter
Danger Mark Otto @mdo
Info Jacob Thornton @fat
Default Larry the Bird @twitter
Selected Bob Bobson @bob

Row boxes

You can encase a table row in a box to give it more prominence using the row-boxed CSS class.

Column 1 Column 2 Column 3
Row 1, Column 1 Row 1 Column 2 Row 1, Column 3
Row 2, Column 1 Row 2 Column 2 Row 2, Column 3
Row 3, Column 1 Row 3 Column 2 Row 3, Column 3

Responsive tables

If you have wide tables that need to be scrollable on smaller screens (mobile devices, for instance) you can add the table-responsive class to the container element.

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

Scrollable tables

It's possible to fix headers and on or more columns in order to create a scrollable table like this:

CAPID Description SMR Service Tyres Brakes Others Insight Insight Var. Insight Var. Front Tyre Rear Tyre Derwent Code Tyres Brakes Others Insight Insight Var. Insight Var.
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212

Note: although the code above shows class="fixed-header" and class="fixed-cell" on elements you do not have to add these yourself. They are shown because of a quirk with the code demo system.

There are a few things to do to make this work. Firstly create a container element around your table with a defined height; this will be the scrollable element: <div class="scrollable" style="max-height:500px"> (the height can be set in a separate CSS file or <style> block).

Secondly you need to tell the table how many columns you want to fix on the left hand side. You do this with a data attribute: <table class="table" data-fixed-columns="2">. This tells the table to keep the first two columns fixed in the view at all times.

Thirdly you need to include the JavaScript that makes this work. The minified version for production is here:

<script src="https://bootstrap.cap-hpi.com/v2.0.0/js/tables.min.js"></script>

And the full version for development is here:

<script src="https://bootstrap.cap-hpi.com/v2.0.0/scripts/tables.js"></script>

Tables with row group headers

Useful when displaying complex data which has a primary piece of information (such as a derivative name and code), with secondary information shown on subsequent rows.

Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
Item 1
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
Item 2
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
Item 3
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6

Nested tables

You may need to display nested data in a table, for example brand > model > trim > derivative rows. Because nesting actual <table> elements inside each other gets very messy very quickly, there are some CSS classes you can apply to give the impression of nesting. Here's a simple example (with a couple of rows styled with the row-boxed class):

cap ID Dates
Toggle
Toggle
2017 -
2017 -
2017 -
2017 -

To make this work you need to give the table a class of table-nested:

<table class="table table-nested">

Then each nested row you need to give a class of row-nested:

<tr class="row-nested">

You can then specify the level of indentation for the column you want to look nested. There are three indentation levels: level-1, level-2 and level-3. Apply them to the cell in each row you want to be indented:

Header column
Not indented
Indented with level-1
Indented with level-2
Indented with level-3

If you want the user to be able to trigger showing/hiding of the nested rows you should add elements (buttons or links) to allow them to do that, and wire up some JavaScript to make it work. If there isn't a lot of data then it may be more efficient to render all the rows and hide the ones that need to be hidden with CSS. Here's a quick example of that (with some dirty, hacky JavaScript that doesn't work properly, but you get the idea):

Header column
Audi
A1
Generation 1
A4
Generation 4
Generation 5

Setting the width of table columns

You may want to set the width of different table columns. For this you can use the grid system classes such as .col-xs-4 which gives you a 12 column grid to use. You apply these in a <colgroup> element which is the first child of the <table> element, like this:

<colgroup>
    <col class="col-xs-1">
    <col class="col-xs-7">
    <col class="col-xs-2">
    <col class="col-xs-2">
</colgroup>

Assuming there are 4 columns in your table this will set the first column to be one twelfth of the total width, the second column to be seven twelfths, and the last two columns to both be two twelfths. Here's the whole thing in action (this table contains checkboxes, so we also need to include the forms CSS file):

Total Date
€3,543,211 2017/04/02
£21,101,112 2017/04/06
$124,211 2017/04/07

Notifications

Alerts

Consistent, clear notifications help draw users attention to messages they need to see. Don't overuse them or users will ignore them. Instead put them in a consistem place and only display them when you really need to.

Progress Bars

To make these progress bars move you'll need to update the aria-valuenow="0" and style="width: 0%" values with your task progress percentage.

Animated Progress Bars

Labels / Pills

These labels are great for quick notifications, or drawing the users attention to particular elements. Like with notifications, try not to overuse them or your page will look like an explosion in a Fisher Price factory.

Primary Secondary Success Info Warning Danger

Tooltips

Pagination

Pagination Active

Pagination Disabled

Pagination Sizes

Forms

Buttons

Outline Buttons

Disabled Buttons


Button Sizes

Large

Small

Block Button

Multi Option Set

Disabled Multi Option Set

Multi Option Set Sizes

Large

Small

Radio Buttons

Checkboxes

Fieldsets and legends

Use <fieldset> elements to group related form fields together. Give each <fieldset> a <legend> to use as a title.

About you
Security

Full form example

Login details

We'll never share your email with anyone else.

Your choices

Any other information?

This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.

Hidden Labels

Input Sizes

Defining States

Input States

Success! You've done it.
Example help text that remains unchanged.
Shucks, check the formatting of that and try again.
Example help text that remains unchanged.
Sorry, that username's taken. Try another?
Example help text that remains unchanged.

Checkbox States

File Upload

Content components

Components to help display content.

Accordian Rows

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.

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.

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.

Wells

Well image cap

Well title

Some quick example text to build on the well title and make up the bulk of the well's content.

Go somewhere

App Icon

Well image cap

App Icon (No Shadow)

Well image cap

Tables in wells

When putting a table inside a well the styling for the table changes slightly. To make this work you'll also need to include the tables CSS file. Here's an example:

Report name Total Date
Report 1 €3,543,211 2017/04/02
Report 2 £21,101,112 2017/04/06
Report 3 $124,211 2017/04/07

Partials

Modals

Layout

You must add a conditional comment containing a warning message for unsupported versions of IE. This is the code:

<!--[if IE]>
    <p class="unsupported">You are using an unsupported browser, so some parts of this page may not display or work as intended. Visit <a href="https://browsehappy.com/">browsehappy.com</a> to upgrade your browser.</p>
<![endif]-->

(Sometimes the conditional comment tags <!--[if IE]> and <![endif]--> don't show up in the example code below, but you do need them.)