Bootstrap layouts in depth
Minimum price
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

Ajdin Imsirovic
Ajdin Imsirovic

Ajdin Imsirovic is a full-stack web developer who has published several courses (way back in 2015) on the subject of web design and web development. 

Before self-publishing books on Leanpub, he authored four books on front-end development for Packt Publishing:

  1. Vue CLI 3 Quick Start Guide (Build and maintain Vue.js applications quickly with the standard CLI), May 2019
  2. Vue.js Quick Start Guide (Learn how to build amazing and complex reactive web applications easily using Vue.js), October 2018
  3. Elm Web Development (An introductory guide to building functional web apps using Elm), March 2018
  4. Bootstrap 4 Cookbook (Over 75 recipes to help you build elegant and responsive web applications with Bootstrap 4), June 2017

Additionally, he's published a number of books on the Leanpub platform, specifically:

  1. A Better Way to Learn JavaScript - The Basics:
  2. A Better Way to Learn JavaScript - Built-in Objects:
  3. A Better Way to Learn JavaScript - Useful Snippets:
  4. A Better Way to Learn JavaScript - Mini Apps:
  5. A Better Way to Learn JavaScript - Advanced JavaScript:
  6. Angular From Scratch:
  7. Vue.js From Scratch:
  8. React from Scratch:
  9. Building Amazing Layouts - Learn the Basics of HTML5, CSS3, and Bootstrap 5:
  10. Building Amazing Layouts - Bootstrap 5 Layouts in Depth:
Ajdin Imsirovic

Episode 208

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?

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.

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 $12 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

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub