Highlighted

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

Adobe Community Professional ,
Mar 13, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Views

2.4K

Likes

Translate

Translate

Report

Report
This conversation has been locked.

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

Adobe Community Professional ,
Mar 13, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Views

2.4K

Likes

Translate

Translate

Report

Report
Mar 13, 2018 0
LEGEND ,
Mar 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Mar 13, 2018 0
Adobe Community Professional ,
Mar 13, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Mar 13, 2018 0
LEGEND ,
Mar 14, 2018

Copy link to clipboard

Copied

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.

bootstrap3.jpg

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.

Likes

Translate

Translate

Report

Report
Mar 14, 2018 0
Adobe Employee ,
Mar 14, 2018

Copy link to clipboard

Copied

Hi,

For more information on Bootstrap V4 support please refer to help documentation:

Design responsive websites using Bootstrap

Thanks

Likes

Translate

Translate

Report

Report
Mar 14, 2018 0
LEGEND ,
Mar 14, 2018

Copy link to clipboard

Copied

Probably why I've given up in this forum....its frequented by a bunch of amatuers both who teach and use amatuerish workflows. Its pathetic and the majority of the questions are equally pathetic.

If you have to ask the question or expalin why, how, if to use v3, v4 or v5 you should almost ceratinly be doing bricklaying, not web-development.

Likes

Translate

Translate

Report

Report
Mar 14, 2018 0
Adobe Community Professional ,
Mar 14, 2018

Copy link to clipboard

Copied

I should have mentioned above that nobody is obliged to use Bootstrap in DW.  It's there for people who want to use it.   And now the latest version of DW gives you a choice between Bootstrap 3 or 4.  

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Mar 14, 2018 0
LEGEND ,
Mar 14, 2018

Copy link to clipboard

Copied

There was always the choice, unless of course you're not a web developer but some school kid playing around with a bit of poor software whose poorly educated teacher has told them to use because its the only thing they know. Everyone whose anyone has been using V4 for about a year, finally Adobe catches all the other software programs up where its been available for months........DW is a joke.......along with pretty much everyone who now posts here.

Likes

Translate

Translate

Report

Report
Mar 14, 2018 0
LEGEND ,
Mar 14, 2018

Copy link to clipboard

Copied

Hi Os,

I was starting to wonder where you were .

The main reason I stick arround now, (apart from annoying some people) is that I want to see how people will use bootstrap v4 to build flexbox layouts, and how complicated they make something that is so simple to use.

As you probably already know bootstrap v4 only works in mobile devices => iOS6 and Android v5, but flexbox if one knows what they are doing can be used back to iOS2 and Android v2, but not using any version of Dw easily. Because as I pointed out in the discussion I created, Dw does not support a stand-alone css auto-prefixer, although the one recommended for use in the bootstrap v4 docs is the same stand-alone prefixer as used by Brackets and some other editors.

As regards posts, the Muse forum is starting to get some interesting questions regarding css, but Muse requires a complicated method to enable its users to use custom css/html/js. Plus a number of the replies I read illustrate that whilst the solution would be very simple for many web developers, Muse has also started to 'hit' problems, as it cannot handle custom code easilly. Which is a pity, as I think that type of program is what many, (if not most) Dw users should be using.

Likes

Translate

Translate

Report

Report
Mar 14, 2018 0
LEGEND ,
Mar 14, 2018

Copy link to clipboard

Copied

I dont think theres anyone left in this forum now that could build a website from scratch without resorting to some kind of framework or extension. I have zero in common any longer with the majority of posters or posts. Its pretty sad to witness the slow decline over the years to what it has become today, a souless, guttless place where you wouldnt want to take anyone hugely seriously. At best the people who post and give advice  are circus acts or end of pier entertainers.

Likes

Translate

Translate

Report

Report
Mar 14, 2018 0
LEGEND ,
Mar 14, 2018

Copy link to clipboard

Copied

The forum has become that way, simply because the Dw team, and most of those advising them have little understanding of modern web development, and those few who do have any idea are scared of loosing their 'status', or 'perks' if they complain, so continue to support what is happening.

Advising people to join the pre-release knowing that any suggestions will be ignored, has become the normal reply to complaints about Dw.

Likes

Translate

Translate

Report

Report
Mar 14, 2018 0
Mentor ,
Mar 14, 2018

Copy link to clipboard

Copied

osgood_​ Tell us how you really feel, if you are going out in flames.

pziecina  wrote

The forum has become that way

Sadly, virtually every forum section for every Adobe software title has gone downhill rapidly since Cash Cloud was released, much like all the software itself.

Likes

Translate

Translate

Report

Report
Mar 14, 2018 0
LEGEND ,
Mar 14, 2018

Copy link to clipboard

Copied

