Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Learning Bootstrap 4 by Building Projects
Learning Bootstrap 4 by Building Projects

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

Arrow left icon
Profile Icon Eduonix Learning Solutions
Arrow right icon
AU$37.99 AU$42.99
eBook Aug 2018 218 pages 1st Edition
eBook
AU$37.99 AU$42.99
Paperback
AU$53.99
Subscription
Free Trial
Renews at AU$24.99p/m
Arrow left icon
Profile Icon Eduonix Learning Solutions
Arrow right icon
AU$37.99 AU$42.99
eBook Aug 2018 218 pages 1st Edition
eBook
AU$37.99 AU$42.99
Paperback
AU$53.99
Subscription
Free Trial
Renews at AU$24.99p/m
eBook
AU$37.99 AU$42.99
Paperback
AU$53.99
Subscription
Free Trial
Renews at AU$24.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Learning Bootstrap 4 by Building Projects

Bootstrap 4 Features

In this chapter, we are going to learn about Bootstrap 4. We will basically get a general introduction to how Bootstrap works through the Hello-World program that we're going to create. This chapter starts off by introducing you to the changes that Bootstrap 4 offers. These changes are pretty exciting, and there are some good changes regarding the grids, fonts, and a lot of other things. We will go into detail about what these new changes are. We will then look into the code editor that we're going to use it's free, popular, easy to use, and it's cross-platform as well.

We will then get into initializing a new Bootstrap 4 project. Different people have their own ways of doing this — you can either work with the Content Delivery Network (CDN), which means you're always going to be dependent on an internet connection...

What's new in Bootstrap 4 – introducing new features

In this section, we're going to see what's new in Bootstrap 4. As we go through this book, we're also going to see examples of these new features in action as we build up our different projects.

Bootstrap 4 has got quite a few new features and we will be looking at the more popular ones. Flexbox is one of the main features that has been added, also known as CSS3 Flexible Box, and it's used a lot with the grid. It allows you to accomplish the more popular layouts as well as complex layouts easily, so if you were trying to do the same thing in CSS, it would be a little more difficult and challenging. Therefore, we're going to see how Flexbox really helps make the different kinds of layout that you want to achieve in an easier manner.

LESS has been replaced with Sass, so we will see a few examples...

Migrating to v4

Without further ado, open your favorite browser and visit the Migrating to Bootstrap 4 documentation page at https://getbootstrap.com/docs/4.0/migration/:

As you can see on the Migrating to v4 documentation page, there are several things on the left, and at the bottom we have Migration. Here, you will see a lot of the different changes that Bootstrap 4 introduced, of which a few were discussed earlier. It has dropped the support for IE8, IE9, and iOS6, which is only for IE10+ and iOS 7+. It has mobile browser support as well.

In the Global changes section, you will see some of the big changes. Flexbox is enabled by default, so they're getting away from things such as floats; they've switched from LESS to Sass for CSS; and another thing is they're favoring rems instead of px. px is still being used, but there's a lot more move toward rem, and...

Setting up the code editor

We are going to use the Visual Studio Code (VS Code) editor for our book. Let's go to https://code.visualstudio.com/, where you can go to the home page and learn more about the editor. Of course, as we go through this book, we're going to learn about what we need to know rather than just go through everything and do a whole tour of this editor, but here are some basics about the editor.

It's cross-platform, so you can use it on Windows or Mac, and it's free to use. One of the reasons I really prefer using this editor is, other than it being a great editor, you have an integrated terminal so you don't have to keep going out to your terminal or command line to run different commands on the command prompt. So, you can stay right here, inside of your editor, and pretty much do everything. As we move forward through this book, the...

Initializing a new project

Let's go to the Bootstrap website at https://getbootstrap.com. If you want to get the current release, you can just click the Download button and do an installation. However, that's not the route we're going to take. Here, I'll show you how we're going to install Bootstrap:

So, the current version is v4.1.3, as shown in the preceding screenshot. If you've never seen this website before, there's a lot of great documentation on Bootstrap. If you go to the menu and click on Documentation, we're going to use the Quick start to get the code going inside of VS Code. Then, we're going to do some initialization with another tool:

