Getting Reacquainted With Bootstrap

Bootstrap is this really cool and really popular HTML, CSS, JavaScript framework developed at Twitter that makes building a responsive website a stupid simple process. It’s also a good skill to have in your toolbelt these days- I’ve seen many job postings listing Bootstrap as a desired skill.

Responsive Design

Chances are, you’ve been on a website that looks different on your computer than your phone. Or, you’ve made your browser smaller and noticed the content moves around a little. Responsive refers to the fact that websites will readjust how they appear according to the size of the screen or window you’re viewing it in.

Grids

Grid systems are used for creating page layouts with a series of rows and columns. Bootstrap’s grid spans up to 12 columns and uses predefined classes for easy layout options.

Each row must be inside of a “container” or “container-fluid” class, and each column will have a class like “col-xs-#” which will affect how it looks on certain screen sizes.

Font Awesome

Font Awesome is a font and toolkit of scalable and customizable vector icons.

It probably sounds silly but for the longest time, I couldn’t figure out why it was that every time I seemed to check a developer’s source code, they seemed to have these weird “fa fa-” classes where the social media icons were. I thought I had missed something on coding standards.

Nope, I just needed to open my eyes to the wonder that is Bootstrap.

I was also downloading icon sets and trying to add them as anchored images on the pages I built. Learn from my mistakes and use Font Awesome instead.

Now that I’ve looked more into Bootstrap outside of the usual paint-by-numbers type of tutorials, I’m getting more and more excited about actually using it.

I’m also looking into some Bootstrap specific courses out there- preferably free. If you know any, please let me know!

Advertisements

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