What Is Bootstrap? How Can I Use It In Joomla 3?

Bootstrap is a big deal beginning with the Joomla 3.x releases, as it was not present in earlier versions of Joomla. Basically, Bootstrap is a core group of pre-styled design elements and commonly desired web site functionality, all rolled together (or available piecemeal) and ready for incorporating into any web site for immediate use.

Why is it called “Bootstrap”? I have no idea. One imagines it’s related to the old saying of pulling oneself up by one’s own bootstraps. In business, the term generally means that you’re doing something (e.g., starting a business) all on your own. So, Bootstrap is basically a bunch of tools that allow you to do a whole bunch of amazing things all on your own. (Of course, there is always the amusing, lingering irony that you’re using an entire system devised by others to be able to do something without any outside help.)

Examples of pre-styled design elements include things like type styles (headings, paragraphs, blockquotes, etc.), forms, buttons, image styles, and much more. Examples of the functionalityinclude behaviors like dropdown menus, breadcrumbs, alerts, transitions, modal windows, carousels, accordion-style lists, tool-tips, and tons more.

Bootstrap is an ultra-impressive collection of code that, once understood, promises to save most web developers considerable time and effort. The largest learning curve is learning what’s there, how to call what you want, how to customize what you want, and how to do all of that from within a Joomla context.

A key point to understand from the start is that Bootstrap, as a freely available set of styles and tools, exists independent from Joomla. It was meant as a universally usable system. In many ways, it’s arguably easier to access and leverage everything Bootstrap has to offer in a static HTML environment separate from a full-blown CMS like Joomla or Wordpress. This is because you would have no conflicts to worry about, you’d have direct and easy access to the entire HTML code of your pages, and it would be a focused environment without a lot of excess code to worry about.

So, if you’re a developer, experimenting with a static site (normal PHP / HTML, etc.) may be a worthwhile first step. For example, if you wanted to build a plain HTML site, you would just include the appropriate calls to the Bootstrap CSS or Javascript file(s) desired, and then make calls to whatever you wanted from your code.

See the Bootstrap site for further reference than what I’m covering here. There, for each element or behavior included, you’ll find a working sample, as well as the code used to achieve it. For example:

If you’re not a developer, you’re going to have a tougher time with Bootstrap, as it does generally require basic HTML, CSS, and Javascript knowledge. But, I’ll show you below in this article some of the easier ways to leverage Bootstrap to save you considerable time.

How Is Bootstrap Loaded into Joomla 3?

You may be wondering how Joomla 3 includes Bootstrap in the first place. After all, if you view a Joomla 3 web site, and then click View Source for that page, you may not readily see where the Bootstrap files are called. This may be especially true when you’re seeking a distinct CSS file for Bootstrap, in particular.

Short answer: There are a few ways, for both CSS and JS files. In most cases for readers of this article, the work of loading these resources has already been done for you. So, if you’re using a built-in Joomla 3 template or any Joomla 3 template from a reputable / leading provider, you can likely skip all of the following. It’s there mainly for informational purposes.

Still want to know? Well, okay.

The Cheating Way: Copy / Paste Into the Relevant template.css File

When you look at the View Source page for, say, a standard Joomla 3 page running the Protostar template (Joomla’s new default, fully responsive front-end template), there’s no readily discernable reference to the Bootstrap CSS. You may expect to see something like:

<link rel=”stylesheet” href=”[path]/bootstrap.min.css” type=”text/css”>

Instead, you may see only a generic call to a generic-looking CSS file, such as:

<link rel=”stylesheet” href=”/templates/protostar/css/template.css” type=”text/css” />

In this case, the Protostar template.css (a 7,000+ line CSS file!) already has the Bootstrap CSS classes built in. So, it appears that the designers of Protostar simply copied / pasted the entirety of Bootstrap’s CSS into the template.css file for Protostar. It’s kind of funny that the architects of Joomla chose this method as an example, but there it is.

The Direct Route: Call it from it’s native home within the Joomla file structure

Above, I’d mentioned expecting a line such as the following in your template head:

<link rel=”stylesheet” href=”[path]/bootstrap.min.css” type=”text/css”>

I said that one would expect this because you actually could include Bootstrap files in this way if you were building a J3 template from scratch. You’d simply need to know the location of the Bootstrap files within your Joomla file system — and that part’s pretty easy. Those and many other handy files are located in the media directory, and then within the jui (or Joomla User Interface) subdirectory. So, the path to the Bootstrap CSS files on your system will be:

[root] / media / jui / css /

Likewise, the Javascript libraries for Bootstrap are located at:

[root] / media / jui / js /

So, one could edit a template file and include the relevant files via a standard HTML call, such as:

<link rel=”stylesheet” href=”/media/jui/css/bootstrap.css” type=”text/css”>

