Create Application

In order to create a bootstrap based application these are the steps you must take:

1. Create an OutSystems Web Application
2. Add references to Bootstrap eSpace module public theme. (In this example we'll use the OSGrid based one.
   
3. Change your application theme to be based on the Bootsrap theme. Change the Header / Footer as well to use the provided ones.
   

Configure Menu

We tried to keep intact the scaffolding capabilities of the OutSystems platform while allowing the usage of the bootstrap menu and navigation system.

In order to fit the scaffolding requirements the Menu web block generated when a new application is created should be adjusted:

1. Remove the container Application_Menu from the web block
2. Add a specific class to the Menu_TopMenus container using the extended property class (Menu_TopMenus nav navbar-nav OSInlineClear)
   
3. Add a few classes to handle the differences between menus.
   /*.bs-docs-nav .navbar-nav>li>a */
   .Menu_TopMenu a,
   .Menu_TopMenu a:link,
   .Menu_TopMenu a:visited {
       font-weight: 500;
       color: #FFF;
   }
   
   /*.nav > li > a */
   /*.navbar-nav > li > a*/
   .Menu_TopMenu a,
   .Menu_TopMenu a:link,
   .Menu_TopMenu a:visited {
       padding: 15px;
       line-height: 20px;
       display: block;
       text-decoration: none;
   }
   
   /*.bs-docs-nav .navbar-nav>li>a:hover, .bs-docs-nav .navbar-nav>.active>a, .bs-docs-nav .navbar-nav>.active>a:hover*/
   .Menu_TopMenu a:hover,
   .Menu_TopMenuActive a,
   .Menu_TopMenuActive a:link {
       color: #FFF;
       background-color: #1967BE;
   }
   
   @media (max-width: 767px) {
       .Menu_TopMenus.OSInline {
           display: block;
       }
       .Menu_TopMenus .Menu_DropDownButton {
           width: 100%;
       }
   }

Configure Header

An header and footer are provided with the theme.However you may have the need to create a different header and as such the required adjustment is to change the container Application_Title inside the Header web block