Bootstrap for Beginners

Written by
Category:
Web Development
Tagged in:
Time to read: 2 min, 45 sec

I recently had the great privilege to present twice at the recent Joomla!Day San Francisco. It was a uniquely different experience, thanks to organizers such as James Foreman. The weekend had a hybrid conference / unconference approach - which means, on top of some top-notch presentations, there was a lot of different interactivity, such as small group discussions and other fun exercises. A lot of questions were asked and hopefully a lot were answered.

My two presentations were about Bootstrap. The first one went into some detail about Bootstrap 3, its differences from earlier versions, and how to incorporate it into your Joomla! instance. My second presentation was showing how you can use Bootstrap right out of the box with the default Joomla! 3 template, Protostar.

A common theme in the conversations I was having was more or less trying to grasp what Bootstrap even is and what it does for your site.

What is Bootstrap?

Bootstrap is a framework that you can leverage on your site. It allows you to do things like

  1. Make your site responsive.

  2. Easily style elements such as forms, tables and buttons.

  3. Use a grid system that will allow you to lay out your site much easier.

  4. Easily style alerts, badges, and other miscellaneous HTML elements.

  5. Use an iconset for an easy display of icons.

  6. Use some more advanced elements such as dropdown menus, responsive navbars, accordion menus, image rotators and more.

So, when you plug this (Bootstrap) into your template, you have access to all of this cool stuff. It is not necessary to use in your site. In fact, you can use a totally different styling framework. Being that Joomla uses it in the core, it can be advantageous.

Why Bootstrap can be advantageous for your Joomla site

Joomla uses HTML that natively calls Bootstrap CSS. What that means is that when your site uses things like breadcrumbs, pagination, and alerts it naturally will pull Bootstrap styling. Therefore, if your template has Bootstrap inside of it, it eliminates a step of styling for those elements.

Who can use it?

Technically, everyone can. In fact, if you use the default template Protostar you will have Bootstrap enabled. Who should be customizing it? I would say someone who has at least a little history of working with CSS and HTML.

How do I get started?

As I mentioned a few times during my presentation, one of the best ways to get a full grasp on there is to just get out there and try it out. Create a dummy site if you have to. Take a longer lunch, or somehow carve out an hour or two for a few days and just practice doing just a few things. Don't try to conquer the world and create the world's most complex Bootstrap site right away. But make one small goal and accomplish it. Before long, you feel really comfortable and realize that it is actually pretty easy to work with.

Questions about Bootstrap? Let's talk - comment below. 

Written by Ryan Boog

Ryan Boog

I am the CEO of Happy Dog Web Productions. I look forward to taking web, mobile design and digital marketing to the next level with Happy Dog. Follow Happy Dog at @hdwebpros or me personally at @ryanboog. Are you a fellow Google nut? Add me to your circle.

Have a suggestion?

We'd like to hear it. Drop us a line

Email us a suggestion

Like what you read?