Pup

v2.x

ReactReact Bootstrap

Pup relies on the Bootstrap CSS Framework for its styling. Because Bootstrap is designed as a purely HTML/CSS framework, integrating it into a React-based UI requires manual implementation of its markup.

To avoid this, Pup utilizes the React Bootstrap library. It's a third-party (read: unaffiliated with the Bootstrap team) library which has taken Bootstrap's markup and converted it into React components.

React Bootstrap only provides the markup and JavaScript of Bootstrap, it does not provide the CSS files from the framework. In Pup, these are loaded in the <head></head> block of /client/main.html. This file is used as the main HTML template for the entire app.

As of right now, React Bootstrap and by extension Pup support v3.3.7 of Bootstrap.

What about Bootstrap v4 support?

You may notice that Pup relies on v3 of Bootstrap's CSS while the framework's latest version is v4. This is a limitation of React Bootstrap—not a deliberate choice. The team there is in the process of working on v4 support.

Whether Pup will support this or not is currently up in the air as we're planning to release our own CSS framework, Fur, to get around this tug-of-war.

Using React Bootstrap

In order to get a full understanding of using React Bootstrap, it's recommended that you utilize its documentation.

As a quick start example, the example on the right showcases how to make use of the <Button /> component from React Bootstrap. This component accepts the standard Bootstrap color class names: primary, success, info, warning, danger, and default.

Example Usage
import React from 'react';
import { Button } from 'react-bootstrap';

const getTheMeaningOfLife = () => {
  alert('42');
};

const ExampleComponent = () => (
  <React.Fragment>
    <Button bsStyle="success" onClick={getTheMeaningOfLife}>Get the Meaning of Life</Button>
  </React.Fragment>
);