Bootstrap 2.3.2 UI Framework | Communifire Documentation

Communifire utilizes the Bootstrap framework, which is a sleek, intuitive, and powerful front-end framework for faster and easier web development.

Learn more about Bootstrap.

We understand that user interface frameworks can be a bit daunting if you are not familiar with basic HTML, CSS, and JavaScript. If you are going to be customizing the Communifire interface extensively, we recommend that you become familiar with the Bootstrap framework -- it is very well documented. However, our support team is always available to help if you find yourself not understanding some aspects of the framework. Taking 10 to 15 minutes to browse their documentation can help you immensely. 

In a nutshell, everything that you can do with the Bootstrap framework, you can also do in Communifire. The entire Bootstrap framework, including the scaffolding, the base CSS, components, and all of the JavaScript modules are included into the CF core. 

Since the Bootstrap framework is extensively documented their website, we're not going to go into everything in fine detail here. Though, we will give you a quick overview of some of the most important features.

Default Grid System

The default Bootstrap grid system utilizes 12 columns. You can use this grid system within Communifire to create rows and columns for content layouts. This grid system can be used in Communifire custom pages, blog posts, articles, events, wiki pages, and so forth. It is important to note that this grid system is utilizing the Bootstrap "fluid grid" responsiveness, therefore it will adapt to the screen size or view port based on the type of device you're accessing CF. 

The basic fluid grid HTML shown below:

<div class="row-fluid">
    <div class="span4">Your column 1 content goes here.</div>
    <div class="span8">Your column 2 content goes here.</div>
</div>

Note that the row-fluid is a row that contains a number of div's with the correct CSS span properties. You can add as many rows as you like, as long as they sum to 12 or less.

Here's another example with 3 equal columns:

<div class="row-fluid">
     <div class="span4">Column 1 content</div>
     <div class="span4">Column 2 content</div>
     <div class="span4">Column 3 content</div>
</div>

Responsive Design

By default, the Bootstrap responsive features are turned on in Communifire. Bootstrap supports a handful of media queries to help make your projects more appropriate different devices and screen resolutions.

Supported devices

You can target different devices and screen resolutions in your CSS by using the following:

    /* Large desktop */
    @media (min-width: 1200px) { ... }
     
    /* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 979px) { ... }
     
    /* Landscape phone to portrait tablet */
    @media (max-width: 767px) { ... }
     
    /* Landscape phones and down */
    @media (max-width: 480px) { ... }

For further information on the responsiveness of the Bootstrap framework please see Bootstrap's documentation.