Importing Bootstrap into Now Experience

[Bala Krishna2]

UI component development through package.json is same as react JS.I found two ways to utilize bootstrap through trial and error below are ways to import bootstrap in now experience component.

Step 1:Import bootstrap into now experience project

1. Go to the package.json and add this as part of the  dependencies  object "bootstrap": "^4.5.2",
2. Then run npm i  from command prompt or terminal

Second way :

    Run npm i bootstrap --save

Step 2: Utilize bootstrap in component

1. Open component scss file in your component.
2. Add below line to utilize bootstrap in your component
   
   @import '~bootstrap/scss/bootstrap';
3. To use classes in JSX we should use className instead of usual class(Key word)

Sample JS

import {createCustomElement} from '@servicenow/ui-core';

import snabbdom from '@servicenow/ui-renderer-snabbdom';

import styles from './aelum-demo.scss';

import '@servicenow/now-button';

const view = (state, {updateState}) => {

    return (

        <div className="container">

            <div className="row">

                <div className="col-md-6">Block 1</div>

                <div className="col-md-6">Block 2</div>

            </div>

        <div className="form-detail">This is demo

            <now-button label="Submit Form" variant="primary" size="md" icon="" configAria={{}} tooltipContent=""></now-button>

        </div>

        </div>

    );

};

createCustomElement('aelum-demo', {

    renderer: {type: snabbdom},

    view,

    styles

});

[rohitcet33]

Hello @Bala Krishna2 ,

Thanks for this article. I am in Washington release and when I flow your steps its working in local system but when I try to deploy in ServiceNow I get an error like module can't be found. Do you similar issue?