Quick Tangent: What is .LESS and How Does that Dovetail with All of This?

Before we go on to more fun ways to call Bootstrap, let’s take a quick look at something called LESS, which is all the rage these days and, frankly, years late to the CSS party, in my view. But, I’m glad that it’s here, at last. LESS (which Bootstrap relies on) endows CSS with dynamic capabilities.

The most readily appreciated example would be in its use of variables. For example, imagine that you had a large CSS file that used the same color for your H1, H2, H3, and H4 tags.

In the old days, your CSS might look like this:

/* CSS */
h1 { color: blue; }
h2 { color: blue; }
h3 { color: blue; }
h4 { color: blue; }

(Note: As it’s written so simply above, it would be easy to shorten the above example into a single line of CSS. However, in practicality, your headline tags would likely be their own distinct entries, with many other properties besides color listed for each one.)

To make this example even clearer, let’s imagine a few other things:

.span1 { color: blue; }
/* This span1 class is intended to match the headline colors. */
.div1 { color: blue; }
/* This div1 class is meant to be blue in all cases. It’s not necessarily meant to match anything. */

So, what if you want to change all of the headlines that are supposed to be blue, along with only the other items meant to match them, to red? In the old days, you had to go through line by line and replace “blue” with “red” where it mattered. And, yes, that did work. For some of us, we became pretty good at doing this relatively efficiently.

Occasionally, something would go wrong, such as replacing something you didn’t mean to replace, as indicated with that div1 class color, above, which as noted was meant to always be blue no matter what other things changed. But, for the most part, it did work.

But LESS changes all this. Now, to change your headline blues to red, the code changes would look like this:

@headlineColors: red;
@otherAccents: blue;
h1 { color: @headlineColors; }
h2 { color: @headlineColors; }
h3 { color: @headlineColors; }
h4 { color: @headlineColors; }
.span1 { color: @headlineColors; }
.div1 { color: @otherAccents; }

After you’re done coding, you then need to compile your LESS into a CSS file, which would then look like this:

/* Compiled CSS */
h1 { color: red; }
h2 { color: red; }
h3 { color: red; }
h4 { color: red; }
.span1 { color: red; }
.div1 { color: blue; }

LESS actually does a whole lot more than that. (Here is the LESS home on the net.) You can also do things like import another class’ properties into a new class, nest your rules within one another, and do calculations while generating CSS. All of those items are extremely handy tools for the serious CSS geek (although, admittedly, that’s largely beyond the scope of this article).

Just keep in mind that, once you make a change to a LESS file, you need to recompile it into a CSS file again before you can use that CSS file. The core Joomla 3 sadly lacks this capability, although it incorporates LESS. But, there’s an easy fix for anyone using one of the standard templates that comes with Joomla (e.g., Protostar). Look for a free plugin called “Less Compiler” on the Joomla Extensions Directory, or you can also find this here. Once installed, the Less Compiler will recompile your LESS instructions into a new CSS file if it detects that any changes have been made. This is super convenient.

For third-party templates such as those made available by RocketTheme, a LESS compiler is included in case you ever want to recompile. For the purposes of this article, I won’t cover how each framework out there (e.g., Warp, etc.) handles LESS. Feel free to take that ball and run with it, if you like. :-)

As cool and powerful as LESS is, I personally prefer coding my own CSS. I find myself using the Chrome Inspector a lot, and working with complied CSS doesn’t match up perfectly with the pre-compiled LESS files, which causes some inconvenience for me. I realize there are fixes for this issue, but I personally like normal old CSS, to be honest. Still, one should know about LESS these days.

Okay, back to calling Bootstrap into Joomla…

The Geeky Way: Programmatically Call It

Within any template folder for a Joomla install, you can review the PHP and other files that pertain to that template. For front-end templates, just look in the templates directory for any template. In this case, let’s take a peek at templates/protostar/index.php. All templates will have a main index.php file to pull together all of the various elements of that template.

With that in mind, let’s explore further by reviewing the source code for a J3 template like Protostar. In this one, they programmatically loaded that template.css file mentioned earlier into the template. Here’s their code for that (line 41 below):

As you can see on line 38 of that example, Joomla 3 itself has an established (and, to be precise, preferred) programmatic method of loading various Javascript frameworks. And, as you can probably infer from just looking at line 44, Bootstrap’s integration into Joomla is quite robust. If you’re a programmer, look into JHtmlBootstrap to learn more about advanced tools you can leverage. (But, again, that’s well beyond the purview of this article.)

Cool and Useful Bootstrap

Okay, let’s get to the cool and useful stuff! Let’s say you have a standard HTML table that, unstyled, looks like this:

Two quick observations about that table: (1) It’s ugly, and (2) tables are historically not the easiest things to style in HTML. At best, it’s monotonous work.

So, the code for that table looks like this:

