Skip to main content
A
aorden
Participant
January 10, 2022
Answered

Document template will not update Related Files

  • January 10, 2022
  • 4 replies
  • 404 views

I just upgraded my CSS to Boostrap 5. Now none of my related files will update in dreamweaver. When I click on update pages nothing happens the update pages box stays on the screen and no files are updated !!

 

None of my carousels will work and I get errors on all pages with menus. HELP !!!

 

  <head>
	  
	  <meta charset="utf-8">
	  <link href="../css/BoostrapCss/Boostrap5CSS/bootstrap.css" rel="stylesheet">  	  
	<link href="../css/MyCustomStyles.css" rel="stylesheet" type="text/css">
	....
</head>
<body>
------
  <script src="../js/jquery-3.4.1.min.js"></script>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

<script src="../css/BoostrapCss/Boostrap5JS/bootstrap.js"></script>
</body>
</html>
This topic has been closed for replies.
Correct answer Nancy OShea

Which version of Bootstrap did you use previously?    As @osgood_ said, Bootstrap 5 is NOT interchangeable with previous versions.  BS5 has added new classes and dropped some old ones.  Your HTML markup will likely need to be re-written to reflect these changes.

 

Below is a working BS 5 starter page.

 

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--latest minified CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!--latest minified JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid mt-3">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>
</body>
</html>

 

 

Related Links:

https://www.w3schools.com/bootstrap5/index.php

https://getbootstrap.com/docs/5.1/getting-started/introduction/

 

4 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 10, 2022

The code you posted above is not valid HTML and it's a jumbled mishmash of old and new code which will never work.

 

Suggest you start over or revert to the previous working site. 

Also validate code and fix reported errors.  

Window > Results > Validation.

 

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
January 10, 2022

Which version of Bootstrap did you use previously?    As @osgood_ said, Bootstrap 5 is NOT interchangeable with previous versions.  BS5 has added new classes and dropped some old ones.  Your HTML markup will likely need to be re-written to reflect these changes.

 

Below is a working BS 5 starter page.

 

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--latest minified CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!--latest minified JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid mt-3">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>
</body>
</html>

 

 

Related Links:

https://www.w3schools.com/bootstrap5/index.php

https://getbootstrap.com/docs/5.1/getting-started/introduction/

 

Nancy O'Shea— Product User & Community Expert
    A
    aordenAuthor
    Participant
    January 11, 2022

    Thanks for all the replies.

    I fixed the issues and here is what I did.

    1. All the editable and non-editable regions in all the files had to be manually re-associated before any template changes could be updated. Once I did this the program sucessfully updates the changes to the files ..however the popup box never says that the task is completed..I had to open the log to check.

    2. Updating the css was not all that difficult and I didn't need to do any other coding except upating the css location amd the javascript location in the template.

     

    I don't know why dreamweaver didn't throw an error message when it could not update because of the editable/noneditable region problem.

    Anyway the site is up and running now

    thanks

     

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 11, 2022

    Glad you got it sorted.

     

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    January 10, 2022

    You can't just upgrade to Bootstrap 5 css and js from Bootstrap 4. Bootstrap 5 was completely re-written and is not compatible for the most part with the Bootstrap 4. 

     

    Bootstrap 5 now uses vanilla javascript for its components whereas version 4 used jQuery.

      Peru Bob
      Community Expert
      Peru BobCommunity Expert
      Community Expert
      January 10, 2022

      I've moved this from the Using the Community forum (which is the forum for issues using the forums) to the XD  Dreamweaver forum.

       

      [Edited by moderator.]

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices