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

Creating a complex banner area

Let's start from the top and create our complex banner area with the following features:

  • A site logo positioned above the navbar for desktops and larger viewports
  • A navbar with many menu items, including drop-down menus
  • A utility navigation area
  • A login form with username and password
  • An option to register

Here is the mockup of our desired end goal on a desktop-width viewport:

Creating a complex banner area

On a narrow viewport, it will adjust to this:

Creating a complex banner area

We'll start by working on a new arrangement for our top logo.

Placing a logo above the navbar

In this new ...

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