O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

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

Setting up major structural elements

We're almost ready for page content. Specifically, we'll create the following:

  • A banner space with our logo and navigation
  • A main content space for page content
  • A footer area for copyright information and social links

We'll set this up using current HTML5 best practices with the support of major Accessible Rich Internet Applications (ARIA) role attributes (with roles such as banner, navigation, main, and contentinfo).

Run the bootstrap watch command, and your browser should open automatically on http://localhost:8080/. Then start editing the html/pages/index.html file; you can use your favorite text editor, and write down the following HTML code into it:

--- layout: default title: Home --- <header role="banner"> ...

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