How to import Bootstrap library in Kotlin-React-App

694 Views Asked by Chaitanya At 07 April 2020 at 17:34

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?

Original Q&A

There are 1 best solutions below

DreamUth On 24 November 2020 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/[email protected]/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/[email protected]/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

There are 1 best solutions below

Related Questions in NODE.JS

Related Questions in REACTJS

Related Questions in KOTLIN

Related Questions in BOOTSTRAP-4

Related Questions in CREATE-REACT-KOTLIN-APP

Trending Questions

Popular # Hahtags

Popular Questions