Can I set up Bootstrap to use BootstrapCDN by default on Dreamweaver?

Report · Mar 25, 2020

It's just a matter of personal preference, but it would seem that Dreamweaver wants me to download the dependencies onto my site. I would just prefer to link to BootstrapCDN instead as I am mainly using these sites for learning purposes.

Is there a neat solution which allows me to start a document with

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

in the header, and

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

in the body?

Report · Mar 25, 2020

Open your Snippets Panel.

https://helpx.adobe.com/dreamweaver/using/reuse-code-with-snippets.html

I have created re-usable code snippets for CDN hosted Bootstrap and jQuery scripts. I saved them to my custom Snippets folder. For quicker insertion into new documents, use Snippet trigger keys.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 25, 2020

If you want all of your Bootstrap-based HTML documents to use the code above, [assuming you have administrative rights on your machine,] you can edit the Bootstrap.html file to prefill the links with the code you listed above.

I'm on a Windows 10 machine, so the file is located in the following location:

C:\Program Files\Adobe\Adobe Dreamweaver 2020\configuration\BuiltIn\BootstrapNewDocs

Locate Bootstrap.html in the folder. (*Be safe! Be Sure to BACK UP your original file by duplicating it and saving with a new name, such as Bootstrap-original.html) Open it and paste over the code with your setup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <!-- Bootstrap -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<!-- Insert BS3 comment -->
  </head>
  <body>
  	<!-- body code goes here -->


	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Save the file, then close Dreamweaver and restart it. When you go to the New Document dialog and choose HTML > Bootstrap (Create New CSS - will be prefilled; do not include pre-built layout), you'll be able to open a blank document with all of your presets ready to go. I use this for other setups and it works well.

New Dialogue Bootstrap

Hope this helps!

Hope this helps!
Make sure to press "✔ Correct Answer" on this post if this answers your question. Happy Creating!
Anissa • @anissat

Report · Mar 25, 2020

There may come a time in the not too distant future when you

a) need upgraded versions of Bootstrap, jQuery, etc...

b) no longer need Bootstrap, jQuery, etc...

c) need to switch to scripts that are hosted on your own CDN/servers.

For those reasons, I think I prefer the flexibility of Snippets.

But use whatever works best for you.

Nancy O'Shea— Product User, Community Expert & Moderator