At least l can sleep at night not like the other muppets saying yes mam, no mam, just to keep the free products flowing. Id rather stick pins in my own eyes than be corrupted by monetery incentives.

Likes

Translate

Translate

Report

Report
Mar 14, 2018 0
LEGEND ,
Mar 14, 2018

Copy link to clipboard

Copied

Truth sometimes hurts and lve never been one to shy away from it. Take a look at how many posts have been sent to this forum over the last few days which addresses any real web development issues and not dumb questions a 3 year old should be able to answer about bootcrap or the program itself.

This forum used to be a source of real learning, now its just a few people who are using coloring by numbers techniques.

One of the people l most respected when l initially came to this forum and from the forum before this one was Murray. He used to guide people how to actually be a web developer by actually learning something tangible rather than clicking and dragging. I guess he just got f**k*d with the way things have been developing too and shut his place down, probably the wisest move he will ever make.

Likes

Translate

Translate

Report

Report
Mar 14, 2018 0
Adobe Community Professional ,
Mar 14, 2018

Copy link to clipboard

Copied

pziecina  wrote:

Dw does not support a stand-alone css auto-prefixer, although the one recommended for use in the bootstrap v4

An auto-prefixer for Bootstrap 4 is necessary when compiling SASS files, it is not required when using CDN's as in Nancy's answer.

As a workaround for Dreamweaver, I use Prepros.


Ben

Likes

Translate

Translate

Report

Report
Mar 14, 2018 0
Adobe Community Professional ,
Mar 14, 2018

Copy link to clipboard

Copied

pziecina  wrote:

As you probably already know bootstrap v4 only works in mobile devices => iOS6 and Android v5, but flexbox if one knows what they are doing can be used back to iOS2 and Android v2, but not using any version of Dw easily.

I pity those that use older versions of any operating system. There is a reason why O/S's are constantly being updated.


Ben

Likes

Translate

Translate

Report

Report
Mar 14, 2018 0
Adobe Community Professional ,
Mar 14, 2018

Copy link to clipboard

Copied

osgood_ wrote:

Everyone whose anyone has been using V4 for about a year

Bootstrap 4.0 was realeased on 18th January, less than two months ago.


Ben

Likes

Translate

Translate

Report

Report
Mar 14, 2018 1
Adobe Community Professional ,
Mar 14, 2018

Copy link to clipboard

Copied

And DMX Zone just released  Bootstrap 4 for their App Connect extension. 

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

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Mar 14, 2018 0
Adobe Community Professional ,
Mar 14, 2018

Copy link to clipboard

Copied

I'm having a ball Nancy OShea​, the workflow is similar to Wappler. But with Dreamweaver I have a fully fledged program backing the extension up. 'Look Mum, no hands' was my catchcry when I was a toddler. Now in my senior years this has become 'Look people, no hand coding'.

To see what I am talking about go to Building a Page Layout with Bootstrap 4 - YouTube


Ben

Likes

Translate

Translate

Report

Report
Mar 14, 2018 1
LEGEND ,
Mar 15, 2018

Copy link to clipboard

Copied

BenPleysier  wrote

An auto-prefixer for Bootstrap 4 is necessary when compiling SASS files, it is not required when using CDN's as in Nancy's answer.

As a workaround for Dreamweaver, I use Prepros.

It may be required also for the user created css file when using bootstrap 4. Users should not just think about prefixing flexbox, as many other css properties still require prefixing.

The requirerment for a prefixer that can be applied to just a specific user selection, and not just on save, or to the entire css will continue for a number of years, (think css grids).

Likes

Translate

Translate

Report

Report
Mar 15, 2018 0
Adobe Community Professional ,
Mar 15, 2018

Copy link to clipboard

Copied

I am not disputing the fact that an auto-prefixer would be a great asset if included in Dreamweaver. All I am saying is that the content of your premise is not correct, namely

Dw does not support a stand-alone css auto-prefixer, although the one recommended for use in the bootstrap v4

Ben

Likes

Translate

Translate

Report

Report
Mar 15, 2018 0
LEGEND ,
Mar 15, 2018

Copy link to clipboard

Copied

BenPleysier  wrote

osgood_ wrote:

Everyone whose anyone has been using V4 for about a year

Bootstrap 4.0 was realeased on 18th January, less than two months ago.

Everyone whose anyone INCLUDING YOURSELF has been using v4 in production for over six months+ A clear case of someone in denial, cant see the woods from the trees and whose mind set has been warped by this forum even though they are using the workflow themselves, I rest my case in regards to the intelligence of the people that post in this forum, they have none.

Likes

Translate

Translate

Report

Report
Mar 15, 2018 0
LEGEND ,
Mar 15, 2018

Copy link to clipboard

Copied

BenPleysier  wrote

Now in my senior years this has become 'Look people, no hand coding'.

