< StepWiser Guides: Bootstrap Introduction

Using Bootstrap to spruce up your pages

Bootstrap is a framework for styling your pages. Created by two Twitter programmers, Mark Otto and Jacob Thornton, it aims to make it easier for web page designers without HTML coding skills to build sophisticated and responsive web pages.

It comes with a complete package of HTML (HyperText Markup Language for organizing the content of your web pages), CSS (Cascading Style Sheets for styling how your webpages will appear) and JavaScript (for dynamic formatting and behaviour of your web pages).

This open-source front-end framework is believed to control about one-eighth of all web sites. Its main attraction is its responsive system, styling pages appropriately no matter what size your viewer, whether a cellphone, tablet or full-size computer.

It also offers out-of-the box styling for tables, forms, buttons, images, navigation, icons and typographic elements. It's free and does not require any sign-on or user information to download from getbootstrap.

W3Schools says the main difference between 3 and 4 is the Bootstrap 4 has new components, faster stylesheet and more responsiveness. You only need 3 if your audience uses Internet Explorer 8 or 9.

You can find examples of the most inventive uses of Bootstrap here at the Expo section of the getbootstrap site.

link to full-size image

The bootswatch.com site has several templates for free to change even the basic look of your site with one download. All it does is change the stylesheet for bootstrap.

link to full-size image

See some of my favourites here. Somewhat fancier versions with scss are also now available.

A stylesheet without classes

But maybe you don't need something so fancy. Thanks to Igor Adamenko you can download a simple, elegant stylesheet for your pages without using classes or attributes that are essential for the backbone of Bootstrap 4. His awsm.css just uses tags like header, nav, h1, p, figure, list, table, footer, etc. Nothing more. This what a page looks like. And this is where you can find its code.

Doing it without Bootstrap

But maybe you find Bootstrap too finicky to fiddle with. You might look at CSS Grids. These are much easier to handle, and there's a great tutorial at w3schools. I find it much more intuitive. My guide is here. It's designed for consulting after the w3schools tutorial, starting with a recap, then offering some new twists.

w3schools even has a simplified css system, w3.css, that may do all you want, and doesn't require JavaScript. Give it a twirl. I've written a guide here.

Next: downloading bootstrap