UIBuilder default inclusion issue

General
1

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>
          </button>
            <ul class="dropdown-menu" role="menu">
            <li><a href="#">Tablet</a></li>
            <li><a href="#">Smartphone</a></li>
          </ul>
        </div>
    </div>

It looks like this when activated:
image

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?

2

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" />
3

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

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

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.

4

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.

5

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