O'Reilly logo

Mastering Bootstrap 4 - Second Edition by Jason Marah, Benjamin Jakobus

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required