Bootstrap layouts in depth
$7.99
Minimum price
$9.99
Suggested price
Bootstrap layouts in depth
Building Amazing Layouts (Book 2)
About the Book
The second book in the Building Amazing Layouts book series covers the ins and outs of Bootstrap 4, with lots of practical examples, including Angular, Vue (in progress), React (in progress), SCSS, Elm, jQuery, and vanilla JavaScript (in progress).
About the Author
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
containerandcontainer-fluid -
The
container-fluidandcontainerclass atxsresolutions -
The
container-fluidandcontainerclass atsmresolutions - Conclusion
-
Chapter 2: Bootstrap 4 rows and responsive columns
-
The
rowBootstrap 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
-
The
-
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-fluidclass 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-fluiddivs - 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?
The Leanpub 60 Day 100% Happiness Guarantee
Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.
Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.
You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!
So, there's no reason not to click the Add to Cart button, is there?
See full terms...
80% Royalties. Earn $16 on a $20 book.
We pay 80% royalties. That's not a typo: you earn $16 on a $20 sale. If we sell 5000 non-refunded copies of your book or course for $20, you'll earn $80,000.
(Yes, some authors have already earned much more than that on Leanpub.)
In fact, authors have earnedover $13 millionwriting, publishing and selling on Leanpub.
Learn more about writing on Leanpub
Free Updates. DRM Free.
If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).
Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.
Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.
Learn more about Leanpub's ebook formats and where to read them
