Skip to main content
T
tim cross
Inspiring
November 15, 2018
Question

how can I use the latest version of bootstrap on dreamweaver?

  • November 15, 2018
  • 5 replies
  • 7838 views

I am new to using Dreamweaver. I have started to use bootstrap and on there site I have noticed the latest version of the software is bootstrap-4.1.3.

Is there away to add this to dreamweaver cc and if so how do I do this?

The reason I want the latest version is bootstrap-4.1.3 has got some new templates which I would like to be able to use when creating my site

Many thanks

Tim

    This topic has been closed for replies.

    5 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 15, 2018

    If you use CDN's you don't need to download anything.

    Copy & paste this code into a new, blank document.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 4.1.3 Starter Page</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <style>

    body {height: 100vh;} 

    .flex-grow {flex: 1 0 auto;} 

    </style>

    </head>

    <body class="d-flex flex-column">

    <!--Centered navbar-->

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

    <div class="collapse navbar-collapse w-100 order-1 order-lg-0" id="navbarNav">

    <ul class="navbar-nav">

    <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li>

    <li class="nav-item"> <a class="nav-link" href="#">Menu 2</a> </li>

    <li class="nav-item"> <a class="nav-link" href="#">Menu 3</a> </li>

    <li class="nav-item"> <a class="nav-link" href="#">Menu 4</a> </li>

    </ul>

    </div>

    <div class="d-flex w-100 order-0">

    <div class="w-100">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button>

    </div>

    <a class="navbar-brand text-center w-100" href="#">Brand / Logo </a> <span class="w-100"></span> </div>

    <span class="w-100"></span> </nav>

    <!--main content-->

    <main class="container flex-grow"> 

    <div class="row text-center">

    <div class="col-sm-6 col-md-4 col-lg-3"> <img class="img-thumbnail" src="https://dummyimage.com/400x350" alt="logo">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

    </div>

    <div class="col-sm-6 col-md-4 col-lg-3"> <img class="img-thumbnail" src="https://dummyimage.com/400x350" alt="logo">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

    </div>

    <div class="col-sm-6 col-md-4 col-lg-3"> <img class="img-thumbnail" src="https://dummyimage.com/400x350" alt="logo">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

    </div>

    <div class="col-sm-6 col-md-4 col-lg-3"> <img class="img-thumbnail" src="https://dummyimage.com/400x350" alt="logo">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

    </div>

    <div class="col-sm-6 col-md-4 col-lg-3"> <img class="img-thumbnail" src="https://dummyimage.com/400x350" alt="logo">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

    </div>

    <div class="col-sm-6 col-md-4 col-lg-3"> <img class="img-thumbnail" src="https://dummyimage.com/400x350" alt="logo">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

    </div>

    <div class="col-sm-6 col-md-4 col-lg-3"> <img class="img-thumbnail" src="https://dummyimage.com/400x350" alt="logo">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

    </div>

    <div class="col-sm-6 col-md-4 col-lg-3"> <img class="img-thumbnail" src="https://dummyimage.com/400x350" alt="logo">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

    </div>

    </div>

    </main>

    <footer class="bg-dark text-warning text-center"> 

    <p class="p-2">On short pages, footer hugs bottom of screen.</p> 

    </footer> 

    <!--jQuery, Popper, then Bootstrap JS-->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    ALsp
    ALsp
    Legend
    November 15, 2018

    Now, that's very automated and easy :-)

    pziecina
    pziecina
    Legend
    November 15, 2018

    ALsp  wrote

    Now, that's very automated and easy :-)

    If it is automation and easy someone wants, then Dw should include flexbox, (or even grid and flexbox) starter templates. At least then users can decide for themselves, (and read all the code easily) which they wish to use, small and lightweight vs heavyweight with 99% of code not required.

    The possibilities of both frameworks and self coded pages, has moved on to the point of disagreements being common place as to which is best, but a program the cost of Dw should at least give the user a choice.

    (make it a condition of Dw trainers/instructors acp membership and Dw cab/pre-release members that they submit a starter page for Dw users)

    ALsp
    ALsp
    Legend
    November 15, 2018

    In observing your posts, it seems it might be worth your while to consider other means to laying out a web page than Bootstrap. Sometimes it feels as if I'm watching a football game with high schoolers pitted against pros. Or a boxing match pitting a flyweight against a super heavyweight. Bootstrap is not an efficient thing. If used, it should be done so by persons that understand how it works... which requires at least a fundamental knowledge of markup and CSS, and which kind of makes it illogical in general since understanding Bootstrap usually means you have progressed enough to write your own code. But it bore saying :-)

      P
      Paul-M
      Legend
      November 15, 2018

      https://www.izip.com/

      Paul-M - Community Expert
      P
      Paul-M
      Legend
      November 15, 2018

      https://www.dmxzone.com/go/33143/app-connect-bootstrap-4/

      Uses Bootstrap 4.1.3

      Paul-M - Community Expert
      T
      tim crossAuthor
      Inspiring
      November 15, 2018

      Thank you, for the link will look into that.

      Thanks again Tim

      P
      Paul-M
      Legend
      November 15, 2018

      If you use Dreamweaver's Bootstrap starter templates as you're probably aware, when saving your file for the first time Dreamweaver will copy the Bootstrap files to your site folder.

      In the first instance you could download the latest version of Boostrap and try replacing the existing bootstrap.css and bootstrap.js (make a backup of these files first).

      Paul-M - Community Expert
      P
      Paul-M
      Legend
      November 15, 2018

      I should have mentioned you need to retain the bootstrap filenames bootstrap-4.0.0.css and bootstrap-4.0.0.js

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