Bootstrap 4
Fundamentals
Core Principles
12-Column Grid & Breakpoints
Helper Classes (Styling)
Components
Functionality (JavaScript)
Pros
Quick & Easy Development
No need to switch to CSS
Cross Browser
Common Language
Excellent Documentation
Huge Community
(StackOverflow to the rescue!)
Core Principles*
Mobile First
"Mobile first, as the name suggests, means that we start the product design from the mobile end which has more restrictions, then expand its features to create a tablet or desktop version."
Reference
Core Principles*
Grid Layout
Core Principles*
Responsive Breakpoints
Small devices (landscape phones, 576px+ and up): .col-sm-*
Medium devices (tablets, 768px and up): .col-md-*
Large devices (desktops, 992px and up): .col-lg-*
Extra large devices (large desktops, 1200px and up): .col-xl-*
Enough Talk. Let's Code!
1) VSCode > File > New Window > New file > Type ! and press Tab
2) Include Bootstrap 4 (CDN)
https://getbootstrap.com > Get Started
3) Open File with Live Server > Ctrl + L, Ctrl + O
Cmd + L, Cmd + O for Mac
4) Open Browser Console F12