Bootstrap 4 Theme
Getting Started

An overview of Bootstrap, including how to download and use it, some basic templates and examples, and more.

Build tool

APEX Bootstrap 4 uses APEX Front-End Boost for its CSS and JavaScript build system a custom APEX plugin for it's documentation. We suggest you use the same build tool if you do want to modify the source code yourself.

APEX Front-End Boost config.json
{
    "bootstrap4": {
        "appURL": "https://apex.oracle.com/pls/apex/f?p=73792",
        "srcFolder": "../apex-bootstrap4/src",
        "distFolder": "../apex-bootstrap4/dist",
        "cssConcat": {
            "enabled": false
        },
        "sass": {
            "enabled": true,
            "includePath": "../apex-bootstrap4/node_modules/bootstrap/scss"
        },
        "browsersync": {
            "notify": false
        },
        "themeroller":{
            "enabled": true,
            "files": [
                "../apex-bootstrap4/src/scss/_apex_variables.scss",
                "../apex-bootstrap4/src/scss/mixins/_apex_utilities.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/_mixins.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_hover.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_image.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_label.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_reset-filter.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_resize.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_screen-reader.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_size.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_tab-focus.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_reset-text.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_text-emphasis.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_text-hide.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_text-truncate.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_alert.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_buttons.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_cards.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_pagination.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_lists.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_nav-divider.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_forms.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_table-row.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_background-variant.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_border-radius.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/mixins/_gradients.scss",
                "../apex-bootstrap4/node_modules/bootstrap/scss/_buttons.scss",
                "../apex-bootstrap4/src/scss/_apex_buttons.scss"
            ]
        }
    }
}
Build command
npm start -- --project=bootstrap4