Skip to Content
Author's profile photo Former Member

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

2. Download UI5Strap

Download the latest Ui5Strap library from

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:

Screen Shot 2014-03-29 at 2.57.34 AM.png

4. Specify the location of UI5Strap in your application

We must tell openUI5 where to find the UI5Strap components:"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:"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>

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 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 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>

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.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Krishna Kishor Kammaje
      Krishna Kishor Kammaje

      Nice. Great work Jan.

      I hope we should be able to use it with SAPUI5 as well isn't it?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Krishna,

      i think there should be no problems with using UI5Strap in SAPUI5 as well.

      But since UI5Strap is an open source project, i primarily support and target OpenUI5.

      Kind regards,


      Author's profile photo Former Member
      Former Member

      Hi Jan,

      It sounds great.

      Finally we can use Bootstrap CSS in UI5.

      Had couple of questions,

           How stable is this?

           Can we use it for Production use?