Bootstrap 4 is a popular CSS framework for rapid website prototyping. It features an enhanced grid system, support for flexbox, use of REM units instead of pixels, and support for Sass. Some key changes in Bootstrap 4 include switching from LESS to Sass, adding a cards component, and dropping support for Internet Explorer 8. The grid system includes five tiers (extra small, small, medium, large, extra large) for responsive design. Flexbox and the position property help control layout, while other topics covered include the box model, CSS variables, and animations.

1. BOOTSTRAP 4
Krishan Mohan
Gaurav mall

2. Outline
■ Top 5 Most Popular CSS Frameworks
■ What is Bootstrap?
■ What is new in B4?
■ Sass
■ Review of REM units and demo
■ FLEXBOX
■ BS Grid History
■ BS4 Grid System

3. Top 5 Most Popular CSS Frameworks

5. What is Bootstrap 4?
■ Bootstrap is the most popular CSS framework for RAPIDWEBSITE PROTOTYPING.
■ What is the grid?
■ FLEXBOX
■ Sass architecture
■ Open source

6. What is new in Bootstrap 4?
■ EnhancedGRID
■ Switched from LESS to SASS
■ Cards component
■ REM instead of Pixels CSS units
■ FLEXBOX grid support
■ Re Boot - replaces normalizer
■ No more IE8!!!!!!

7. What is a CSS reset?
Its an additional block of CSS that will help with consistency in the default styling of
HTML elements.
■ Eric mayer’s CSS reset
■ Normalizer
■ B4 new Reboot
■ HTML5 reset

8. Sass
■ Sass is an extension of CSS that allows for more functional syntax. Sass always needs
to be compiled into CSS.
■ Sass is used by developers to produce more modular and easy to maintain code on the
source code.
■ The easiest way to get started with Sass is with a compiler program like Koala

9. ■ Bootstrap 4 ships with a _custom.scss file for easy overriding of default variables.
■ For Global variables, use _variables.scss
■ Be sure to remove the !default flag from override values.

10. How REM units work
■ The rem unit is relative to the root—or the html—element.That means that we can define a
single font size on the html element and define all rem units to be a percentage of that.
■ html { font-size: 62.5%; }
■ body { font-size: 1.4rem; } /* =14px */
■ h1 { font-size: 2.4rem; } /* =24px */
EMs
■ 1em is equal to the current font size.The default text size in browsers is 16px. So, the
default size of 1em is 16px.
REMs
■ Equal to the computed value of font-size on the root element.When specified on the font-
size property of the root element, the rem units refer to the property's initial value.
PIXELS
■ The pixel (a word invented from "picture element") is the basic unit of programmable color
on a computer display or in a computer image

11. How does the FLEXBOX work?
■ FLEXBOX is a CSS3 layout mode that provides an easier way to arrange elements
within a container
■ No FLOATS
■ No margin collapse
■ Order of elements is controlled from CSS
■ Designed for screens
■ Easier to position child elements
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

12. Can we use FLEXBOX now?
■ YES, but be careful & use fall backs when possible.
■ 90% of Browser support FLEXBOX
■ IE has no support
■ EDGE partial support
■ Legacy mobile browsers no support or partial support
https://caniuse.com/#feat=flexbox

13. Basic FLEXBOX Utilities
Vertical Alignment (row)
■ align-items-start
■ align-items-center
■ align-items-end
Order of itement (col)
■ flex-unordered
■ flex-first
■ flex-last
Horizontal Alignment (row)
■ justify-content-start
■ justify-content-center
■ Justify-content-end
■ justify-content-around
■ justify-content-between

14. The BS Grid History
■ Looking back at Bootstrap 3, the 4 grid tiers (‘xs’, ’sm’, ‘md’ and ‘lg’ breakpoints) .
■ The smallest breakpoint has a wide range of devices less than 768px in width.

15. Bootstrap 4 Grid
■ Introducing the new XL grid tier
There are 5 tiers (or breakpoints) to support typical portrait and landscape screen
widths.
■ New grid breakpoint with the col-xl-*classes
■ Breakpoints:
The XL breakpoint is screen widths>1200px
■ The LG breakpoint is screen widths>992px
■ The MD breakpoint is screen widths>768px
■ The SM breakpoint is screen widths>544px
■ The XS breakpoint is screen widths<544px

16. CSS Layout -The position Property
The position property specifies the type of positioning method used for an element.
■ There are five different position values:
■ static
■ relative
■ fixed
■ absolute
■ Sticky- Note: IE/Edge 15 and earlier versions do not support sticky position.

17. The CSS Box Model
■ Content -The content of the box, where text and images appear
■ Padding - Clears an area around the content.The padding is transparent
■ Border - A border that goes around the padding and content
■ Margin - Clears an area outside the border.The margin is transparent

18. CSSVariables
■ Variables in CSS should be declared within a CSS selector that defines its scope. For a
global scope you can use either the :root or the body selector.
■ The syntax of the var() function is as follows: var(custom-name, value)
Example:
■ https://codepen.io/krishan101090/pen/YvxzWP?editors=1100

19. CSS ANIMATION - KEYFRAMES
■ The @keyframes rule specifies the animation code.
■ During the animation, you can change the set of CSS styles many times.
■ Specify when the style change will happen in percent, or with the keywords "from" and
"to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is
when the animation is complete.
■ https://codepen.io/krishan101090/pen/jKLOPG

20. Question And Answes