How to use popper in octobercms

Question

I'm new here and kind of a beginner, so I hope my questions are not too stupid! I'm currently developing a website using October CMS, and the theme I'm using doesn't have popper.js integrated.

I'd like to give my navbar (using Bootstrap) some nice dropdown menus, but I can't make it work. After looking around the web, it seems I need popper.js to make it work.

My question is this one:

Do you guys know a way to integrate popper.js to October?

Do I need to create a partial?

So far I've tried to copy/paste the link to the library at the bottom of the <body> but it doesn't seem to work.

Thanks in advance! Cheers

m3ssy

Edit:

Sorry guys, I've been away for the week-end..but thanks so much for your answers. I've tried them all but nothing works!

Here is the navbar:

<nav id="nav" class="navbar navbar-nav">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a href="{{ 'home'|page }}">Home</a></li>
        <li class="nav-item dropdown"><a href="{{ 'dirigent'|page }}"     id="navbarDropdown" class="{% if this.page.id == 'dirigent' %}active{% endif %}" class="nav-link dropdown-toggle" role="button">Dirigent</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Something</a>
          </div>
    </li>
    <li class="nav-item dropdown"><a href="{{ 'chor'|page }}" class="{% if this.page.id == 'chor' %}active{% endif %}" class="nav-link dropdown-toggle" role="button">Chor</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Something</a>
      </div>
    </li>
    <li class="nav-item dropdown"><a href="{{ 'media'|page }}" class="{% if this.page.id == 'media' %}active{% endif %}" class="nav-link dropdown-toggle" role="button">Media</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Something</a>
      </div>
    </li>
    <li class="nav-item"><a href="{{ 'termine'|page }}" class="{% if this.page.id == 'termine' %}active{% endif %}">Termine</a></li>
</ul>

And here is the code for the links script in october:

<script src="{{ ['assets/js/jquery.min.js','assets/js/jquery.scrollex.min.js', 'assets/js/jquery.scrolly.min.js', 'assets/js/skel.min.js', 'assets/js/util.js', 'assets/js/main.js', 'assets/js/popper.min.js', 'assets/js/bootstrap.bundle.min.js'] |theme}}"></script>

I have to also precise that I'm developping on my localhost!

Thanks guys! Cheers

Answer 1

This is the "include list" for BS4:

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

Also, per BS4 Documentation:

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap's JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js . Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.

So you can alternatively use:

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

Refer to the BS4 Starter Template for an example of how these files should be incorporated.

How to use popper in octobercms

Question

1 answers

solution1
0 2018-07-12 17:44:42

How to use popper in octobercms

Question

1 answers

solution1 0 2018-07-12 17:44:42

solution1
0 2018-07-12 17:44:42