Highlighted

Bootstrap 4

Community Beginner ,
Nov 07, 2017

Copy link to clipboard

Copied

Can I use already bootstrap 4 in dreamweaver ?

Replace the version 3 by 4 ?

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

Keep in mind that DW has not been updated with new Bootstrap 4 yet.  If you decide to use it, you will need a working knowledge of the new code and classes in Bootstrap 4.  See link below for examples.

https://v4-alpha.getbootstrap.com/examples/

Nancy

TOPICS
Learn Dreamweaver

Views

2.5K

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 4

Community Beginner ,
Nov 07, 2017

Copy link to clipboard

Copied

Can I use already bootstrap 4 in dreamweaver ?

Replace the version 3 by 4 ?

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

Keep in mind that DW has not been updated with new Bootstrap 4 yet.  If you decide to use it, you will need a working knowledge of the new code and classes in Bootstrap 4.  See link below for examples.

https://v4-alpha.getbootstrap.com/examples/

Nancy

TOPICS
Learn Dreamweaver

Views

2.5K

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
Nov 07, 2017 0
Adobe Employee ,
Nov 07, 2017

Copy link to clipboard

Copied

Hi,

You can get Bootstrap 4 at the CDNs below.

The CDN for Bootstrap, Font Awesome & Bootswatch

https://www.bootstrapcdn.com/

The CND for jQuery Core, jQuery UI & jQuery Mobile

jQuery CDN

Bootstrap 4 Beta 2

<!DOCTYPE html> 
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1> 

<!-- jQuery first, then Popper, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>

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...
Nov 07, 2017 0
Community Beginner ,
Nov 07, 2017

Copy link to clipboard

Copied

thanks that i know. The question was if I can use that in dreamweaver  . Probably yes if I use the appropiate codes from bootstrap 4 ?

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...
Nov 07, 2017 0
Adobe Community Professional ,
Nov 07, 2017

Copy link to clipboard

Copied

You won't get any help from the DW Insert panel.  But if you're comfortable working with code classes, it won't be a problem.

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...
Nov 07, 2017 0
Adobe Community Professional ,
Nov 07, 2017

Copy link to clipboard

Copied

Please note that Bootstrap 3 will remain current for quite some time to come.

Hence, if you need support for IE8/IE9, Safari 8-, iOS 8-, etc you can keep using Bootstrap 3.

Edit: Please note that I am better looking than you, ikbendeknapste


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...
Nov 07, 2017 0
LEGEND ,
Nov 08, 2017

Copy link to clipboard

Copied

BenPleysier  wrote

Edit: Please note that I am better looking than you, ikbendeknapste

But we cannot be certain of that Ben, as there is no picture in the user profile

And who is to say your picture is of you

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...
Nov 08, 2017 0
Adobe Community Professional ,
Nov 08, 2017

Copy link to clipboard

Copied

The OP's screen name = ikbendeknapste = Ik ben de knapste = I'm the cutest one. 


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...
Nov 08, 2017 0
Community Beginner ,
Nov 08, 2017

Copy link to clipboard

Copied

Well I was cute and young , now I'm only cute ...

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...
Nov 08, 2017 2
Adobe Community Professional ,
Nov 07, 2017

Copy link to clipboard

Copied

Keep in mind that DW has not been updated with new Bootstrap 4 yet.  If you decide to use it, you will need a working knowledge of the new code and classes in Bootstrap 4.  See link below for examples.

https://v4-alpha.getbootstrap.com/examples/

Nancy

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...
Nov 07, 2017 0
LEGEND ,
Nov 07, 2017

Copy link to clipboard

Copied

The answers you have are i hope helpfull, and i do not want this to become a debate about bootstrap, (please everyone note, these questions are for the OP only).

In order to better understand Dw users and their wish to use bootstrap version 4, i was wondering if you would be willing to answer a couple of questions?

  1. Why do you wish to use bootstrap 4, and would you use the bootstrap 4 default layout which is based on css flexbox?
  2. If Dw had better support for flexbox, and provided starter pages for its use, would you prefer to use such a workflow than bootsrap?

Optional -

As Bootstrap uses css flexbox, are you planning on using fallback code for older browsers, that you yourself would create, and would you prefer css only versions of the current bootstrap 3x components, as all browsers would be able to use them that can use css flexbox?

Thank you?

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...
Nov 07, 2017 1
Adobe Community Professional ,
Nov 07, 2017

Copy link to clipboard

Copied

pziecina  wrote

The answers you have are i hope helpful, and i do not want this to become a debate about bootstrap, (please everyone note, these questions are for the OP only).

While the post is OT, does this mean that you are going to formulate an opinion on the answers of one Bootstrap user?


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...
Nov 07, 2017 2
Adobe Community Professional ,
Nov 07, 2017

Copy link to clipboard

Copied

I think most developers  want to move to Bootstrap 4 for the same reasons we moved from 2 to 3.   You can do more with it.

should-you-use-bootstrap-4-beta-in-production

I don't know many developers these days who sweat about the slim % of users on IE8/IE9, Safari 8-, iOS 8-, etc.. but if that's your target audience, then keep using Bootstrap 3. 

Browser market share

