Skip to main content
J
jd2208
Participant
March 25, 2020
Question

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

  • March 25, 2020
  • 3 replies
  • 1178 views

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?

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 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
    anissa_thompson
    Community Expert
    anissa_thompsonCommunity Expert
    Community Expert
    March 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.

    Hope this helps!

    Hope this helps! Make sure to press "✔ Correct Answer" on this post if this answers your question. Happy Creating!Anissa • @anissat
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      March 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
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices