Highlighted

Bootstrap v.4.0

New Here ,
Feb 08, 2018

Copy link to clipboard

Copied

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…

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

1.2K

Likes

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

Bootstrap v.4.0

New Here ,
Feb 08, 2018

Copy link to clipboard

Copied

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…

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

1.2K

Likes

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
Feb 08, 2018 0
Adobe Community Professional ,
Feb 08, 2018

Copy link to clipboard

Copied

Next version will have


Ben

Likes

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
Reply
Loading...
Feb 08, 2018 1
Adobe Community Professional ,
Feb 08, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Feb 08, 2018 1
Adobe Employee ,
Mar 13, 2018

Copy link to clipboard

Copied

Hi,

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

Dreamweaver 18.1 is now live

Thanks

Likes

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
Reply
Loading...
Mar 13, 2018 0
Adobe Employee ,
Feb 09, 2018

Copy link to clipboard

Copied

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-...​​

Likes

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
Reply
Loading...
Feb 09, 2018 1