# UIBuilder default inclusion issue

**URL:** <https://discourse.nodered.org/t/uibuilder-default-inclusion-issue/32271>\
**Category:** General\
**Created:** [31 August 2020 22:11 UTC](https://discourse.nodered.org/t/uibuilder-default-inclusion-issue/32271 "2020-08-31T22:11:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tmichaeltx](https://avatars.discourse-cdn.com/v4/letter/t/73ab20/32.png) [@tmichaeltx](https://discourse.nodered.org/u/tmichaeltx)\
**Post date:** [31 August 2020 22:11 UTC](https://discourse.nodered.org/t/uibuilder-default-inclusion-issue/32271/1 "2020-08-31T22:11:05Z")

</div>

I am in the midst of the Bootstrap tutorial on [W3Schools.com](http://W3Schools.com) and found this example for a split button with a dropdown.

```auto
<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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/5/e544686bbbc75d0290cc4cfd3ce3c789376fbbb2.png)

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:

```auto
<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?

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [1 September 2020 06:12 UTC](https://discourse.nodered.org/t/uibuilder-default-inclusion-issue/32271/2 "2020-09-01T06:12:57Z")

</div>

Note that you need the styles as well in the `head`

```auto
    <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" />

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [1 September 2020 08:08 UTC](https://discourse.nodered.org/t/uibuilder-default-inclusion-issue/32271/3 "2020-09-01T08:08:34Z")

</div>

> [@tmichaeltx](#):
>
> Does anyone have any insight into why this doesn't work using the default?

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

```auto
<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](https://bootstrap-vue.org/docs/components/button)

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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [1 September 2020 08:10 UTC](https://discourse.nodered.org/t/uibuilder-default-inclusion-issue/32271/4 "2020-09-01T08:10:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [31 October 2020 08:10 UTC](https://discourse.nodered.org/t/uibuilder-default-inclusion-issue/32271/5 "2020-10-31T08:10:44Z")

</div>

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