Skip to main content
S
Scott Haugaard
Participant
January 23, 2025
Answered

Trouble with Bootstrap 5

  • January 23, 2025
  • 4 replies
  • 2555 views

I've downloaded the current Bootstrap 5.3.3 CSS and JS files, but have been running into a problem when I try to import any component.  There's pop-up that states: "The componenet is not fully compatible with the current Bootstrap CSS/JS file (lower than v4.4.1). A new Bootstrap CCS/JS file will be created and linked from the document". When I accept it, Dreamweaver self-generates the following files: 

  • bootstrap-4.4.1.css
  • jquery-3.4.1.min.js
  • popper.min.js
  • bootstrap-4.4.1.js

Which is strange, since I believe jquery and popper are no longer part of the framework. I've triple check my installation, with the CSS link in the Head, and the JS ref in the Body. I've tried external links, and local hosting. Even renaming the current CSS file with the old sufix -4.4.1 (sometimes lying to machines works). Any help would be greatly appreciated!

    Correct answer Scott Haugaard

    She's a florist, so a "team" of one. I wanted to use WordPress. She insisted on DW, because she had used it in the past. Again, I'm happy to have my Adobe tools back (AI integration had just started, before I left). Also, Wrappler is a single app for $50 a seat, compared to 20+ apps with Creative Cloud for just ten bucks more. As for XD, it seems that is being deprecated too, in favor of Express (for Pete's sake!?). 

     

    Speaking of which, once I left Adobe I found Affinity. It's a highly professional suit of creative tools for purchase, that costs less than 3 months of a subscription. They tend to have a substantial flash sale about once a year, too. And get this, the keyboard shortcuts are the same across each app! Have no idea why Adobe hasn't instituted this long ago. 

     

    Going back to Bootstrap ('cuz I'm keeping Dreamweaver), using the Admin Template @Saanvi27961339jela pointed me to, I was able to paste my code, and delete the template code, and save using BS5 only. It was only when I added a new element from the BS5 component library did things get sticky. BUT, using that file I was able to create Snippets. When I open a new HTML file, linked only to BS5 CCS and JS, I'm able to paste the Snippets without incident!


    Problem the solved!

    • Go to the Bootstrap Examples page: https://getbootstrap.com/docs/5.3/examples/, 
    • Download the Examples zip file.
    • Open the component index.html file in with Dreamweaver.
    • Clean-up the irrelivant stuff, because you don't want
           10 different drop-down menus in one Snippet.
    • Save html code as a new Snippet.

     

    Custom Snippets are kept here:

    C:\Users[name]\AppData\Roaming\Adobe\Dreamweaver [version]\en_US\Configuration\Snippets\[custom folder]

     

    System Snippet are kept here (but you can add to it):

    C:\Program Files\Adobe\Adobe Dreamweaver 2021\Configuration\Snippets

     

     

    P.S. - My uncle Jamie Quinn was the composer and lyricist for Gary Wright song, Dream Weaver. 

    4 replies

    S
    Saanvi27961339jela
    Participant
    January 24, 2025

    It seems like the issue you're encountering is due to Dreamweaver incorrectly interpreting the version compatibility of your Bootstrap files. Bootstrap 5 has moved away from dependency on jQuery and Popper.js for most of its features, but Dreamweaver might not fully recognize this and is reverting to older configurations (like Bootstrap 4.4.1).

     

    Here's how you can solve it:

    1. Verify Bootstrap Version: Ensure you have downloaded the correct Bootstrap 5.3.3 files from the official Bootstrap website. The following are the correct files for Bootstrap 5:

      • bootstrap.min.css (CSS)
      • bootstrap.bundle.min.js (JS, includes Popper.js built-in)

    2. Correct File References:

      • In the <head> section of your HTML document:
        <link href="bootstrap.min.css" rel="stylesheet">
      • Before the closing <body> tag:
        <script src="bootstrap.bundle.min.js"></script>

    3. Disable Dreamweaver's Auto-Generation: Dreamweaver might be triggering its auto-correction settings when it fails to detect proper configuration. To avoid this:

      • Open Dreamweaver Preferences and look for options related to "Compatibility Checks" or "Bootstrap Framework."
      • Disable auto-generation or compatibility checks.

    4. Test Your Setup: After ensuring your file paths are correct, create a basic HTML file to test if Bootstrap components, like buttons or modals, work as expected:

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Test</title>
    <link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
            Launch Modal
        </button>
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        This is a Bootstrap 5 modal.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="bootstrap.bundle.min.js"></script>
</body>
</html>

    5.  Check for Conflicts: If Dreamweaver still forces the addition of older files, consider editing your project manually outside of Dreamweaver to avoid unnecessary interference.

     

    If you want to explore advanced Bootstrap-based designs without starting from scratch, you can consider pre-built Bootstrap admin template. 

     

    Hope you find this helpul.

      S
      Scott HaugaardAuthor
      Participant
      January 24, 2025

      Thank you, @Saanvi27961339jela. That was very informative. Didn't solve the issue, but still helpful. 

       

      Your Test Setup works. The issue still remains importing any new component (even one that's type already resides on the document). I am able to copy an entire page into a BS5 "blank" html document, and save, then reopen, without issue. There was some slight formating changes, say in the Nav menu, but was able to edit those previously placed elements. The problem is still importing another component. I can't seem to find a Preference that would end Compatablily Check, or Auto-Update. 

       

      @BenPleysier @L e n a @Nancy OShea 

      Unfortunately, Dreamweaver is the only reason I allowed back into the Adobe ecosystem, as my client is familiar with the application, and would need to maintain the site once I'm finished. Adobe's been a part of nearly my entire life (since they aquired Aldus PageMaker), until recently, as I no longer work in graphics. 

       

      I'm very familiar with VS Code, and have used it extensively for JavaScript and XML coding for Esko workflows. Unfortunately, it doesn't have a good WYSIWYG extension. Looks like I'm struck with an old Bootstrap framework. 

       

      UX looks like an interesting option, of maybe go back to InDesign. I just can't believe Adobe (the premier design software company on the plant) doesn't have a profession web design solution! Especially after thier heavy investment in Analytics. Express is an absolute joke. 

      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      January 24, 2025
      quote

      my client is familiar with the application, and would need to maintain the site once I'm finished.


      By @Scott Haugaard

       

      What happens when (not if) Dreamweaver kicks the bucket?

       

      For a more modern IDE with a WYSIWYG much more superior to the current Dreamweaver, you cannot go past Wappler. Have a look at one of the many videos that I have made, using Wappler.

      https://youtu.be/VYcNYWiOf5g?si=Ppgnr1JaM9bfkSp5

       

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      January 23, 2025

      The legacy Bootstrap code that DW inserts is NOT compatible with version 5+.

      BS 5 isn't interchangeable with earlier versions BS 3 or 4. 

       

      If you're going to use the latest (and you should), you will have to code manually in BS 5.

      Or use another code editor alongside Dreamweaver that's in active development.


      CODE EDITORS:
      -- Codespaces (free, browser-based) - https://github.com/features/codespaces
      -- Notepad++ (free) - https://notepad-plus-plus.org/
      -- Nova (Mac only, formerly called Coda) - https://nova.app/
      -- Sublime Text - http://www.sublimetext.com/
      -- Visual Studio Code (free) - https://code.visualstudio.com/

       

      Nancy O'Shea— Product User & Community Expert
      L
      Community Expert
      L e n aCommunity Expert
      Community Expert
      January 23, 2025

      As @BenPleysier mentioned, DW hasn't been updated for a few years... which means that BS 5 isn't integrated into the UI at all.

      Bear in mind that DW stopped with BS 4, anyway you're still free to point your links and scripts to BS 5, but the components palette integrated into DW will remain adapted to BS 4, and won't be usable with BS 5.

      So, if you continue to use DW, and wish to use BS5, you'll have to code your components by hand, or through specific snippets that you'll build to suit your needs.

        BenPleysier
        Community Expert
        BenPleysierCommunity Expert
        Community Expert
        January 23, 2025

        That is the trouble when using Dreamweaver, it is a very outdated product.

         

        My advice, choose a more modern IDE like

        Visual Studio Code: A versatile and widely-used code editor with great support for web development, including Bootstrap.

        Wappler: A full-stack web development tool that offers a visual editor, code editor, and a variety of features to help you build responsive websites and applications.

         

        Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices