It’s a challenge to create a complex multi-column web page. The old way was to make the page into one big table with columns and rows. Table layouts were better than nothing but they confuse screen readers for the blind, are hard to maintain, increase the page load time, interfere with search engines, and violate the HTML 4.01 standard.
Twitter Bootstrap came along and its built-in grid made it easy to create complex layouts. CSS frameworks like Bootstrap are large, monolithic systems that typically include a layout grid and some nice default styling for buttons, forms, and menus. Bootstrap was useful but its problems are many:
Your website looks like other Bootstrap websites
You have to customize Bootstrap to keep it from looking laughably generic.
Every major version release breaks your website
Like every other piece of software, Bootstrap mutates under environmental pressure so you have to rewrite huge chunks of previously-working HTML in order to incorporate the latest upgrade.
When Bootstrap 4.0 arrived, I looked at the number of changes I’d have to make and said Pass. I instead used CSS Grid for layout, added some native CSS for styling forms, buttons, and text, and ditched Bootstrap completely.
Bootstrap is a big download
My Bootstrap website had 7,066 lines of CSS and Javascript. My CSS Grid website has 443 lines of CSS and Javascript, a decrease of 96%, which means faster page load and less bandwidth (important on a mobile device). And CSS Grid is built into the browser so there’s nothing to download and keep updated.
Bootstrap mixes up content and presentation
When writing you should separate content (HTML) from presentation (the page style, usually in a CSS file). For instance if you needed to change the appearance of a website with 100 HTML files (one file for each web page) and a single CSS file, if the content is separate from presentation then you have to modify only the CSS file. Under Bootstrap you might have to modify all 100 HTML files.
Here’s an example of a Bootstrap navigation bar and a navigation bar using plain vanilla HTML.
Which will be easier to understand and maintain?
Bootstrap nav bar
<nav class='navbar navbar-default navbar-fixed-top'>
<div class='container'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#myNavbar'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
</div>
<div class='collapse navbar-collapse' id='myNavbar'>
<ul class='nav navbar-nav navbar-right'>
<li><a href='index.html#about'>About</a></li>
<li><a href='index.html#contact'>Contact</a></li>
<li><a href='projects.html'>Projects</a></li>
<li><a href='blog/pruning.html'>Blog</a></li>
</ul>
</div>
</div>
</nav>
Plain vanilla nav bar
<nav>
<a href='index.html#about'>About</a>
<a href='index.html#contact'>Contact</a>
<a href='projects.html'>Projects</a>
<a href='blog/pruning.html'>Blog</a>
</nav>
We can replace the Bootstrap CSS framework with CSS Grid and a small amount of plain vanilla CSS for styling forms, buttons, and text. CSS Grid is powerful, flexible, and easy to learn. It will be the layout system for the forseeable future.