Bootstrap4XPages is an OSGi plugin that provides the Twitter Bootstrap framework for developing responsive, mobile-first XPages applications. It includes the Bootstrap CSS, JS, and jQuery libraries. Developers can enable the Bootstrap theme in their XPages applications without changing any code by simply selecting the Bootstrap theme in the Xsp Properties. The plugin is available on OpenNTF and makes it very easy to use the popular Bootstrap framework with XPages.

1. Bootstrap4XPages
Introduction
Per Henrik Lausten
Notesnet.dk, august 2014

2. DanNotes 52nd conference, November 19-
20: submit your abstracts now at
http://speakers.dannotes.dk/
New on OpenNTF: JUnit testing in XPages:
http://www.openntf.org/p/org.openntf.junit
.xsp

3. What is Bootstrap?
"Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile first projects on the web."
http://getbootstrap.com/
https://github.com/twbs/bootstrap
• Originally created by a designer and a developer at Twitter in mid-2010
• Originally released on Friday, August 19, 2011
• Github: > 70K stars (#1) and >26K forks (#3)
• Very popular: > 3.5 million web sites use Bootstrap:
http://trends.builtwith.com/docinfo/Twitter-Bootstrap
• Getting started: http://getbootstrap.com/getting-started/

4. What is Bootstrap4XPages?
"This project provides the Twitter Bootstrap rendering technology to XPages.
The goal is to enable this new rendering through a dedicated theme, without
having to change the application pages. "
http://bootstrap4xpages.openntf.org/
https://github.com/OpenNTF/Bootstrap4XPages
• Very easy way to use Bootstrap with XPages applications
• OSGi plugin for XPages
• Includes Bootstrap CSS, Bootstrap JS and jQuery (latest version includes Bootstrap
3.2 and jQuery 1.11)
• Bootstrap rendering for all XPages components
• Just change your theme!
• Available on OpenNTF.org
• Also part of OpenNTF Essentials

5. Getting started
• Install the plugin on the server using an update
site
• Install the plugin in Domino Designer using the
same update site
• Pick a random XPages app
• Enable the Bootstrap library in Xsp Properties
• Change your theme:
<theme extends="bootstrapv3.2.0" …
<theme extends="bootstrapv3.2.0_3d" …
• Clean, build and enjoy 

6. Demo
• Application Layout
• Navigator
• View
• Dialog
• Select2
• Responsive
• Bootstrap CSS classes