Learn Bootstrap integration

Optional files configure Unpoly to work with Bootstrap's CSS classes. With the integration loaded, navigation feedback, form validation and overlays use the classes and layout rules that Bootstrap expects.

Loading the integration

Load the files matching your Bootstrap version after Unpoly's own files. Builds for Bootstrap 3, 4 and 5 are available from a CDN:

The same files ship with Unpoly's npm package:

import 'unpoly/unpoly.js'
import 'unpoly/unpoly.css'
import 'unpoly/unpoly-bootstrap5.js'  // mark-line
import 'unpoly/unpoly-bootstrap5.css' // mark-line

What the integration configures

The JavaScript file adjusts Unpoly's configuration to Bootstrap's conventions:

• Navigation feedback uses Bootstrap's active class to mark current links and running interactions, and .nav and .navbar elements count as navigational containers. See up.status.config.
• Fixed navbars are registered as fixed layout elements, so Unpoly can account for them when scrolling and positioning overlays. See up.viewport.config.
• Bootstrap's grid and spacing utility classes, like .row and .col-*, are ignored when Unpoly derives a target selector from an element. See up.fragment.config.badTargetClasses.
• Overlays that Bootstrap renders itself, like its modals, popovers and dropdown menus, are registered as foreign overlays that Unpoly will not close or adopt. See up.layer.config.foreignOverlaySelectors.
• With Bootstrap 3 and 4, .form-group elements are used as form groups when validating forms. Bootstrap 5 has no form group class, so configure up.form.config.groupSelectors to match your own markup.

The stylesheet lets .container and .container-fluid elements fill Unpoly overlays without Bootstrap's page padding.