How to import Bootstrap library in Kotlin-React-App

Question

Right now I'm learning Kotlin for the front end, I've created Kotlin React App using

npx create-react-kotlin-app my-app

Then I tried to import Bootstrap using import like

@file:JsModule("node_modules/boostrap/bootsrap.js")
external class Boostrap {}

then

in the App.kt, render function

     override fun RBuilder.render() {
        div("container") {
            appHeader()
            p("App-intro") {+
                "This is body"
            }
            p("App-ticker") {
                ticker()
            }
        }
    }

I've added bootstrap using, npm install command, but, bootstrap files are not at all loading in the UI. Could you please help me to load bootstrap?

score 0 · Answer 1 · answered Nov 24 '20 at 04:06

Load the bootstrap script in your html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
          crossorigin="anonymous">
  <title>Sample</title>
</head>
<body>
  <div id="root"></div>
  <script src="sample.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
            crossorigin="anonymous"></script>
</body>

and use the classes in your css style

override fun RBuilder.render() {
    styledDiv {
        css {
            classes = mutableListOf("alert alert-warning text-center")
        }
        +"Sample"
    }
}

How to import Bootstrap library in Kotlin-React-App

1 Answers1