Skip to main content
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 13, 2018
Question

[Locked] Bootstrap 3 vs 4: which should I use?

  • March 13, 2018
  • 2 replies
  • 4862 views

If you must support IE9 or earlier browsers, keep using Bootstrap 3.  It won't be updated again but will remain a stable release for all your current projects.

Bootstrap 4 is a major re-write using CSS Flexbox instead of Floats for layouts.  Additional changes include:

  • New grid layout breakpoints (xs, sm, md, lg and xl) every tier has been bumped up one level.
  • Typography is expressed in REM instead of PX.
  • Source CSS files use SASS instead of LESS.
  • Many new utility classes which you might not recognize from Bootstrap 3.
  • Component changes -- panels, thumbnails & wells are replaced with cards.

For a more thorough summary of the big ticket items that changed in Bootstrap 4, see link below.  Keep in mind this is no longer an Alpha project.  Bootstrap 4 is the current stable release version.

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

Nancy

    This topic has been closed for replies.

    2 replies

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    March 15, 2018

    Alright, a nice, helpful heads-up about the changes regarding Bootstrap in DW has gone off the tracks.

    If anyone has a valid reason to unlock this week's "who is a professional thread hijack", send me a PM.

    pziecina
    pziecina
    Legend
    March 13, 2018

    I am not going to get into the b vs f in this discussion Nancy

    What I would like to point out to every user, is that they should NOT try and mix or use version 3x with version 4, (or 4 with 3) of bootstrap, and that they should ensure that they link to the appropriate files for their version, if using the cdn links.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertAuthor
    Community Expert
    March 13, 2018

    pziecina  wrote

    I am not going to get into the b vs f in this discussion Nancy

    What I would like to point out to every user, is that they should NOT try and mix or use version 3x with version 4, (or 4 with 3) of bootstrap, and that they should ensure that they link to the appropriate files for their version, if using the cdn links.

    Thanks for that., Paula.   2 very good points! 

    If CDNs are used as source files, be sure to use those with integrity & cross origin checks for better security.  I have added these to my custom Snippets folder.

    BOOTSTRAP 4 FROM CDN

    ===================

    <!--Latest minified Bootstrap 4.0.0 CSS-->

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

    <!-- jQuery 3.2.1-->

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

    <!--Popper  1.11.0 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 minified Bootstrap 4.0.0 JS-->

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

    BOOTSTRAP 3 FROM CDN

    ======================

    <!--Latest minified Bootstrap 3.3.7 CSS-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- jQuery 3.2.1-->

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

    <!--Latest minified Bootstrap 3.3.7 JS-->

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

    Nancy O'Shea— Product User & Community Expert
    David_Powers
    David_Powers
    Inspiring
    March 14, 2018

    DW CC users should be aware that Dreameaver CC 2018.1 uses Bootstrap 4 by default for new projects. If you want to create a new project using Bootstrap 3, you need to set the version first in the Site Setup > Advanced Settings > Bootstrap panel.

    Existing sites using Bootstrap 3 are automatically recognized as such, and the Insert panel and Insert menu toggle between the different versions of Bootstrap depending on the versions of bootstrap.css and bootstrap.js attached the the file that's currently active in the Document window.

    Dreamweaver won't insert the wrong type of component even if you have both Bootstrap 3 and Bootstrap 4 files open at the same time.

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