Leanpub Header

Skip to main content
Go to Leanpub.comLeanpub

Bootstrap layouts in depth

Building Amazing Layouts (Book 2)

Ajdin Imsirovic

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).

The author is letting you choose the price you pay for this book!

Pick Your Price...
PDF
EPUB
WEB
About

About

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).

Share this book

Categories

CSS

Feedback

Email the author

Price

Pick Your Price...

Minimum price

$7.99

$9.99

You pay

$9.99

Author earns

$7.99
$

All prices are in US $. You can pay in US $ or in your local currency when you check out.

EU customers: prices exclude VAT, which is added during checkout.

...Or Buy With Credits!

Number of credits (Minimum 1)

1
The author will earn $12.00 from your purchase!
You can get credits monthly with a Reader Membership

Author

About the Author

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: https://bit.ly/abwtljs1
  2. A Better Way to Learn JavaScript - Built-in Objects: https://bit.ly/abwtljs2
  3. A Better Way to Learn JavaScript - Useful Snippets: https://bit.ly/abwtljs3
  4. A Better Way to Learn JavaScript - Mini Apps: https://bit.ly/abwtljs4
  5. A Better Way to Learn JavaScript - Advanced JavaScript: https://bit.ly/abwtljs5
  6. Angular From Scratch: https://bit.ly/ai-afs
  7. Vue.js From Scratch: https://bit.ly/ai-vfs
  8. React from Scratch: https://leanpub.com/react-from-scratch
  9. Building Amazing Layouts - Learn the Basics of HTML5, CSS3, and Bootstrap 5: https://bit.ly/bldamzlyts1
  10. Building Amazing Layouts - Bootstrap 5 Layouts in Depth: https://bit.ly/bldamzlyts2
Leanpub Podcast

Episode 208

An Interview with Ajdin Imsirovic

Contents

Table of Contents

Chapter 1: Bootstrap 4 containers and contextual colors

  1. The structure of every HTML page
  2. Adding Bootstrap 4 link meta information
  3. Adding background color to an HTML element in Bootstrap 4
  4. Containers in Bootstrap 4
  5. Completing our first Bootstrap 4 layout
  6. The difference between container and container-fluid
  7. The container-fluid and container class at xs resolutions
  8. The container-fluid and container class at sm resolutions
  9. Conclusion

Chapter 2: Bootstrap 4 rows and responsive columns

  1. The row Bootstrap 4 CSS class
  2. Bootstrap 4 column grid
  3. Adding the HTML structure to our layout
  4. Adding Bootstrap’s column grid
  5. Adding borders to our rows
  6. Margin and padding utility classes in Bootstrap 4
  7. Conclusion

Chapter 3: Bootstrap 4 components

  1. Introducing components in Bootstrap
  2. Primary and secondary layout components
  3. Building a Bootstrap 4 layout with primary layout components only
  4. Adding jQuery to Bootstrap 4 layout
  5. Adding the breadcrumb component
  6. Adding the carousel component
  7. Adding the card component
  8. Adding the jumbotron component
  9. Improving our layout
  10. Adding better images to out layout
  11. Fixing the color scheme and the dummy text
  12. Fixing margin issues and centering newsletter subscription
  13. Fixing the zoomed out “effect”
  14. Conclusion

Chapter 4: Improving Bootstrap’s official examples

  1. Upgrading the official Album layout
  2. Improving the upgraded Album layout
  3. Making dark letters on dark background visible with Bootstrap’s contextual bg-* classes
  4. Adding transparency to the background color
  5. Conclusion

Chapter 5: Working with SCSS in Bootstrap 4

  1. Copying CSS from another Bootstrap layout into our own
  2. Locating the theme’s main CSS file and unminifying it
  3. Copying the theme’s CSS file
  4. Pasting in the copied CSS code into the default theme
  5. Saving the changes to our theme and trimming the unused CSS
  6. Trimming unused CSS with Chrome’s devtools
  7. Completing the changes to the pricing example layout
  8. Removing the margin between the navbar and the pricing section and making the pricing background drop
  9. Fixing the buttons
  10. Conclusion

