CODEWITHSUNDEEP
javascripttwitter-bootstrapelectron
Luke101
Luke101

Reputation: 65298

How to include bootstrap 4 in an electron app

I am able to figure out how to include bootstrap css but could not figure out how to include bootstrap js. I am trying to create some bootstrap tabs. Here is some sample code I wrote.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Coin Trader</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">

  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" href="#profile" role="tab" data-toggle="tab">profile</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#buzz" role="tab" data-toggle="tab">buzz</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#references" role="tab" data-toggle="tab">references</a>
            </li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="profile">...</div>
            <div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
            <div role="tabpanel" class="tab-pane fade" id="references">ccc</div>
          </div>
      </div>
    </div>
  </div>
    <script>
      // You can also require other files to run in this process
      require('./renderer.js');
      window.$ = window.jquery = require("jquery");
      require("popper")
      require("bootstrap");
    </script>
  </body>
</html>

When I click on a tab it does not toggle. I think the issue is the bootstrap js is not being included right. I copied the tab code straight from bootstrap website.

Upvotes: 2

Views: 4960

Answers (1)

Luke101
Luke101

Reputation: 65298

I have figured out the solution. I included the wrong popper library. Instead of including popper include popper.js. Here is how I did it

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Coin Trader</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">

  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" href="#profile" role="tab" data-toggle="tab">profile</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#buzz" role="tab" data-toggle="tab">buzz</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#references" role="tab" data-toggle="tab">references</a>
            </li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="profile">...</div>
            <div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
            <div role="tabpanel" class="tab-pane fade" id="references">ccc</div>
          </div>
      </div>
    </div>
  </div>
    <script>
      // You can also require other files to run in this process
      require('./renderer.js');
      window.$ = window.jquery = require("jquery");
      window.popper = require("popper.js");
      require("bootstrap");
    </script>
  </body>
</html>

Upvotes: 5

Related Questions