Copy link to clipboard
Copied
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!
1 Correct answer
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
...Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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/
Copy link to clipboard
Copied
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:
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)
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>
- In the <head> section of your HTML document:
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.
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>
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
my client would need to maintain the site once I'm finished.
By Scott Haugaard
==========
Don't use a standalone code editor that's no longer in development. That's a recipe for failure.
Your client needs a CMS (content management system) that any member of their staff can edit from an online dashboard, no coding skills required.
ONLINE SITE BUILDERS:
-- Squarespace - https://www.squarespace.com/
-- Webflow - https://webflow.com
-- WordPress (open source) - https://wordpress.org/
Hope that helps.
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Wappler is a single app for $50 a seat
By Scott Haugaard
or $26 per month.
This is a Dreamweaver - with DMXzone extensions included - replacement. Comparable cost $80 per month.
Blame yourself when Dreamweaver pulls the plug without warning, as per their usual behaviour.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
LOL is an initialism, but seriously @Nancy OShea, I was actually laughing out loud when I saw your response. Thank you for that! I know it's a dying platform, but it's affording me a bit more time with my beloved InDesign, and the amazing Firefly intregration.
My client and I broke bread tonight (chichen and dumplings), and agreed that my original idea of using WordPress is

