Skip to main content
warm_Zenith16B8
warm_Zenith16B8
Participant
February 8, 2018
Answered

Bootstrap v.4.0

  • February 8, 2018
  • 3 replies
  • 1752 views

Would anyone have an idea when the newest version of bootstrap will be available in Dreamweaver? I have been watching for any news or hints regarding this, but not been able to find any information. Anyone have a guess on this…

    This topic has been closed for replies.
    Correct answer Nancy OShea

    You don't need tDW's permission to start using Bootstrap 4 right now.   I've been using it for a while now.

    For convenience, you can reference links to the latest scripts on Max CDN.  Notice some of the Classes have changed.

    Bootstrap 4 Tutorial

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 4 Cards Demo</title>

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

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

    <!--BOOTSTRAP 4 CYBORG THEME-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/4.0.0-beta.2/cyborg/bootstrap.min.css">

    <style>

    html, body {height: 100% }

    </style>

    </head>

    <body>

    <!--begin top nav bar-->

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

    <!-- Brand -->

    <a class="navbar-brand" href="#">Brand Name or Logo</a>

    <!-- Toggler/collapsibe Button -->

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

    <!-- Navbar links -->

    <div class="collapse navbar-collapse" id="collapsibleNavbar">

    <ul class="navbar-nav ml-auto">

    <li class="nav-item active"> <a class="nav-link" href="#">THIS PAGE</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>

    <li class="nav-item"> <a class="nav-link" href="#">MENU 5</a> </li>

    </ul>

    </div>

    </nav>

    <div class="container">

    <div class="jumbotron center-block">

    <h1 class="text-white">Hello World!</h1>

    <h2 class="text-warning">Welcome to Bootstrap 4</h2>

    <h3 class="text-primary">Vertically Centered Cards </h3>

    </div>

    <div class="row row-eq-height bg-dark">

    <!--BEGIN 4 COLUMNS & CARDS-->

    <div class="col-sm-6 col-lg-3 align-self-center">

    <div class="card h-100"> <img class="card-img-top" src="https://dummyimage.com/200x200" alt="Card image">

    <div class="card-body">

    <h4 class="card-title">Card title</h4>

    <p class="card-text">Some quick example text to build on the card title. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>

    <!--/card-body--></div>

    <!--/card--></div>

    <!--/col--></div>

    <div class="col-sm-6 col-lg-3 align-self-center">

    <div class="card h-100"> <img class="card-img-top" src="https://dummyimage.com/200x200" alt="Card image">

    <p> </p>

    <img class="card-img-bottom" src="https://dummyimage.com/200x200" alt="Card image">

    <!--/card--></div>

    <!--/col--></div>

    <div class="col-sm-6 col-lg-3 align-self-center">

    <div class="card h-100">

    <div class="card-body">

    <h4 class="card-title">Card title</h4>

    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur quos sequi maiores, quia error numquam repudiandae ipsam ab eveniet voluptas at eum.</p>

    <a href="#" class="btn btn-danger">MORE +</a>

    <!--/card-body--></div>

    <!--/card--></div>

    <!--/col--></div>

    <div class="col-sm-6 col-lg-3 align-self-center">

    <div class="card h-100">

    <div class="card-body">

    <h4 class="card-title">Card title</h4>

    <p class="card-text">Some quick example text.</p>

    <a href="#" class="btn btn-danger">MORE +</a>

    <!--/card-body--></div>

    <!--/card--></div>

    <!--/col--></div>

    <!--/row--></div>

    <hr>

    <footer class="row">

    <p class="text-center text-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ab explicabo voluptas libero impedit. Modi vel, dolores placeat id magni ut odit libero repudiandae necessitatibus? Dolorem magni illo necessitatibus error.</p>

    </footer>

    <!--/container--></div>

    <!--First jQuery then Popper then Bootstrap-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Popper JS-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

    <!--Latest Bootstap 4 JS-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

    </body>

    </html>

    3 replies

    L
    Community Manager
    lnayalCommunity Manager
    Community Manager
    February 9, 2018

    Hi Rodney,

    We have been working on Bootstrap 4 support in DW and beta builds are available to download.

    Do give it a try and share your thoughts over our prerelease forum.

    Builds can be downloaded from below link

    https://www.adobeprerelease.com/beta/9EB451B5-D2E8-46E5-AFA2-78C85442FFA2/participate/CD0C95AA-6274-4001-FC50-A58A26BE87BE​​

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    February 9, 2018

    You don't need tDW's permission to start using Bootstrap 4 right now.   I've been using it for a while now.

    For convenience, you can reference links to the latest scripts on Max CDN.  Notice some of the Classes have changed.

    Bootstrap 4 Tutorial

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 4 Cards Demo</title>

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

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

    <!--BOOTSTRAP 4 CYBORG THEME-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/4.0.0-beta.2/cyborg/bootstrap.min.css">

    <style>

    html, body {height: 100% }

    </style>

    </head>

    <body>

    <!--begin top nav bar-->

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

    <!-- Brand -->

    <a class="navbar-brand" href="#">Brand Name or Logo</a>

    <!-- Toggler/collapsibe Button -->

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

    <!-- Navbar links -->

    <div class="collapse navbar-collapse" id="collapsibleNavbar">

    <ul class="navbar-nav ml-auto">

    <li class="nav-item active"> <a class="nav-link" href="#">THIS PAGE</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>

    <li class="nav-item"> <a class="nav-link" href="#">MENU 5</a> </li>

    </ul>

    </div>

    </nav>

    <div class="container">

    <div class="jumbotron center-block">

    <h1 class="text-white">Hello World!</h1>

    <h2 class="text-warning">Welcome to Bootstrap 4</h2>

    <h3 class="text-primary">Vertically Centered Cards </h3>

    </div>

    <div class="row row-eq-height bg-dark">

    <!--BEGIN 4 COLUMNS & CARDS-->

    <div class="col-sm-6 col-lg-3 align-self-center">

    <div class="card h-100"> <img class="card-img-top" src="https://dummyimage.com/200x200" alt="Card image">

    <div class="card-body">

    <h4 class="card-title">Card title</h4>

    <p class="card-text">Some quick example text to build on the card title. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>

    <!--/card-body--></div>

    <!--/card--></div>

    <!--/col--></div>

    <div class="col-sm-6 col-lg-3 align-self-center">

    <div class="card h-100"> <img class="card-img-top" src="https://dummyimage.com/200x200" alt="Card image">

    <p> </p>

    <img class="card-img-bottom" src="https://dummyimage.com/200x200" alt="Card image">

    <!--/card--></div>

    <!--/col--></div>

    <div class="col-sm-6 col-lg-3 align-self-center">

    <div class="card h-100">

    <div class="card-body">

    <h4 class="card-title">Card title</h4>

    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur quos sequi maiores, quia error numquam repudiandae ipsam ab eveniet voluptas at eum.</p>

    <a href="#" class="btn btn-danger">MORE +</a>

    <!--/card-body--></div>

    <!--/card--></div>

    <!--/col--></div>

    <div class="col-sm-6 col-lg-3 align-self-center">

    <div class="card h-100">

    <div class="card-body">

    <h4 class="card-title">Card title</h4>

    <p class="card-text">Some quick example text.</p>

    <a href="#" class="btn btn-danger">MORE +</a>

    <!--/card-body--></div>

    <!--/card--></div>

    <!--/col--></div>

    <!--/row--></div>

    <hr>

    <footer class="row">

    <p class="text-center text-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ab explicabo voluptas libero impedit. Modi vel, dolores placeat id magni ut odit libero repudiandae necessitatibus? Dolorem magni illo necessitatibus error.</p>

    </footer>

    <!--/container--></div>

    <!--First jQuery then Popper then Bootstrap-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Popper JS-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

    <!--Latest Bootstap 4 JS-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    K
    Community Manager
    Kratika AgarwalCommunity Manager
    Community Manager
    March 13, 2018

    Hi,

    Please update to DW 18.1 , it includes Support for Bootstrap 4.0.0

    Dreamweaver 18.1 is now live

    Thanks

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    February 8, 2018

    Next version will have

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices