Templating with Joomla! 3 and Bootstrap

with Jen Kramer
please wait ...
Templating with Joomla! 3 and Bootstrap
Video duration: 0s 5h 8m Intermediate


In this course, Jen Kramer shows how to build a custom Joomla! template that automatically tailors and sizes content for a wide range of displays, from desktops to mobile devices. This course covers using Joomla! 3 with its built-in Bootstrap framework, and a start-to-finish development strategy that covers everything from converting the wireframe to HTML, to styling the headers and footers. Jen also shows how to incorporate Dreamweaver and the Firefox developer tools into your workflow, and accommodate multiple layouts and color variations in a single template.

Topics include:
  • Reviewing the graphic designs
  • Creating HTML based on the Bootstrap framework
  • Converting the HTML to a Joomla! template
  • Installing the custom Joomla! template
  • Using Firebug and the Firefox Web Developer Toolbar
  • Styling the navigation bars
  • Creating a dropdown menu
  • Modifying the template for tablets and phones
  • Working with advanced template features, like overrides


- [Voiceover] Hi, I'm Jen Kramer. Welcome to Templating with Joomla! 3 and Bootstrap. In addition to having worked with Joomla! before, I'll assume you already have a good background in hand-coded HTML and CSS. You don't need to know PHP, but you should be able to copy and paste PHP where needed. You'll learn about Joomla! 3's integration with the Bootstrap framework. We'll make a powerful template that's flexible and adapts easily to desktops, tablets, and phones. I'll show you how to make some content device-specific, and I'll show you how to set a Bootstrap's menu bar, which collapses at lower screen resolutions.

I'll also throw in a few tools and tips about working with CSS in Joomla! So let's get started with Templating with Joomla! 3 and Bootstrap.

please wait ...