Skip to content

Instantly share code, notes, and snippets.

@mohamadaliakbari

mohamadaliakbari/upgrade-bootstrap-to-latest-version-in-laravel-8.md

Last active February 3, 2021 11:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mohamadaliakbari/b3472ecfba09a81510acce599591bb40 to your computer and use it in GitHub Desktop.
Save mohamadaliakbari/b3472ecfba09a81510acce599591bb40 to your computer and use it in GitHub Desktop.
Download ZIP
Upgrade bootstrap to latest version in Laravel 8
Raw
upgrade-bootstrap-to-latest-version-in-laravel-8.md

Upgrade Bootstrap

npm uninstall --save-dev bootstrap
npm install --save-dev bootstrap@next

Upgrade Popper

npm uninstall --save-dev popper.js
npm install @popper.js/core --save-dev

Drop jQuery

npm uninstall jquery --save-dev

update laravel's bootstrap.js

try {
    window.bootstrap = require('bootstrap');
} catch (e) {}

usage

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
        Tooltip on top
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
        Tooltip on right
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
        Tooltip on bottom
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
        Tooltip on left
    </button>

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
})
<script>

Development

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment