article

bootstrap 4 versus bootstrap 3

[WHAT]

1. ] by Don Sagrott, founder @ sospep.com - ] a cumulative analysis of multiple documents( ref # 4, # 5,, # 6 )  comparing these 2 CSS framework versions

[WHY]

1. ] whats new in bootstrap 4, 
2. ] what changes from bootstrap 3,

[WHERE]

1. ] READ THE FULL ARTICLE
1. ] 

[WHEN]

1. ] 2016-11-26 x

[EXAMPLE]

1. [new] grid has changed, 5 tiers VS 4
1. ] bs 3 grid = large(lg 1200 +), medium(md 1024x768), small(sm 768x1024), extra small (xs 768 -)
2. ] in Bootstrap 3, the smallest breakpoint has a wide range of devices less than 768px in width. As a result, there’s no simple way to create different grid layouts for typical smartphone screens (~375px). There is also no way to distinguish between portrait and landscape mode on mobile devices.
3. ] bs 4 grid = extra large(xl 1200+ desktops and laptops), large(lg 1024x768 tablet landscape), medium(md 768 x1024 tablets portrait, phablets landscap), small(sm 667x375 phablets, smartphone landscape) and extra small(xs 375x667 smartphone portrait) 
4. ] the additional tier allows us to target smaller devices less than 544 px, and create layouts specifically for this screen width
5. ] REF# 4
2. [new] flexbox
1. ] Thanks to flexbox (and display:table when flexbox is not enabled) we now have equal height cards!
2. ] Flexbox provides simpler, more flexible layout options like vertical centering. Simply set the $enable-flex variable to enable flexbox in Bootstrap 4. Introduced in CSS3, flexbox won't work in older browsers like IE9, REF# 4.1 
3. ] REF# 4
3. [new] CARDS - 
1. ] What you notice first in Bootstrap 4 is that .panel and .well have been replaced by the .card. This makes a lot of sense as "cards" are one of the more well known trends in responsive design. The Bootstrap 4 Cards can be singular, grouped together (as shown) or equal height. There are many different layout and content options. 
2. ] much easier to create groups of same height cards…
3. ] REF# 4
4. [new] tag
1. ] replaces label
2. ] REF# 4
5. [new] fonts
1. ] The new native font stack is now the default.
2. ] The default font size went from 14px to 16px in the new Bootstrap 4. 
3. ] All of the font sizing in Bootstrap 4 is completely based on `rem` units so that all font sizes are relative to the root element.
4. ] REF# 4 
6. [new] buttons
1. ] now come in a new outline flavour
2. ] REF# 4
7. [new] utility classes
1. ] the addition of responsive floats that enable you to float an element (left, right, etc..) based on the grid tier. 
2. ] very handy spacing utility classes that enable better control of horizontal & vertical space using variable margins and padding around elements.
3. ] REF# 4
8. [new] source code is now SASS
1. ] previously used less, 
2. ] REF# 5
9. [new] improved grid system using rems
1. ] Using the Bootstrap grid still follows the same HTML syntax, but the underlining architecture changed quite a bit.
2. ] EX container, row col, 
3. ] EX container-fluid, row, col ( for full width rows )
4. ] EX ( nested rows)
5. ] The main difference is the way the spacing is done. A container now has max-width set in rems. A row now has default negative left and right margin of -.9375rem, while columns have default left and right padding of 0.9375rem. These values were previously 15px in Bootstrap 3. These new rem values are almost the same as that. 
6. ] We’ll explain rem a little bit more later, but the main thing to take-away is everything is dynamic and relative to the root HTML tag.
7. ] REF# 5
10. [new] opt in flexbox grid
1. ] 
2. ] REF# 5
11. [new] improved media queries
1. ]  Bootstrap 4 hit the nail on the head with media queries.
2. *] boostrap 3 media queries EXAMPLE - 
3. ] REF# 5
12. [new] cards
1. ] They’re essentially individual content blocks with a ton of out-of-the-box options. 
2. ] The big thing to take away here is you get a ton of new component options to basically build these little card blocks however you want. 
3. ] It’s also worth looking into the Card Groups and Card Decks in the demo. You’ll notice that even though their contents are different sizes, they’re all equal in height without JavaScript.
4. ] REF# 5 
13. [new] reset component
1. ] 
2. ] REF# 5
14. [new] SASS variables for customizing
1. ] 
2. ] REF# 5
15. [new] no IE8 support
1. ] 
2. ] REF# 5
16. [new] JS improvements
1. ] es6 support
2. ] jq 2.0 good to go
3. ] UMD/AMD issues resolved
4. ] REF# 5
17. [new] quickstart options
1. ] 
2. ] REF# 5
18. [new] new units(REMs) for typography
1. ] 
2. ] REF# 5
19. [new] display headings
1. ] 
2. ] REF# 5
20. [new] inverse tables
1. ] 
2. ] REF# 5
21. [new] 30% smaller footprint
1. ] 88kb VS 123kb for v3
2. ] REF# 5
22. [new] outline buttons, ] CC #7
1. ] 
2. ] REF# 5
23. [new] no glyphicons
1. ] 
2. ] REF# 5
24. [new] spacing utility class, ] CC # 8
1. ] 
2. ] REF# 5
25. [new] WTF forms integration
1. ] 
2. ] REF# 5
26. [new] additional responsive embeds
1. ] 
2. ] REF# 5

[HOW-TO]

1. [00:00] why we choose bs
1. ] we have experince with bs
2. ] bs is widely adopted 
3. ] there are lots of 3rd party themes, ..., available for bs
4. [  
2. [00:00] bs 4 - conclusions
1. ]  Even though Bootstrap 4 is only in alpha, it’s still really exciting. Bootstrap has come along way. There is currently no planned release date for Bootstrap 4, but you can follow along with the action .
2. ] REF# 5
3. [] how to - instruction
1. ] checkout latest v from github repo
2. ] 

[REFERENCE]

1. ] # 6575 CREATE-article# 5433 (this) - whats new in bootstrap 4 || bootstrap 4 vs bootstrap 3
2. ] Bootstrap 4 a visual guide - by Carol Skelly ON medium.com - Skelly illustrates the differences between the upcoming bootstrap version 4 and the current bootstrap version 3
1. ] http://bootstrap4.guide/ - site demonstrating the newest bootstrap features
3. x] r# # - ] What’s New in Bootstrap 4,SRC=best-of-hn-2015-08-25(184)/comments(43) ] by Nicholas Cerminara @scotch.io -  from a developer perspective
4. ] r# # - http://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm - feature table comparing bootstrap 4 features vs bootstrap 3 features, 

[RELATED]

Details

ID: 5433

NAME: bootstrap-3-versus-bootstrap-4

DESCRIPTION: ] whats new in bootstrap 4, what changes from bootstrap 3, a cumulative analysis of multiple documents comparing these 2 CSS frameworks

AUTHOR: article.author/s

EDITOR: article.editor/s

PUBLISHER: article.publisher/s

STATUS: Write

PRIORITY: -5

OWNER ID: 75

photos

actions

Email Email-Owner SMS and