What do you get with a Packt Subscription?

Free for first 7 days. £16.99 p/m after that. Cancel any time!

Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!

50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

Thousands of reference materials covering every tech concept you need to stay up to date.

Subscribe now

View plans & pricing

This book is a practical guide that will help you create modern-day apps with the use of Bootstrap 4, a powerful JavaScript library. It starts off with an introduction to Bootstrap, where we learn about some of the differences coming into Bootstrap 4 that didn't exist in Bootstrap 3. We will also be covering the new features that Bootstrap 4 offers. So, let's start with the sites that we have: we've got a photo-sharing site; this is going to use a lightbox and it's also our first introduction to using Bootstrap 4. Now, Bootstrap has a strict grid column setup where you have 12 columns, but you can divide them up in any way you like. We're also going to look at how you can even go outside the 12, which is a limit for Bootstrap. For example, you have added two columns of span 5 and 10 respectively; basically, when you sum up they're going out of the 12, but things still kind of work out mostly in the same way. So, depending on the complexity of your website, you miss and you go over the 12, we're still going to see things work out pretty much fine.

Next, we have our resume site, which gets a little more complex because of the layout. We're going to use multiple rows, and we're going to have our columns deal with the different kinds of icons. Later on, we will check out Font Awesome, which is really going to come into play when we start getting into some of the more complex websites, because we're not actually using icon images, we're using Font Awesome instead, which acts as a font but really gives us icons. We'll look at a social networking website, where we're going to learn what cards are all about. We're going to look at how to create bubble-style comments, and some other different kinds of more complex layout features to get a particular kind of look to your page. Next is the agency website—a very clean, very nice-looking website. It's going to make heavy use of Font Awesome and some of the different icons that are available to us. Then we'll look at another photo site that we're going to integrate with a different lightbox that doesn't require JavaScript.

There is a lot going on. We're going to go through a great introduction and get some hands-on practice with Bootstrap 4, so let's jump into it.

Key benefits

Create 5 responsive web apps with Bootstrap 4

Use elements and full Bootstrap toolkit to construct custom animations and templates

Design, customize, and create existing UIs and media aggregator apps

Description

Bootstrap, the world’s most popular frontend framework, is an open source toolkit for building web applications with HTML, CSS, and JavaScript. Learning Bootstrap 4 by Building Projects covers the essentials of Bootstrap 4 along with best practices. The book begins by introducing you to the latest features of Bootstrap 4. You will learn different elements and components of Bootstrap, such as the strict grid system, Sass, which replaced Less, flexbox, Font Awesome, and cards. As you make your way through the chapters, you will use a template that will help you to build different kinds of real-world websites, such as a social media website, a company landing page, a media hosting website, and a profile page, with ease. By the end of this book, you will have built websites that are visually appealing, responsive, and robust.

What you will learn

Get familiar with the new features of Bootstrap 4

Understand how the new grid system works

Learn to use the Sass tool in Bootstrap

Automate your tasks using the task runner, Gulp

Use Lightbox to build a photo gallery

Master best practices for HTML, CSS, and JavaScript

What do you get with a Packt Subscription?

Free for first 7 days. £16.99 p/m after that. Cancel any time!

Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!

50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

Thousands of reference materials covering every tech concept you need to stay up to date.

Subscribe now

View plans & pricing

Frequently bought together

£36.99

Learning Bootstrap 4 by Building Projects

£29.99

£32.99

Total £ 99.97

DRG Oct 10, 2018

The idea behind this book is a good one. However, this book is sorely in need of a professional editor.Many of the example images used to show what you should see after progressing to that point in the code don't match what the code will produce... at that point. One image showed styling that would not be rendered from the code until about 100+ Kindle locations later. I have not done a complete check of this, but it doesn't appear that even the example code you can download from the publisher's website would not render the examples either. Its as if no one sat down and followed the instructions, typing in the code as they went, to make sure the rendered pages match the examples of what to expect to see. There are example images that will never look the way they do in the book because the CSS needed to make some things happen is never added in the instructions. (Though, I have not yet finished the entire book.)If the author wrote one more "go ahead and" I would've asked for a refund. The entire book is riddled with fluff. The kind of extraneous wordiness common in the first drafts of nearly every how-to book ever written but normally edited out before publishing. Some sentences actually make no sense at all. The kinds of normal mistakes made, frequently, when re-writing a sentence but not re-reading it to be sure it still worked. The perspective and tense change without rhyme or reason. There are the beginnings of an explanation that are aborted after a "... but first ..." and the preempted topic has little to do with the code just completed or about to start.The explanation of what the code was doing is so poor its as if the writer has no idea why things are done this way. It reads like it was all just coped it from someone else's work without the writer understanding the topic. Or, it could also be read as if they assume too much existing skills but then that would mean the simplistic explanations are unneeded. For example, at one point the code includes adding a navigation bar with a class rule of "navbar navbar-expand-md navbar-light bg-light fixed-top." The explanation for that line? "The first one is going to be our navbar, which is basically the root class that we want to have some navbar functionality. Next, we have navbar-expand-md to make our navbar expand out, and we're going to have it triggered on a medium size. We're going to add navbar-light, which provides colors, and we're going to have a background color, bg-light. Finally, we're going to fix it to the top." Okay, what does the initial navbar do? What functionality do we get by including that? What are the implications of using navbar-expand-md? What other choices do we have and how do you add a non-expanding section? What rules will Bootstrap follow when expanding? Navbar-light provides what colors: white, black, rainbow? Do is it apply rules for link colors, background colors, pseudo-element colors, font colors, border-colors? And is the bg-light color a specific color? How do you change what color bg-light applies? Does it override any rules in navbar-light? What the other options besides navbar- and bg-light: -md, -dk? When building out the home page in the first few chapters, columnsget definitions like "col-lg-6" and the explanation is again very light on details. What do the three positions represent? Can you leave any of them out? What are the options? Some of it does get covered, but not until much later. There isn't even an explanation why one set of columns has a 6, one set has a 5 and yet another uses 4.One set of instructions to add a section to the home page appears in two different places making it look like it should appear twice in two different places on the same page. Often it is unclear where a snippet of code will go in the overall page.I spent more time researching the class names on w3schools and other sites, double checking my code to see why my version didn't match the version from the book, adding my own snippets of code to make my version match the examples in the book than I did reading and typing the code from the book. And you want to type the code not just copy and paste it. You learn, and retain, so much more by actually typing out the code. I visited the website for the publisher and there are a lot of books. If this book is any indication, someone there is hammering out a lot work, but the absence of an editor makes readers work harder than they should to overcome the weaknesses of the "final" product.To be fair, I have learned from the book (that's why it is a 2-star not 1). The initial set up in chapter 1 really helped me (after again, doing a lot of online research because there is nothing in the book about those of us using XAMPP, WAMP, or similar instead of the Apache and MySQL that came with the computer's OS). Troubleshooting my own mistakes versus the mistakes in the book taught me some things, but life is way too short for me to spend this much time pulling out my hair to compensate for others unwillingness or inability to proof and edit their work. Until the publisher matures and takes responsibility for their effect their readers' time and attention, I can't recommend anyone buy this or any other title from Eduonix Learning Solutions/Pact.

Amazon Verified review

Learning Bootstrap 4 by Building Projects: Develop 5 real-world Bootstrap 4.x projects from scratch

What do you get with a Packt Subscription?