This is a demonstration of the core CSS used on every page.
We use the Bootstrap Grid System as a base. See their documentation for full details, or use the following simple examples.
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.
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.
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 are larger headings for the main headings on the page.
Standard headings are for smaller headings, such as breaking up long blocks of content.
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.
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
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.
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.
attr
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Useful for short quotations to be displayed inline.
The quotation started with Lorem ipsum dolor sit amet
and continued in that vein.
Used to display a list in a more visually pleasing format...
...which is especially useful when the items can have different states...
...or be disabled...
...or need some additional data.
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.
When displaying code you should escape <, > and " characters.
For example, <section> should be wrapped as inline.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>y = mx + b
To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
The API will give a message stating: You must provide a valid derivative ID
Font awesome icons are used. You can find a list of icons on the Font Awesome Cheatsheet.
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).
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.
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/v3.0.0/css/custom-icons.min.css">There is also a development version available:
<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v3.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