Introduction

This module aims at simplifying the creation of bootstrap based OutSystems applications while allowing to keep the best of both worlds.

The ultimate goal is to speed up the creation of new bootstrap based applications as well as to ease the pain of converting an existing bootstrap theme to use in an application.

In this documentation page you will find the list of pre-built bootstrap widgets that we provide with this theme in the form of web blocks. 

Building Blocks

This module exposes a set of themes and a series of web blocks that implement some of the widgets provided by bootstrap.

The blocks are divided in different Screen Flows to allow an easier and more compreensible way of referencing the elements.

The use of the Web Blocks is optional and for the people that want to use the widgets differently, or even create new widgets, you may use containers combined with the appropriate bootstrap css classes to get the same effect.

Themes

Because OutSystems and bootstrap use different approaches to the responsive grid and page structure we've created 4 different themes that you may reference from

• Bootstrap: Base theme that has the bootstrap v3.2.0. This theme has no grid activated by default.
• BootstrapTheme: This theme inherits from the Bootstrap base theme and implements the basic theme provided with bootstrap v3.2.0. 
• BootstrapOSGrid: Base theme that has the bootstrap v3.2.0 but has the OS grid activated. This theme was stripped out of all column/row classes used for structure.
• BootstrapThemeOSGrid: This theme inherits from the BootstrapOSGrid base theme and implements the basic theme provided with bootstrap v3.2.0 while using the OutSystems grid for structuring the elements. 

Grid System

For those who wish to use the bootstrap grid, we've provided a set of web blocks to help out with the structuring of the pages.

• container:This web block allows the creation of a container with the bootstrap static grid.
• container_fluid:This web block allows the creation of a container with the bootstrap fluid grid which means that the columns inside will have a dynamic size based on the available space.
• row:This web block is used to create a row inside a container on which a set of columns will be created. We've also created an inner_row to allow the creation of 2nd level rows where necessary.
• column_X_small:These web blocks provide a way of structuring the containers in columns to have a responsive behavior on your application.

Column Options

Bootstrap uses an advanced column structure that allows nesting columns, use differente offsets and control the behavior of each column depending on the device.
In order to replicate this behavior we've create a set of static entities and included the identifiers as optional parameters in these web blocks.

You may check a working example of this options here 

Widgets

HTML Elements

Bootstrap relies on html elements in order to create the different widgets. In order to allow the usage of those elements we've created a set of web blocks that in runtime will render the necessary tags. These web blocks may be found in the HTMLElements. 

Alerts

To create bootstrap type alerts we've created a set of web blocks inside the Alerts flow that allow you to create the 4 types of alerts.
We've also created a generic one that uses the MessageType static entity from RichWidgets to create the desired effect.

Examples

This is a sample success alert.

This is a sample danger alert.

Panels

To create bootstrap panels a set of web blocks inside the Panels flow was created which allow you to create 5 types of alerts.
We've also created a generic one that receives the class dynamically.

Examples

Panel Success Title

This is a sample success panel.

Panel Danger Title

This is a sample danger panel.

Progress Bars

Like on the previous elements we've create a set of blocks that simplify the creation of progress bar. Each block receives the current value, minimum and maximum value and display a progress bar according to the respective style.
in order to allow the creation of several progress bars in the same line we've created the progress_bar_xxx_inline blocks

Examples

20% Complete

20% Complete