● Owner of Happy Dog Web Productions
● Devoted father and husband
● Sadly a proud Vikings fan
● Away from Joomla! and web, I enjoy
hanging out, sports, trying new restaurants
and pretending to be a decent food critic,
doing fun competitive things. Okay, an
occasional beer too, especially on fun
/HappyDogWebProductions events like this.
Let’s Connect! #youreawesome
What is Bootstrap?
According to them, it is:
“Sleek, intuitive, and powerful mobile first frontend framework for faster and easier web
Stop wrestling with CSS
Lots of prewritten code can save you
oodles of time.
Easily use a responsive grid, styled
tables, typography, buttons and forms
Stop wrestling with CSS
Where can I use it?
Customize the backend
Custom front end
Make all aspects responsive
Use icons with ease
Create complex workflows
Create a responsive
Custom templates that
Lay out the site in a
Lean on buttons, tabs,
helper classes to quickly
write lots of code for you
Lets do some Bootstrappin
You came here to see some Bootstrappin’,
right? I will now show you how easy it is to use
on your site.
Enabling (for core Bootstrap, J!3)
Either just use the Protostar template
Insert this into your template’s index file in these 2 steps (insert CSS & JS)
//Insert the CSS (via php)
$doc = JFactory::getDocument(); /*This most likely is at the top already
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.
//OR in the <head>
<link href='<?php echo $this->baseurl ?>/media/jui/css/bootstrap.min.
css' rel='stylesheet' type='text/css'>
//With any Joomla 3.1+ site, just add in the <head> tag for the .js
<jdoc:include type="head" />
//Otherwise, insert this just before the </body>
<?php JHtml::_('bootstrap.framework'); ?>
Out of the Box Example
Create a 4 column layout
Add simple text to each column
Add a blank button to each
Meet Techie Jones
My name is Techie Jones.
Literally. I have a gift for great
design and create a great user
experience. Some web agencies
say I’m a challenge to work with.
But I hear you’re up to the task.
We need to make an
ecommerce layout to sell
dog supplies for Boston
Foods Company. You
must complete this within
24 hours. Love, Techie
No additional extension, we need this in the core
4 products to a row, responsive, stacks on mobile
All product images must automatically be rounded,
even if the client uploads a square image, no matter
what perspective the image is. The image will be 50%
of the width until stacked, with the title next to it.
Some products may have tables for information. These
tables need to be
Change colors on hover
All products must scale, or Zoom, when hovered over
to “make it pop”
Items are off white, and go to pure white on hover
Setup all buy now links to go to PayPal for now
4 fun products (raft, costume, frisbee, balls) *images
Paws Raft is New, so use a badge in the title declaring it.
Paws Raft needs a informational declaration box showing that
it can pop from dog nails
Customize the grid!
Desktops with large monitors
Show 4 to a line
Image to the left, title to the right
Show 3 to a line
Image is full width, everything flows underneath
2 to a line
1 to a line
If needed, change the amount of columns to the grid
It is forced fluid (for the better)
Push and Pull?!?
Other Cool Extras
Enable colors on specific table cells or rows
Use Glyphicons (Bazinga!)
Extra helper classes
Lots of renaming (better semantics)
More for flat design instead of skeuomorphic
Ways Bootstrap 3 can improve even more!
You guys are rad!
How did you do that so fast and so well?
I WILL hire you for twice your rate next time.
Have fun in Boston!
I will answer your questions.
I will not catch socks in my mouth.
Got one for later?
@hdwebpros or just pull me aside