That is unfortuanately because you are past your sell by date and are unrealistic when it come to 'real world' website building. Ask yourself this 'would you be able to hold down a web-development job in the real world'. The answer is a resounding NO! Youre just playing around with a lot of amatuer extensions and workflows that are probably best suited for the kind of rubbish you work on.

Likes

Translate

Translate

Report

Report
Mar 15, 2018 0
Adobe Community Professional ,
Mar 15, 2018

Copy link to clipboard

Copied

I love you too!


Ben

Likes

Translate

Translate

Report

Report
Mar 15, 2018 0
Participant ,
Mar 15, 2018

Copy link to clipboard

Copied

The answer is clearly YES.

Mots of the web/front-end dev jobs require things you mention every time that you dislike (obviously because you don't understand them and don't possess the right skills to use them) such as Bootstrap,  Foundation, Angular and/or(put here any other front-end js framewrok), Node, LESS/SASS etc. Just the first several jobs found on linkedin ...
Front-end UI Developer - Angular/React/JavaScript Job at Fidelis Cybersecurity in Bethesda, MD, US |...

https://www.linkedin.com/jobs/view/544217949/?eBP=NotAvailable&refId=a0cc0042-17c7-4e0e-94cd-4cae2fe...

https://www.linkedin.com/jobs/view/589784761/?eBP=NotAvailable&refId=a0cc0042-17c7-4e0e-94cd-4cae2fe...

https://www.linkedin.com/jobs/view/587918175/?eBP=NotAvailable&recommendedFlavor=true&refId=a0cc0042...

https://www.linkedin.com/jobs/view/624059506/?eBP=NotAvailable&recommendedFlavor=true&refId=a0cc0042...

Likes

Translate

Translate

Report

Report
Mar 15, 2018 0
LEGEND ,
Mar 15, 2018

Copy link to clipboard

Copied

BenPleysier  wrote

I love you too!

Kiss kiss.

Come on Ben everyome knows when you reach 60+ youre past it in this field, way past it and would be laughed at in the real world. Some of us accept it, others are in denial.

Likes

Translate

Translate

Report

Report
Mar 15, 2018 0
LEGEND ,
Mar 15, 2018

Copy link to clipboard

Copied

jamies34641468  wrote

The answer is clearly YES.

Mots of the web/fron-end dev jobs require things you mention every time that you dislike (obviously because you don't understand them and don't possess the right skills to use them) such as Bootstrap,  Foundation, Angular and/or(put here any other front-end js framewrok), Node, LESS/SASS etc. Just the first several jobs found on linkedin ...
Front-end UI Developer - Angular/React/JavaScript Job at Fidelis Cybersecurity in Bethesda, MD, US |...

https://www.linkedin.com/jobs/view/544217949/?eBP=NotAvailable&refId=a0cc0042-17c7-4e0e-94 cd-4cae2f...

https://www.linkedin.com/jobs/view/589784761/?eBP=NotAvailable&refId=a0cc0042-17c7-4e0e-94 cd-4cae2f...

https://www.linkedin.com/jobs/view/587918175/?eBP=NotAvailable&recommendedFlavor=true&refI d=a0cc004...

https://www.linkedin.com/jobs/view/624059506/?eBP=NotAvailable&recommendedFlavor=true&refI d=a0cc004...

Fortunately I do have the skills which doesnt require me to resort to Bootstrap, Foundation, extensions etc obviously YOU as with so many who have been born into a world where they only know these workflows, don't.

Look on another web-development jobsite, one which I posted a link to a few weeks back, and Bootstrap, Sass,Less hardly gets a mention. A good knowledge of html/css/php does.

Web Designer Jobs - March 2018 | Indeed.co.uk

You do know that the best web-developers are itching to use css grid now don't you - 88% coverage and rising.....its coming and those that are still using Bootstrap v3 and v4 are going to be unemployable.

Likes

Translate

Translate

Report

Report
Mar 15, 2018 0
LEGEND ,
Mar 15, 2018

Copy link to clipboard

Copied

osgood_  wrote

Come on Ben everyome knows when you reach 60+ youre past it in this field, way past it and would be laughed at in the real world. Some of us accept it, others are in denial.

Let's agree to disagree on that one.

It all depends on the employment position, and the type of work one has done, and is going to do, when it comes to someone being past it. Yes I will agree to the statement if the position is for a coder, with any company, a freelancer or someone who is self-employed only doing work for local buisnesses.

Once it comes to managment positions though, the situation changes dramatically, even when those positions require more than an avarage knowledge of coding, there are more opportunities available to a person who has worked in that specific field of employment previously, than most would think, and that I have found continues well past 60.

Then again, my field of expertise previous to the web, helped tremendously, so maybe I have just been lucky.

Likes

Translate

Translate

Report

Report
Mar 15, 2018 0
Adobe Community Professional ,
Mar 15, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Mar 15, 2018 0