Bootstrap not loading correctly in Sage

sage
1

Got a bit of an issues with bootstrap, or more specifically with bootstrap.js, css and less seems to work.

I know that the actual HTML is correct, if I hardcode loading bootstrap, by adding
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

to base.php, the page works, and that is the same version that I have in my bower, but without it, nothing happens, the test is a modal by the way.

So what I have done so far is, I added bootstrap to bower, and also added overrides as that was suggested in a few places, so my bower file looks as follows:
"dependencies": { "bootstrap": "v4.0.0-alpha.6", "jquery": "^3.2.1" }, "overrides": { "bootstrap": { "main": [ "./scss/_variables.scss", "./scss/_mixins.scss", "./scss/_custom.scss", "./scss/_normalize.scss", "./scss/_print.scss", "./scss/_reboot.scss", "./scss/_type.scss", "./scss/_images.scss", "./scss/_code.scss", "./scss/_grid.scss", "./scss/_tables.scss", "./scss/_forms.scss", "./scss/_buttons.scss", "./scss/_transitions.scss", "./scss/_dropdown.scss", "./scss/_button-group.scss", "./scss/_input-group.scss", "./scss/_custom-forms.scss", "./scss/_nav.scss", "./scss/_navbar.scss", "./scss/_card.scss", "./scss/_breadcrumb.scss", "./scss/_pagination.scss", "./scss/_badge.scss", "./scss/_jumbotron.scss", "./scss/_alert.scss", "./scss/_progress.scss", "./scss/_media.scss", "./scss/_list-group.scss", "./scss/_responsive-embed.scss", "./scss/_close.scss", "./scss/_modal.scss", "./scss/_tooltip.scss", "./scss/_popover.scss", "./scss/_carousel.scss", "./scss/_utilities.scss", "./js/dist/alert.js", "./js/dist/button.js", "./js/dist/carousel.js", "./js/dist/collapse.js", "./js/dist/dropdown.js", "./js/dist/modal.js", "./js/dist/popover.js", "./js/dist/scrollspy.js", "./js/dist/tab.js", "./js/dist/tooltip.js", "./js/dist/util.js" ] } } }

Thinkg that woks, and think the links works.
Next, I have added it to manifest,json under ./assets in my theme

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "customizer.js": {
      "files": [
        "scripts/customizer.js"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
    "bootstrap.js": {
      "bower": ["bootstrap"]
    }
  },
  "config": {
    "devUrl": "http://dbfs.dev"
  }
}

So as far as I can tell, that is all I should have to do to get bootstrap into main.js. At first I thought that the system would add it to main.js, which does not seem to be the case, it puts it in a file called bootstrap.js under ./dist/scripts/bootstrap, but I can’t figure out how to tell sage to load that one, and it does not look on the webpage source as if this file is ever loaded:

`

`

So what step am I missing

2

Why are you trying to add Bootstrap to Sage this way? Sage already comes with Bootstrap, and all of Bootstrap’s styles and JS are included by default

3

OK, but for some reason modal don’t seem to work.
And I know that Modal is a bit temperamental, but second I add bootstrap as a script src it works, so I am guessing that for one reason or another, that page does not get bootstrap from wordpress.

Any ideas, even just an idea on how to test.

4

In what way does modal not work? What have you tried?

The answer isn’t going to be hauling out Sage’s Bootstrap inclusion and putting it back in a different way.

5

If you’re overriding Bootstrap’s js files w/ bower, the ordering of files is important (start w/ util.js). example.

1 Like