My blog updated to Bootstrap 3

John Avis by | July 21, 2015 | Responsive Web Design

As much as I thought my simple JavaScript solution for responsive web design without media queries was a good idea (and still has a place), I have updated my blog to using the Bootstrap 3 framework.
As much as I thought my simple JavaScript solution for responsive web design without media queries was a good idea (and still has a place), I have updated my blog to using the Bootstrap 3 framework.

The main reason for the update was that I wanted to modernise the blog home page to show a timeline of posts rather than the latest post. This has SEO benefits and presumably most people don't go to the home page but instead come to a specific post either from a search engine or from an email or social share. If they do go to the home page they get an overview of all recent posts now.

For the timeline styling I found an excellent solution, Build a Vertical Timeline Archives Page Using Bootstrap, that was simple to implement.

Vertical timeline

I modified it slightly by removing the colours from the timeline CSS and instead adding the Bootstrap "bg-" classes to apply colour. That way if I change the Bootstrap colour scheme I don't also have to change the timeline CSS.

As part of the upgrade I have also improved the site navigation and made it easier to browse related posts for something of interest rather than having to read through complete posts one by one.

I love the way that Bootstrap gives me, a programmer with little design ability, the ability to focus on back end development and have an attractive and professional looking front end up and running with little to no effort. I know that it then looks like every other Bootstrap site but a blog is (hopefully) more about content so as long as the front end works and doesn't look unattractive then no problem, right?

Related Posts

Bootstrap Responsive Web Design

Responsive collapsing search filters in Bootstrap 4

by John Avis | March 26, 2018

In responsive design there are times when on a mobile screen you want to hide some options with a button to show them, but on a large screen always show these options.


Jquery/Javascript Responsive Web Design

Yet another enhancement of the simple Pinterest Style Grid Layout jQuery Plugin

by John Avis | November 16, 2017

I have made another change to the modified version of Mediademons Simple jQuery Plugin To Create Pinterest Style Grid Layout - Pinterest Grid.


Jquery/Javascript Responsive Web Design

Enhanced simple Pinterest Style Grid Layout jQuery Plugin

by John Avis | April 13, 2017

In response to a request, I have made some improvements to the modified version of Mediademon's Simple jQuery Plugin To Create Pinterest Style Grid Layout - Pinterest Grid.

Comments

There are no comments yet. Be the first to leave a comment!

Leave a Comment
Tags
ASP.NET Html Forms ASP.NET MVC ASP.NET Web Forms ASP.NET Web Pages Bootstrap C# Classic ASP Cool Websites Databases eBay and PayPal Electrical Repairs General Hardware HTML/CSS Jquery/Javascript Media Center Mobile Phones Responsive Web Design SEO and Social Networking Web Design Web Development Web Security web+db Website Hosting Windows XP Youtube

About me

...mostly about web development and programming, with a little bit of anything else related to the Internet, computers and technology.

Subscribe

Get the latest posts delivered to your inbox.