A clean and modern Bootstrap mockup

Looking at different approach to design with Bootstrap 4, a free flowing open one page design.

A large amount of websites have defined areas and even i am guilty of this, Think using Jumbotrons or cards for headers and sections, This section is always a different color to the background so it stands out a lot.

Now days the modern web has transitioned from this emphasis on responsive and structured web design to now minimal, open and clean. Which of course can be had alongside responsive.

Simple design

These new age websites are now designed with no visible boundaries or walls holding content in, this places high importance on your background. Effects like angled backgrounds and gradients rule.

The use of logos and diagrams also have great impact on the overall design and readability of your website.

In a couple of hours i came up with a bare bones template for a modern Bootstrap page. Transparent navbar with centered links, no jumbotrons or cards and a gradient background.

I even avoided centering the text in the header section which is something i do too much.

Modern Bootrap design 1
Modern Bootstrap design

Modern Bootstrap design Modern Bootstrap design Modern Bootstrap design mobile view

You can view a working example at Codepen: