Create a bootstrap based responsive website or app with OpenUI5 and UI5Strap

In this post i want to show how to use Bootstrap 3.1.1 in OpenUI5 / SAPUI5 applications and websites – while still using control-based views.

Therefore i use a custom OpenUI5 library called UI5Strap.

Get Started with UI5Strap

1. Get the latest OpenUI5 version

Download the latest OpenUI5 runtime library from http://sap.github.io/openui5/

2. Download UI5Strap

Download the latest Ui5Strap library from http://ui5strap.com/download.html

3. Create application structure

Create your desired application structure. Put both the OpenUI5 library and the UI5Strap library somewhere into your project directory.

Please note: UI5Strap already contains an example application that you can use as starting point for your responsive website or app:

4. Specify the location of UI5Strap in your application

We must tell openUI5 where to find the UI5Strap components:

jQuery.sap.registerModulePath("ui5strap", "./lib/ui5strap");

Please change the path to the UI5Strap library according to your setup.

5. Include the Bootstrap stylesheets

Either you include the stylesheets of Bootstrap directly into your index.html file, or you dynamically load it from somewhere within your application:

jQuery.sap.includeStyleSheet(jQuery.sap.getModulePath("ui5strap") + "/bootstrap-3.1.1-dist/css/bootstrap.min.css", 'bootstrap-css', function success(){}, function error(){});

6. Use the UI5Strap controls in your application

You can use the UI5Strap controls in the same way as other OpenUI5 controls.

For example you can create a jumbotron with a nested heading (<h1>) and paragraph (<p>) controls:

<!-- Jumbotron -->
<div data-sap-ui-type="ui5strap.Jumbotron">
    <div data-sap-ui-type="ui5strap.Heading" data-level="1" data-text="{i18n>HOME_HEADING}"></div>
    <div data-sap-ui-type="ui5strap.Paragraph" data-text="{i18n>HOME_LEAD}"></div>
    <div data-sap-ui-type="ui5strap.Paragraph">
        <div data-sap-ui-type="ui5strap.Button" data-tap="gotoGetStarted" data-size="Large" data-text="{i18n>HOME_BTN_GET_STARTED}" data-severity="Primary"></div>
    </div>
</div>

To use the bootstrap grid functionality for layout you can create a row with columns:

<div data-sap-ui-type="ui5strap.Row">
   <div data-sap-ui-type="ui5strap.Col" data-columns-small="4">
       <div data-sap-ui-type="ui5strap.Heading" data-level="2" data-text="{i18n>HOME_FEAT1_HEADING}"></div>
       <div data-sap-ui-type="ui5strap.Paragraph" data-text="{i18n>HOME_FEAT1_TEXT}"></div>
       <div data-sap-ui-type="ui5strap.Paragraph">
           <div data-sap-ui-type="ui5strap.Button" data-tap="gotoAbout" data-text="{i18n>HOME_FEAT1_BUTTON}"></div>
       </div>
  </div>
  <div data-sap-ui-type="ui5strap.Col" data-columns-small="4">
      <div data-sap-ui-type="ui5strap.Heading" data-level="2" data-text="{i18n>HOME_FEAT2_HEADING}"></div>
      <div data-sap-ui-type="ui5strap.Paragraph" data-text="{i18n>HOME_FEAT2_TEXT}"></div>
      <div data-sap-ui-type="ui5strap.Paragraph">
          <div data-sap-ui-type="ui5strap.Button" data-tap="gotoAbout" data-text="{i18n>HOME_FEAT2_BUTTON}"></div>
      </div>
   </div>
   <div data-sap-ui-type="ui5strap.Col" data-columns-small="4">
       <div data-sap-ui-type="ui5strap.Heading" data-level="2" data-text="{i18n>HOME_FEAT3_HEADING}"></div>
           <div data-sap-ui-type="ui5strap.Paragraph" data-text="{i18n>HOME_FEAT3_TEXT}"></div>
          <div data-sap-ui-type="ui5strap.Paragraph">
              <div data-sap-ui-type="ui5strap.Button" data-tap="gotoAbout" data-text="{i18n>HOME_FEAT3_BUTTON}"></div>
          </div>
       </div>
  </div>

The above snippet creates a 3 column grid with embedded headings, paragraphs and buttons in each column.

Please also visit the Ui5Strap homepage for a more detailed documentation.