Bootstrap layouts in depth - Building Amazing Layouts (Book 2)

Table of Contents
Chapter 1: Bootstrap 4 containers and contextual colors
The structure of every HTML page
Adding Bootstrap 4 link meta information
Adding background color to an HTML element in Bootstrap 4
Containers in Bootstrap 4
Completing our first Bootstrap 4 layout
The difference between container and container-fluid
The container-fluid and container class at xs resolutions
The container-fluid and container class at sm resolutions
Conclusion
Chapter 2: Bootstrap 4 rows and responsive columns
The row Bootstrap 4 CSS class
Bootstrap 4 column grid
Adding the HTML structure to our layout
Adding Bootstrap’s column grid
Adding borders to our rows
Margin and padding utility classes in Bootstrap 4
Conclusion
Chapter 3: Bootstrap 4 components
Introducing components in Bootstrap
Primary and secondary layout components
Building a Bootstrap 4 layout with primary layout components only
Adding jQuery to Bootstrap 4 layout
Adding the breadcrumb component
Adding the carousel component
Adding the card component
Adding the jumbotron component
Improving our layout
Adding better images to out layout
Fixing the color scheme and the dummy text
Fixing margin issues and centering newsletter subscription
Fixing the zoomed out “effect”
Conclusion
Chapter 4: Improving Bootstrap's official examples
Upgrading the official Album layout
Improving the upgraded Album layout
Making dark letters on dark background visible with Bootstrap’s contextual bg-* classes
Adding transparency to the background color
Conclusion
Chapter 5: Working with SCSS in Bootstrap 4
Copying CSS from another Bootstrap layout into our own
Locating the theme’s main CSS file and unminifying it
Copying the theme’s CSS file
Pasting in the copied CSS code into the default theme
Saving the changes to our theme and trimming the unused CSS
Trimming unused CSS with Chrome’s devtools
Completing the changes to the pricing example layout
Removing the margin between the navbar and the pricing section and making the pricing background drop
Fixing the buttons
Conclusion
Chapter 6: Building a typography-focused layout in Bootstrap 4
Why Koala?
Why SCSS?
Installing and using Koala
Adding Bootstrap 4.3 SCSS files
Compiling SCSS with the Koala app
Changing default Bootstrap variables
Downloading Google fonts
The mockup and the starter layout
Choosing the code editor
Opening the starter template
Adding the navbar
Visually comparing the navbars
Finding the styles to update using developer tools
What is the & in HTML
Adding the h1 to our site
Using containers to quickly structure our layouts
Bootstrap layouts as layers of containers
1. Wrapping container in container-fluid
2. Using container without wrapping it inside container-fluid
3. Using container-fluid class without a container inside of it
Understanding spacing utility classes in Bootstrap
Our layout, improved with containers
Adding images and text to our layout
Adding the columns
Polishing up our layout
Source ordering our column grid
Testing layout variations using the JavaScript console in the developer tools
Making the footer stick to the bottom
Improving typography
Conclusion
Chapter 7: Modularize your Bootstrap 4 layouts
How to improve our layout-building process?
Understanding how Angular works
How to split HTML files with Angular
The class file in an Angular template
How does the class file add functionality in an Angular component?
Understanding the minimal code of a component’s class file
Setting up our Angular minimal app
Inspecting our app's code on Stackblitz
The purpose of a CDN
The contents of the src folder
#1: The app module imports all the components
#2: The app.component.html imports all the other HTML files
Inspecting the app.module.ts file
Inspecting the app.component.ts file
Inspecting app.component.html
Inspecting app.component.css
Inspecting navbar.component.ts
Inspecting navbar.component.html
Inspecting the completed layout in Angular 8
Chapter 8: Build another Bootstrap layout in Angular
8.1. Start building a new Angular app on Stackblitz
8.2. Removing redundant files
8.3. Adding Bootstrap from a CDN
Chapter 9: Build a Bootstrap 4 layout and track it with Git
9.1 Register a new account on Github
9.2 Start tracking your code with Github Desktop
9.3 Building the landing page
Chapter 10: Build an AirBnB clone layout in Bootstrap 4
10.1 Planning our layout's structure
10.2 Add a new repository to Github
10.3 Add the starter Bootstrap template to index.html
10.4 Adding all the container-fluid divs
10.5 Adding the large background image area
10.6 Adding the card with input fields
10.7 Adding the two datepickers
10.8 Adding the dropdowns
10.9 Add the Become a host card
10.10 Working on the testimonials section
10.11 Adding the 5-star ratings
10.12 Add the same image height on all cards in Bootstrap 4
10.13 Rebuilding the Travelling with AirBnB section
10.14 Adding the fourth section to our AirBnB clone homepage
10.15 Add the When are you travelling section
10.16 Adding the footer section
10.17 Live preview of the AirBnB Bootstrap 4 clone
Conclusion
Chapter 11: Build a Shopify clone layout in Bootstrap 4
11.0 Setting up the project
11.1 Building the navbar
11.2 Hero section
11.3 Showcase section
11.4 Support section
11.5 Merchants section
11.6 Signup section
11.7 Footer area
Chapter 12: Conclusion
12.1 Concepts covered
12.2 Where to go from here?