Chapter 6: Building a typography-focused layout in Bootstrap 4

  1. Why Koala?
  2. Why SCSS?
  3. Installing and using Koala
  4. Adding Bootstrap 4.3 SCSS files
  5. Compiling SCSS with the Koala app
  6. Changing default Bootstrap variables
  7. Downloading Google fonts
  8. The mockup and the starter layout
  9. Choosing the code editor
  10. Opening the starter template
  11. Adding the navbar
  12. Visually comparing the navbars
  13. Finding the styles to update using developer tools
  14. What is the & in HTML
  15. Adding the h1 to our site
  16. Using containers to quickly structure our layouts
  17. Bootstrap layouts as layers of containers
  18. 1. Wrapping container in container-fluid
  19. 2. Using container without wrapping it inside container-fluid
  20. 3. Using container-fluid class without a container inside of it
  21. Understanding spacing utility classes in Bootstrap
  22. Our layout, improved with containers
  23. Adding images and text to our layout
  24. Adding the columns
  25. Polishing up our layout
  26. Source ordering our column grid
  27. Testing layout variations using the JavaScript console in the developer tools
  28. Making the footer stick to the bottom
  29. Improving typography
  30. Conclusion

Chapter 7: Modularize your Bootstrap 4 layouts

  1. How to improve our layout-building process?
  2. Understanding how Angular works
  3. How to split HTML files with Angular
  4. The class file in an Angular template
  5. How does the class file add functionality in an Angular component?
  6. Understanding the minimal code of a component’s class file
  7. Setting up our Angular minimal app
  8. Inspecting our app’s code on Stackblitz
  9. The purpose of a CDN
  10. The contents of the src folder
  11. #1: The app module imports all the components
  12. #2: The app.component.html imports all the other HTML files
  13. Inspecting the app.module.ts file
  14. Inspecting the app.component.ts file
  15. Inspecting app.component.html
  16. Inspecting app.component.css
  17. Inspecting navbar.component.ts
  18. Inspecting navbar.component.html
  19. Inspecting the completed layout in Angular 8

Chapter 8: Build another Bootstrap layout in Angular

  1. 8.1. Start building a new Angular app on Stackblitz
  2. 8.2. Removing redundant files
  3. 8.3. Adding Bootstrap from a CDN

Chapter 9: Build a Bootstrap 4 layout and track it with Git

  1. 9.1 Register a new account on Github
  2. 9.2 Start tracking your code with Github Desktop
  3. 9.3 Building the landing page

Chapter 10: Build an AirBnB clone layout in Bootstrap 4

  1. 10.1 Planning our layout’s structure
  2. 10.2 Add a new repository to Github
  3. 10.3 Add the starter Bootstrap template to index.html
  4. 10.4 Adding all the container-fluid divs
  5. 10.5 Adding the large background image area
  6. 10.6 Adding the card with input fields
  7. 10.7 Adding the two datepickers
  8. 10.8 Adding the dropdowns
  9. 10.9 Add the Become a host card
  10. 10.10 Working on the testimonials section
  11. 10.11 Adding the 5-star ratings
  12. 10.12 Add the same image height on all cards in Bootstrap 4
  13. 10.13 Rebuilding the Travelling with AirBnB section
  14. 10.14 Adding the fourth section to our AirBnB clone homepage
  15. 10.15 Add the When are you travelling section
  16. 10.16 Adding the footer section
  17. 10.17 Live preview of the AirBnB Bootstrap 4 clone
  18. Conclusion

Chapter 11: Build a Shopify clone layout in Bootstrap 4

  1. 11.0 Setting up the project
  2. 11.1 Building the navbar
  3. 11.2 Hero section
  4. 11.3 Showcase section
  5. 11.4 Support section
  6. 11.5 Merchants section
  7. 11.6 Signup section
  8. 11.7 Footer area

Chapter 12: Conclusion

  1. 12.1 Concepts covered
  2. 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...

Earn $8 on a $10 Purchase, and $16 on a $20 Purchase

We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earned over $14 million writing, 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