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

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

New Here ,
Mar 25, 2020 Mar 25, 2020

Copy link to clipboard

Copied

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?

Views

1.1K

Translate

Translate

Report

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 ,
Mar 25, 2020 Mar 25, 2020

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

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 ,
Mar 25, 2020 Mar 25, 2020

Copy link to clipboard

Copied

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 BootstrapNew 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

Votes

Translate

Translate

Report

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 ,
Mar 25, 2020 Mar 25, 2020

Copy link to clipboard

Copied

LATEST

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

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