Enter Bootstrap… Let’s see what happens when we add a single Bootstrap class to the initial <table> tag, above. The only change we’ll make at this point is to add class=“table” after within that opening <table> tag, like so:

Press Save, and our table now looks like this:

Significantly better, right?!

Want striped rows? No problem. Just add “table-striped” to that class, like so:

Again, press save, and voila:

Similarly, you can add other available Bootstrap classes to the table. To learn which ones are available from Bootstrap, go to the Bootstrap home page. Then, click on “CSS” once there, and scroll down to the area on that page that describes table classes.

If you’ve never worked with CSS or classes before, it might be a bit confusing at first. But, one point I hope you noticed above is that you can assign multiple classes using your class=“xxx” markup. In the first example, my class designation called only a single class, like so:

<table class="table">

So, that brought in one class (called “table” from Bootstrap’s catalog of classes). That gave it the initial design of spacing it out better and adding some borders to the rows.

Then, I added the striping by just putting a space and then including the name of the stripe class, like so:

<table class="table table-striped">

So, as you can see, you can build on these things, as needed. Just chain them together and you’ll bring in whatever properties are defined in that class. If I wanted to further add Bootstrap’s class to provide behavior when I mouse-over a row, I’d add on the hover class:

<table class="table table-striped table-hover">

Once you get the hang of this, it’s actually pretty easy. Further, it reinforces that “chaining” quality of CSS, which can be really handy when one starts writing one’s own CSS. Here’s an example of why that’s a great thing:

Let’s say you wanted to create CSS styles for three different basic images on your web site: (1) left-floated images, (2) centered images, and (3) right-floated images. But, then you realize that, sometimes you want rounded corners, sometimes you want a red border, and sometimes you want a 20-pixel margin around them.

Without that ability to chain classes together, you’d need to have custom styles for each combination of the above. That can translate into quite a bit of work! Instead, break your classes into functional blocks — one for rounding corners, one for adding red borders, one for the 20-pixel margins. Then, you can call any combination as you like, just as in the above examples. I’m simplifying a little bit, but that’s it in essence.

The Dark Sides of Bootstrap:

1. It’s Not Perfect

Sooner or later, as you’re leveraging Bootstrap’s prestyled stylings and preconfigured scripts, there’s going to be something you don’t like and will want to modify for your site’s needs. And, trust me, some of the styles and scripts are fairly elaborate. But, if you’re good at CSS, then styling the look of things should be fairly easy (most of the time). And, if you’re good with Javascript, then tweaking the behavioral items should be relatively straightforward (most of the time). I included those parentheticals because, as with any large system, you may wind up pulling out your own hair from time to time. I don’t want to scare anyone off. But, at the same time, you need to hear the straight truth of it, as well.

2. Your Site Will Look Like 8 Million Other Sites

Whether this is a positive or a negative depends on subjectivity. In times past, designers faced choices for each and every element that needed to be styled for a given web site. And, when they needed neat behavioral actions, they had to run around looking for decent ones. Obviously, the more detailed and specific, the more time it took to do this — and, quite honestly, most clients don’t care to pay designers to consider each possible design element and behavior type. If you’re a business owner, would you rather (1) adopt Bootstrap’s look and feel and just “be done” with that aspect of your web site (perhaps customizing a few things such as headline fonts or subhead colors), or (2) pay a designer to consider each and every element from the ground up?

But, it’s a fair criticism nevertheless; your web site will look like many others, at least in terms of many easily noticeable design elements. The Bootstrap response to this criticism might well be, “Yes, but those are all arguably accepted by a majority of people as pleasing and, nearly, standard. So, it’s also a good thing because it associates your web site with an expectation of expected professionalism, etc.”

2a. If I Hate Bootstrap, Can I Turn it Off?

Technically, yes. But, for the purposes of this article, no. Honestly, that’s the best answer I can come up with, as it leads to a discussion well beyond the boundaries of a basic Bootstrap article. Keep in mind that, if you’re new to Joomla / Bootstrap and you simply don’t like something (e.g., the size or color of a headline), you can still very easily customize such things. That’ll be the easy solution for 99 out of 100 people who might ask this question. So, for anyone reading this article to learn about Bootstrap, I wouldn’t advise disabling Bootstrap altogether (for example by editing your template’s index.php file). Leave that sort of Tom Foolery for others who, trust me, have more time to kill than you do!

Jim Dee heads up Array Web Development, LLC in Portland, OR. He’s the editor of “Web Designer | Web Developer” magazine and a contributor to many online publications. You can reach him at: Jim [at] ArrayWebDevelopment.com. Photo atop piece is adapted from “Blackstone Ankleboot / Schnürstiefelette IM26 Kalbsleder schwarz (3)” by SPERA.de Designerschuhe, Taschen und Accessoires (Flickr, Creative Commons).