Mob: 07760

ee-web thinks... a bit

Go on, make my day ... leave a comment

Bootstrap in Joomla 3

January 21st, 2014 by Edward

I have used joomla since approx. iteration 1.5.7. With the recent release of the 3.2 series bootstrap has been included.

Bootstrap, at least according to me(!) is a library of pre-built css styling and JavaScript that enables you to construct a fully responsive layout based on a 12 column grid. It’s a half way house really between building your own template from scratch (which I love to do) and using an off the shelf template. It has been developed by twitter.

Initially a sceptic

I was quite annoyed about this at first – even wondering for a short while if my joomla days were coming to an end. In retrospect that was a  bit of a knee-jerk reaction of course. I still have concerns though, given that bootstrap includes pre-built responsive menus, glamorous buttons and font-styling – could things could start to become a bit generic in the look? I sometimes think I can spot a wordpress site…

My first big 3.x project I stripped all the references to bootstrap right out of the template completely. I then, naturally enough, developed my own grid, and responsive styling. And it all worked well, and the client was happy.

Taking care to remember that one can of course override the styles, I am about to launch into my first site built completely with bootstrap as the basis. Of course, you have to wonder why you are pulling in all that lovely code, just to overwrite it –  but hey – the payoffs are great.

A new Starting Point

For my first attempt I have decided to create a map of the grids using a very simple bootstrap , and then taking screen shots to create a template for use within photoshop or illustrator. I think this will give a good basis to work out a layout, within the basic structure provided by bootstrap and from there it should be easy enough to style up the content in the way most suited to the client, rather than as dictated by bootstrap.

Click on this screen shot to see the bootstrap grid in action. Don’t forget to resize the browser and watch as the grids resize/rearrange themselves.

bootstrap grid

I have created a bootstrap psd grid from this little site which gives the four layouts. You are welcome to download it – just remember its ‘as is’ and a work in progress.

If you find it useful let me know!


Edward owns and runs ee-web design and has been building websites for over 12 years. He is passionate about... most things really

Was this post helpful or interesting? Spread the news.

Leave a comment