UIBuilder default inclusion issue

I am in the midst of the Bootstrap tutorial on W3Schools.com and found this example for a split button with a dropdown.

<div class="container">
        <h2>Split Buttons</h2>
        <div class="btn-group">
          <button type="button" class="btn btn-primary">Sony</button>
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            <ul class="dropdown-menu" role="menu">
            <li><a href="#">Tablet</a></li>
            <li><a href="#">Smartphone</a></li>

It looks like this when activated:

The issue is that when I use the inclusion that came with the default uibuilder example which follows, it doesn't work.
<script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js"></script>

I was however able to get it to work by replacing that with this which I pulled from w3schools example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Does anyone have any insight into why this doesn't work using the default? Should I just plan to use the cdn sourced inclusion going forward?

Note that you need the styles as well in the head

    <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />

.. also the syntax of bootstrap-vue is a little different from plain bootstrap.

  <b-button variant="danger">Button</b-button>
  <b-button variant="success">Button</b-button>
  <b-button variant="outline-primary">Button</b-button>

Bootstrap-Vue web site

if you are not planning to use Vue then you include the plain bootstrap cdns as you did and do the checks as backman2 suggested.

Just to say that using jQuery and Vue (assuming that you've kept that in your front-end code) is an anti-pattern that personally I would try to avoid. There is nothing that jQuery provides that Vue cannot already do for you.

Also note that, if you are using Vue and bootstrap-vue, the CSS and scripts you need are already included in the default template that I supply. You don't need to do anything else.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.