Awesome Bootstrap Typography Elements

Joomla 3 and newer versions are loaded with bootstrap at its core. What does it means? You can apply many of its styles irrespective of your Joomla template. In this article, I will list 10 of my favorite bootstrap styles.

Paragraph Styling

Bootstrap's global default font-size is 14px, with a line-height of 1.428. Make a paragraph stand out by adding lead class to paragraph elements. To make coloured background, add class bg-primary to the paragraph element.

Table Styling

For basic styling, light padding and only horizontal dividers, add the base class table to any table element. Add more styling to make your tables stand out - table-striped, table-bordered, table-hover, table-condensed

Add colors to rows by adding active, success, info, warning and danger classes to td or tr elements.

Buttons

Convert your hyperlinks to buttons for more click through rate. Use base class btn with link elements. You can make buttons large or small too - btn-default, btn-primary, btn-success, btn-info, btn-danger

Image Styling

Use square images and then add classes img-rounded, img-circle and img-thumbnail.

Navigation

To create navigation system, you need unordered list element (ul) where its list items act as menu items. Add nav base class to ul parameter, then add either nav-tabs or nav-pills. For vertically stackable menu, add nav-stacked to nav-pills.

Use class active on li element on current menu item.