My Introduction to Bootstrap

As I discussed in my first post, First Steps in Web Development, I’m currently studying Front End Development through Free Code Camp.

The first exercises covered basic HTML and CSS, something I felt fairly comfortable with already, but there were some things that added to my knowledge. Prior to this course I had never heard of Bootstrap and I never knew that building responsive websites could be so simple. In just a few hours my web pages went from basic styling reminiscent of the old days of GeoCities, to relatively modern, sleek and stylish.

So What Is Bootstrap?

Much of the reference material I’ve read refers to Bootstrap as Twitter Bootstrap but I never really knew why. According to this article on Wikipedia Bootstrap was developed at Twitter as a framework to be used internally which would provide consistency throughout the company. In 2011 it was released as an open source project and began being picked up by web designers everywhere.

I am sure that I’ve only scratched the surface of Bootstrap’s capabilities, however there are a few functionalities I’ve used that now I can’t imagine doing without. One of the big things Bootstrap is known for is simplifying website layout by implementing a grid-like system of rows and columns. This makes it easy to put things where you want them, and choose how they will appear on smaller screens as well. But of all the functionality I’ve tried my favorite so far is a navigation header, or ‘navbar’, which is easily customized and implemented. With just a few simple lines of code you get results very similar to the navbar at the top of this page.

One of my favorite things about this navbar is the scaling. As the screen size is reduced, the buttons on the right side of the bar get rolled up into a drop-down menu. Here’s a Fiddle showing it in action. The example code navbar is set up for a single page where you would want to navigate up and down to different sections, but can easily be adapted to multiple pages by changing the href attributes to urls. If you were using the navbar to navigate a single page, consider building your body tag similar to:

<body data-spy="scroll" data-target="#navbar">
Or
<body data-spy="scroll" data-target="#navbar" data-offset='100'>

This will change the highlighting on the navbar items as you scroll, making it easy to identify where you’re at on the page at a glance. Of course, this is not necessary if you choose not to have the navbar stick to the top of the screen.

So That’s Bootstrap?

Well, yes and no. This is just a sample of one of the built-in items Bootstrap has to offer. As I continue my education in web development, I’m sure I’ll begin to run into some of the limitations of Bootstrap and maybe will eventually move away from it altogether. Until then, I will enjoy the ease of use and great results it provides.

A New Contender

There is a feature of CSS3 called <grid> which could be an interesting alternative to Bootstrap, or at the very least a viable option to replace some of Bootstrap’s alignment/positioning functionality. This feature is not widely supported by any browsers yet, but I believe it will start to gain traction as browsers are updated.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s