The website also has a few examples regarding what you can do with Bootstrap. You can check out these examples by clicking the Examples tab in the menu, as shown in the following screenshot...

A quick introduction to Sass

In this section, we're going to look at a quick introduction to Sass, so for anyone who's never used Sass, this is just going to get you up to speed on what it is and why we want to use it. If you have used it, this is just going to be a quick refresher. So, let's go to sass-lang.com:

This is the website where you can learn all about Sass, and the documentation is also really good. If you want to explore more than what we're going to do here, this is the place to go to. So, if we go into LEARN SASS, you can really get a quick introduction into how it's used.

If you scroll down the page, you will see an SCSS syntax, as shown in the following code. We're going to basically make use of variables periodically. If you've ever used Ruby, this might look familiar, since it's written in Ruby:

$font-stack: Helvetica...

Gulp

Now we're going to move on to building out our gulpfile. The first thing we want to do is put a gulpfile in the project area rather than the src file area. So, let's create a new file and call it gulpfile.js. The folder structure looks as follows:

The filename is important – you need to call it gulpfile.js so that Gulp can recognize it. Regarding our folder structure, this can be basically anything project-related or metadata-related for the forms of the parent folder, as shown previously. We have the src folder, where our actual web files are going to go, which are for displaying information on the website, or the kind of dependencies the website might need. This is how the folder structure is going to work as we go through our other different projects as well – this is going to kind of be a template.

Now, inside the gulpfile, we are going to create...

Hello world example

In the last section, we completed our gulpfile, so now we will add comments to the different sections of the code. We're also going to try and give this a run. We may have to do a little bit of debugging because there's quite a bit of code we had written and a lot of opportunities to make some syntax errors. Here, we'll see what happens when we try to get this to run, so let's get started. Most of the code is fairly descriptive because of the names that were given. The first two tasks were easy to understand; what the function does is gather the locations we want to compile, runs them through the compiler, drops them at a destination, and then we have our browser injection. Now let's look at the third task where we are launching the server. We will have to add comments, as follows:

//run sass when server runs
//run server
//watch for...

Summary

Let's quickly summarize what we've covered in this module. So, we got an introduction to Bootstrap 4 and what's new inside it. We've seen some great additions such as the Flexbox, the different changes they've done to the grids, we have new utilities that have come through, we have cards, and some of the new utilities such as Tether and the tool-tipping and the UI layout. Cards really are going to be a great UI feature that we can use and will probably look good on home pages or in sidebars. We also looked at our code editor, VS Code, which is made by Microsoft. It's a paired-down version of their IDE that's used to compile languages.

We also saw the integrated command-line tool and how to create a new project. Now, we have a template we can use going forward, which has got a particular folder structure. We've got Gulp for our task...

Left arrow icon Right arrow icon
Download code icon Download Code

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.

Who is this book for?

Learning Bootstrap 4 by Building Projects is for web developers who want to build real-world responsive websites from scratch using Bootstrap 4. Basic knowledge of HTML and CSS is required.

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

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Aug 31, 2018
Length: 218 pages
Edition : 1st
Language : English
ISBN-13 : 9781789340143
Tools :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Aug 31, 2018
Length: 218 pages
Edition : 1st
Language : English
ISBN-13 : 9781789340143
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
AU$24.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
AU$249.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just AU$5 each
Feature tick icon Exclusive print discounts
AU$349.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just AU$5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total AU$ 182.97
Responsive Web Design by Example
AU$60.99
Learning Bootstrap 4 by Building Projects
AU$53.99
Mastering Bootstrap 4
AU$67.99
Total AU$ 182.97 Stars icon

Table of Contents

8 Chapters
Introduction Chevron down icon Chevron up icon
Bootstrap 4 Features Chevron down icon Chevron up icon
Photosharing Website Chevron down icon Chevron up icon
Building a Resume Website Chevron down icon Chevron up icon
Social Network Frontend Chevron down icon Chevron up icon
Agency Website Chevron down icon Chevron up icon
Lightbox Website Chevron down icon Chevron up icon
Other Books You May Enjoy Chevron down icon Chevron up icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.