Getting started: adding Bootstrap to a database/ application

Update: the preferred way to include all the required Bootstrap files in every application is to use the Extension Library. The article below is kept for reference.

Bootstrap consists of a number of CSS and JavaScript files and a couple of images. The easiest way to add all of those to an application is by adding them to the WebContent folder:

• Open the Package Explorer and navigate to your application
• Right-click on the WebContent folder and choose Import > General > File System
• Select the location where you've extracted the Bootstrap files to import them

I always create a folder called bootstrap in the WebContent folder first.

If you're using Windows you can also drag-n-drop the files right into the WebContent folder.

The files and folders you imported can now be referenced using a URL that’s relative to the root of the application/ database.

Bootstrap contains a number of components that rely on jQuery, so you should add jQuery to your application too using the same method.

The WebContent folder will eventually look similar to this:

Next, go into the application properties and set the HTML Doctype for your application to HTML5. This is required by Bootstrap.

Finally, add the Bootstrap CSS and JavaScript to all pages, either by adding them as 'resources' to an XPage(s)/ Custom control or by creating a "theme" in your application. A basic Bootstrap theme could look like this:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd" >

	<!-- meta tags -->
	<resources>
        <metaData>
            <name>viewport</name>
            <content>width=device-width, initial-scale=1.0</content>
        </metaData>
    </resources>
	
	<!-- jquery -->
	<resource>
		<content-type>application/x-javascript</content-type>
		<href>jquery/jquery-1.8.2.min.js</href>
	</resource>
	
	<!-- bootstrap js -->
	<resource>
		<content-type>application/x-javascript</content-type>
		<href>bootstrap/js/bootstrap.min.js</href>
	</resource>
	
	<!-- bootstrap css-->
	<resource>
		<content-type>text/css</content-type>
		<href>bootstrap/css/bootstrap.min.css</href>
	</resource>
	<resource>
		<content-type>text/css</content-type>
		<href>bootstrap/css/bootstrap-responsive.min.css</href>
	</resource>
	
</theme>

A list with all the files needed for Bootstrap to work can be found here.