+ Start a Discussion

How to add the external css in lwc ?

Hi all,

how to add the External (bootstrap css) in lwc
i have this but its not working
folder structure is  bootstrap/bootstrap.min.css

import { LightningElement } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import bootstrap from '@salesforce/resourceUrl/bootstrap';

export default class BootstrapComp extends LightningElement {
    renderedCallback() {
            loadStyle(this, bootstrap + '/bootstrap.min.css'),
            .then(() => {
                alert('Files loaded.');
            .catch(error => {
mukesh guptamukesh gupta
Hi ,

Your code is correct, Can you plase if any error raise in console

  • Create a Lightning web component that contains only a CSS file. ...
  • Create a component that contains a CSS file and a configuration file. ...
  • Define the style rules in the CSS file. ...
  • In the CSS file of a Lightning web component, import the CSS module.
The beauty of Lightning Component Framework is the uniform UI which is consistent in Lightning Design System. So, the styles of Custom Lightning Component and Standard Lightning Component are in uniform. All elements using lightning namespace use Lightning Design System.

krogereschedule (https://www.krogereschedule.org/)