Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Trouble with Bootstrap 5

Community Beginner ,
Jan 22, 2025 Jan 22, 2025

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!

975
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Beginner , Jan 24, 2025 Jan 24, 2025

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

...
Translate
Community Expert ,
Jan 22, 2025 Jan 22, 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!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 22, 2025 Jan 22, 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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 23, 2025 Jan 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 & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 23, 2025 Jan 23, 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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 24, 2025 Jan 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. 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 24, 2025 Jan 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!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 24, 2025 Jan 24, 2025
quote

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 24, 2025 Jan 24, 2025

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!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 24, 2025 Jan 24, 2025

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. 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 24, 2025 Jan 24, 2025
quote

Wappler is a single app for $50 a seat


By Scott Haugaard

 

BenPleysier_0-1737774845127.pngexpand image

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.

 

 

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 25, 2025 Jan 25, 2025

 

giphy.gifexpand image

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 26, 2025 Jan 26, 2025
LATEST

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

probably the best soluton.  I'm going to miss Adobe, and have to use a bunch of AI credits in a hurry! 
 
Appolgies to @BenPleysier, I just need more control. and the ability to migrage. 
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines