I presented this to the Notesnet.dk members

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