iOS Distribution and iOS Market Share

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...
Nov 07, 2017 1
Adobe Community Professional ,
Nov 07, 2017

Copy link to clipboard

Copied

Even IE11, which is used by over 12% of users, can present a problem as per the following example.

<!DOCTYPE html>

<html>

  <head>

  <meta charset="UTF-8">

  <title>Bootstrap 4 Test</title>

  <script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

  <style>

/* Sticky Footer */

.full-height {

  height: 100vh;

  min-height: 100vh;

}

.flex-1 {

  flex: 1;

}

</style>

  </head>

  <body is="dmx-app" id="index" class="d-flex flex-column full-height">

<header class="container-fluid bg-warning">

    <h1>My Site</h1>

  </header>

<nav class="container-fluid bg-primary">

    <p class="text-light">MenuBar</p>

  </nav>

<section class="container flex-1">

    <div class="row d-flex flex-md-column flex-md-row-reverse">

    <main class="col">Main Content</main>

    <aside class="col-md-3">Sidebar</aside>

  </div>

  </section>

<footer class="container-fluid bg-warning">

    <p class="text-muted">Footer</p>

  </footer>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

</body>

</html>

In all browsers, the above produces (this shows IE11)

Now add an image by adding the following line after the NAV container

<img src="http://via.placeholder.com/1620x400" class="img-fluid" alt"">

and it will break in IE11 - OK in all newer browsers.

The way that I solved this, was to remove the sticky footer effect from IE11

<!DOCTYPE html><html><head>

  <meta charset="UTF-8">

  <title>Bootstrap 4 Test</title>

  <script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

  <style>

    @supports (display: flex) {

    /* Sticky Footer */

    .full-height {

      height: 100vh;

      min-height: 100vh;

      display: -webkit-flex; /* Safari */

      -webkit-flex-direction: column; /* Safari 6.1+ */

      display: flex;

      flex-direction: column;

    }

    .flex-1 {

      flex: 1;

    }

    }

  </style>

  </head>

  <body is="dmx-app" id="index" class="full-height">

    <header class="container-fluid bg-warning">

      <h1>My Site</h1>

    </header>

    <nav class="container-fluid bg-primary">

      <p class="text-light">MenuBar</p>

    </nav>

   

    <img src="http://via.placeholder.com/1620x400" class="img-fluid" alt"">

    <section class="container flex-1">

      <div class="row d-flex flex-md-column flex-md-row-reverse">

        <main class="col">Main Content</main>

        <aside class="col-md-3">Sidebar</aside>

       </div>

    </section>

    <footer class="container-fluid bg-warning">

      <p class="text-muted">Footer</p>

      </footer>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

</body></html>

But this still leaves a problem in IE11 with white space between the elements

For a foolproof and time efficient way, I would suggest that most users should stay with Bootstrap 3


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...
Nov 07, 2017 1
LEGEND ,
Nov 08, 2017

Copy link to clipboard

Copied

BenPleysier  wrote

pziecina   wrote

The answers you have are i hope helpful, and i do not want this to become a debate about bootstrap, (please everyone note, these questions are for the OP only).

While the post is OT, does this mean that you are going to formulate an opinion on the answers of one Bootstrap user?

No.

But i do not want the usual people answering. I have also read bootstrap users thoughts in other forums.

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...
Nov 08, 2017 0
Adobe Community Professional ,
Nov 08, 2017

Copy link to clipboard

Copied

Thanks for the heads up on sticky footers in IE 11.  I probably would not have noticed, I'm not a big fan of sticky footers.

Footer content is the least important part of my page.  I see no upside in keeping it visible at all times.  However, sticky headers make a lot of sense especially on long pages.

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...
Nov 08, 2017 0
LEGEND ,
Nov 08, 2017

Copy link to clipboard

Copied

The sticky footer problem is a known bug in IE which it looks like will not be fixed -

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-colum...

To use sticky footers with IE you have to use % values not vh. You could use % values then override to use vh values inside an @support rule, as IE does not support @support but Edge and all other browsers do.

There is a polyfill for @support but in my opinion it is no longer worth using.

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...
Nov 08, 2017 0
LEGEND ,
Nov 08, 2017

Copy link to clipboard

Copied

No comment

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...
Nov 08, 2017 1
Adobe Community Professional ,
Nov 08, 2017

Copy link to clipboard

Copied

If you have a look at my first screen capture, you will see that the footer behaves extremely well in IE11. It is Bootstrap 4 that causes the problem once I add an image.


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...
Nov 08, 2017 0
Adobe Community Professional ,
Nov 08, 2017

Copy link to clipboard

Copied

The only reason I have a sticky footer is when the content of the page does not cover the full length of the screen. It looks funny when there is a blank space under the footer.

I use the footer for copyright, terms of use and privacy policy.


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...
Nov 08, 2017 0
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
LEGEND ,
Nov 08, 2017

Copy link to clipboard

Copied

Can we call for a vote on who is the cutest please

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...
Nov 08, 2017 0
Adobe Employee ,
Jan 23, 2018

Copy link to clipboard

Copied

Hi ,

We are working on implementing Bootstrap version 4 support in DW.

Please join our Prerelease to try out Bootstrap 4.

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

Thanks

Kratika

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...
Jan 23, 2018 0