Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.
Using Buttons in Joomla How to apply these buttons to a Joomla website
Examples from this template
Creating dropdown menus
You can create dropdown menus for this template by simply creating a new menu item, assigning it the External URL type, setting the link to # and adding the class dropdown-toggle.
All sub-menu items will then be dropdown types, no additional classes are needed for the sub-menu items.
** Coming soon ** graceful degredation for dropdowns.
Menu item Configuration for the dropdown
Using buttons in your content
Each section on this page is a separate article. To use a button in your content, just use the guidelines on this page.
You can also use the Custom HTML module and have buttons in it, using the same HTML and CSS classes described above
Basically you can use these buttons anywhere within a Joomla site - in menus, articles, modules or any overrides you add to the template.
You can view the source of this page if you want to see exactly how we created the button examples.
Using buttons in your extensions
You can create an extension (module or plugin) and use the classes given here to create buttons using these built-in styles.
You don't have to include any extra CSS files, because the CSS is already written for you. You can include the CSS from this template, and give your users the option to include it if they are not using a bootstrap based template.
Because this template has used all the default bootstrap CSS class names you can test your extension on this template and be certain that it will also work with any other bootstrap based template.
Anything you create now using these buttons will be ready for Joomla! 3.0 when it is released (est. September 2012), which will include twitter bootstrap by default.
Nav, tabs, and pills Highly customizable list-style navigation
Lightweight defaults Same markup, different classes
Powerful base class
All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.
When to use
Tabs and pills are great for sections of content or navigating between pages of related content.
To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.
When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
A simple link to show your brand or project name only requires an anchor tag.
<a class="brand" href="#">
Forms in navbar
To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.
Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<!-- .nav, .navbar-search, .navbar-form, etc -->
Thats right, Joomla comes with its own pagination functionality so we don't need to manually create it.
However, even though we don't need to use the bootstrap pagination component it is good to know it is there - and how it works and what it looks like - in case we want to use it for other purposes, or in other places.
We could also use this knowledge to create an override for the built-in pagination functions.
Explore all your options with the various grid classes available to you. You can also mix and match different sizes.
The follwing images are 360x268 and 160x120.
Alerts Styles for success, warning, and error messages
Rewritten base class
With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.
Single alert message
For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.
Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.
Wrap your message and an optional close icon in a div with simple class.
Warning! Best check yo self, you're not looking too good.
<button class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
Heads up! iOS devices require an href="#" for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a button element with the data attribute, which we have opted to do for our docs.
Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div class="alert alert-block">
<a class="close" data-dismiss="alert" href="#">×</a>
Best check yo self, you're not...
Contextual alternatives Add optional classes to change an alert's connotation
Error or danger
Oh snap! Change a few things up and try submitting again.
<div class="alert alert-error">
Well done! You successfully read this important alert message.
<div class="alert alert-success">
Heads up! This alert needs your attention, but it's not super important.
<div class="alert alert-info">
Progress bars For loading, redirecting, or action status