Get full access to Mastering Bootstrap 4 - Second Edition and 60K+ other titles, with a free 10-day trial of O'Reilly.

There are also live events, courses curated by job role, and more.

Start your free trial

Adding some style

First, we'll write the style sheet for A11yHCM, and for good measure, we will write myphoto-hcm.css to make our navigation more useful in High Contrast Mode.

Create a styles/a11yhcm.css file and include it in the head of our page:

    <link rel="stylesheet" href="node_modules/font-
    awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="styles/alert.css" />
    <link rel="stylesheet" href="styles/carousel.css" />
    <link rel="stylesheet" href="styles/a11yhcm.css" />

All we will do here is toggle the a11yHCM element to indicate whether it is disabled or enabled. We'll simply add a check mark when it is enabled. We will need a little bit of JavaScript too, to add and remove the enabled class to our element. First, let's ...

Get Mastering Bootstrap 4 - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Don’t leave empty-handed

Get Mark Richards’s Software Architecture Patterns ebook to better understand how to design components—and how they should interact.

It’s yours, free.

Get it now

Check it out now on O’Reilly

Dive in for free with a 10-day trial of the O’Reilly learning platform—then explore all the other resources our members count on to build skills and solve problems every day.

Start your free trial Become a member now