What Are Bootstrap and Parallax?

By John Eberhard

There is a new trend in web design that is becoming really popular. It is using a relatively new technology called Bootstrap, which is a new web design platform developed by Twitter.

Bootstrap features have practically defined a whole new style for web design. While not native to WordPress, some developers have created customizable themes for WordPress using Bootstrap technology.

Bootstrap Features:

One of the most noticeable features coming from Bootstrap is the Parallax picture display. What this means is that you have a picture or graphic, and it is displayed in such a manner that the box displaying it is smaller, top to bottom, than the picture. Then as you scroll down, the box scrolls across the picture and displays more of the picture.

This is sort of hard to imagine unless you see it. I have put two parallax images on the home page of my web site:
http://realwebmarketing.net/

This parallax feature is basically taking the Internet by storm. You see it a lot now.

Other Bootstrap style features include:

  • Another feature that is common in Bootstrap type web sites is that they go the full width of the browser window, and resize to full width no matter what screen resolution you have or what type of device you are on. This is an increasingly popular feature that is not restricted to Bootstrap style designs, but almost all Bootstrap style designs that I have seen are full width. This is different from what has been the norm for many years, where web sites have been a fixed pixel width, usually 1,000 or 1,100 pixels in recent years.
  • Sticky header: This means that as you scroll down the page, your header, with your logo and navigation bar, remains at the top of the page.
  • Items fade in from side, above or below. Another popular Bootstrap style feature is that as you scroll down the page, items fade in or move in from the side, top or bottom. You can see this in some of the items on my home page now.
  • Large type and margins. This is more a part of the style that is becoming popular with Bootstrap style websites, but most of them have large body text, often centered, and with really large margins on all sides.
  • Percentages bars: You can have bars showing percentages that fill in as you scroll. You can also have circle counters and number counters.
  • You can have slide shows, including slide shows with video in them.

That is just a sample of these types of features. One popular WordPress theme is Divi, which is basically a framework that allows you to put in any of these and other features. Here is a live theme demo of Divi:
http://www.elegantthemes.com/demo/?theme=Divi

Here are more samples of Bootstrap sites (not ones I designed though) that I thought were good.

http://www.siliconbeachla.com/
http://core-ux.com/
http://www.tcsmgt.com/
http://www.michaelphill.com/
http://conversionlab.no/
http://condiviso.coop/

We can now design and set up Bootstrap style websites using Divi, and in some cases we can incorporate Bootstrap features into existing WordPress themes.