Hints, Tips 'n Tutorials
Template Discussions
Modules / Extensions
Joostrap 101
Discussion Index
Roadmap

Overview

Get the lowdown on the key pieces of Bootstrap's infrastructure, including the best approach to better, faster, stronger web development.

More about Overview

Grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

More about Grid's

Typography

All HTML headings and classes available in Bootstrap, <p>, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

More about Typography

Code

Inline
Wrap inline snippets of code with <code>.

Basic block
Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

More about Code

Tables

For basic styling—light padding and only horizontal dividers — add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, Bootstrap opted to isolate the custom table styles.

More about Tables

Forms

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

More about Form's

Buttons

Use any of the available button classes to quickly create a styled button.
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
You can also create block level buttons — those that span the full width of a parent — by adding .btn-block.

More about Button's

Images

Add classes to an <img> element to easily style images in any project.
You can also style the shape of yopur images using the following classes:
class="img-rounded"
class="img-circle"
class="img-thumbnail"

More about Images

Helper Classes

Helper Classes can be used for things like generic close icon's for dismissing content like modals and alerts.

More about Helper Classes

Responsive Utilities

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media queries. Also included are utility classes for toggling content when printed.

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block and table toggling. Use with inline and table elements is currently not supported.

More about Responsive Utilities

Supporting Partners

stackideas
sobipro
k2
akeebabackup
jomsocial
jce editor

 

Our Preferred Joomla Host's

Web Hosting

Get in Touch With us

For account or Joostrap enquiries, please get in touch with us here.

Contact us