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
Free Learning
Arrow right icon
Learning Bootstrap 4
Learning Bootstrap 4

Learning Bootstrap 4: Modern, Elegant and Responsive Web Design Made Easy , Second Edition

eBook
€8.99 €26.99
Paperback
€32.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
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

Shipping Address

Billing Address

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

Learning Bootstrap 4

Chapter 2. Using Bootstrap Build Tools

In the previous chapter, we reviewed the process for setting up a basic Bootstrap template with the compiled framework files. What if you need to customize your Bootstrap build or you want to use additional development tools to make your life easier? This is possible through the use of a number of great tools. In this chapter, I'll show you how to install, set up, and use a number of build tools such as Node.js, Grunt.js, and Harp.js to extend Bootstrap and reveal the real power of the framework.

Different types of tools

When working with Bootstrap, there are really three types of tools you need to be aware of. The first two are Node.js and Grunt.js. These are build <ie>tools</ie> and they take the development framework files and build them into the final files that you want to include in the production version of your projects. You wouldn't include development files on your actual production web server, as they are tools. You want to compile your files into production-ready HTML, CSS, and JavaScript that a web server can read and a browser can translate into a website.

The second type of tool you might want to use is a static website generator such as Harp.js. I talked a little bit about Harp in the first chapter but I will review it again in a little more detail. The main advantages of using Harp are things such as variables and partials in HTML, and a reusable-template-based system for your pages that allows you to reuse code.

The final types of tool you can use...

Download the Bootstrap source files

To allow us to compile source files into production, we now need to download the Bootstrap source files and install them on our local machine. Head to the following URL and download the Bootstrap source files: http://v4-alpha.getbootstrap.com/getting-started/download/.

Once you've download the files, unzip the package and move the directory to where you want it to live on your computer. If you just want to leave it on the desktop for now, that is fine. You can safely move the project around before or after editing it. The next thing you need to do is install the project dependencies. First, navigate to the root of the download package in the Terminal. It will likely be called something like bootstrap-4.0.0-alpha.2. Once you are there, run the following command to install the files:

$ npm install

If you get any type of error, try including sudo at the beginning of the command.

Note

If you are using sudo, you'll likely be prompted for your system...

Setting up the blog project

As I mentioned earlier, we're going to be building a blog throughout this book as we learn to use Bootstrap 4. Let's start by creating a new directory and call it something like Bootstrap Blog. Open up that folder and create the following sub-directories inside it:

  • css
  • fonts
  • img
  • js
  • partial

css

The css directory will hold the Bootstrap framework's CSS file and a custom theme file which we'll build later on. Go to the Bootstrap source file directory and locate the dist/css folder. From there, copy bootstrap.min.css to our new blog project's css directory.

fonts

The fonts directory will hold either a font icon library such as Glyphicon or Font Awesome. Previously, Bootstrap shipped with Glyphicon but they have dropped it in version 4. If you wish to use it, you'll need to download the icon font set and then drop the files into this directory. You could also include a web font that you may want to use on your project in this directory. If you...

Setting up the JSON files

Each Harp project has at least two JSON files that are used for configuring a project. JSON stands for JavaScript Object Notation and it's a lightweight format for data interchange. If that sounds complicated, don't worry about it. The actual coding of a JSON file is actually really straightforward, as I will show you now.

The first is called _harp.json and it's used for configuring global settings and variables that will be used across the entire blog. In this case, we're going to set up a global variable for the name of our project that will be inserted into every page template. Start by creating a new file in the root of blog project and call it _harp.json. Within the file, insert the following code:

{ 
   "globals": { 
      "siteTitle": "Learning Bootstrap 4" 
   } 
} 

Here's what's happening in this code:

  • We're using the globals keyword so any variables under this will be available across all of...

Creating our first page template

For our first page template, we're going to create our Home or index page. In the root of the blog project, create a new file called index.ejs. Note this file is not prepended with an underscore like the previous files. With Harp, any file that has the underscore will be compiled into another and ignored when the files are copied into the production directory. For example, you don't want the compiler to spit out layout.html because it's fairly useless with the content of the Home page. You only want to get index.html, which you can deploy to your web server. The basic thing you need to remember is to not include an underscore at the beginning of your page template files. Once you've created the file, insert the following code:

<div class="container"> 
  <div class="row"> 
    <div class="col-lg-12"> 
      <h1>hello world!</h1> 
    </div> 
  </div> 
</div> ...

Different types of tools


When working with Bootstrap, there are really three types of tools you need to be aware of. The first two are Node.js and Grunt.js. These are build <ie>tools</ie> and they take the development framework files and build them into the final files that you want to include in the production version of your projects. You wouldn't include development files on your actual production web server, as they are tools. You want to compile your files into production-ready HTML, CSS, and JavaScript that a web server can read and a browser can translate into a website.

The second type of tool you might want to use is a static website generator such as Harp.js. I talked a little bit about Harp in the first chapter but I will review it again in a little more detail. The main advantages of using Harp are things such as variables and partials in HTML, and a reusable-template-based system for your pages that allows you to reuse code.

The final types of tool you can use with...

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • This book shows how to take advantage of the all new features introduced in Bootstrap
  • Learn responsive web design and discover how to build mobile-ready websites with ease
  • Find out how to extend the capabilities of Bootstrap with a huge range of tools and plugins, including jQuery,
  • Do more with JavaScript and learn how to create an enhanced user experience

Description

Bootstrap, the most popular front-end framework built to design elegant, powerful, and responsive interfaces for professional-level web pages has undergone a major overhaul. Bootstrap 4 introduces a wide range of new features that make front-end web design even simpler and exciting. In this gentle and comprehensive book, we'll teach you everything that you need to know to start building websites with Bootstrap 4 in a practical way. You'll learn about build tools such as Node, Grunt, and many others. You'll also discover the principles of mobile-first design in order to ensure your pages can fit any screen size and meet the responsive requirements. Learn to play with Bootstrap's grid system and base CSS to ensure your designs are robust and that your development process is speedy and efficient. Then, you'll find out how you can extend your current build with some cool JavaScript Plugins, and throw in some Sass to spice things up and customize your themes. This book will make sure you're geared up and ready to build amazingly beautiful and responsive websites in a jiffy.

Who is this book for?

If you want to learn to build enterprise-level websites efficiently with Bootstrap, this book is for you. You must have a basic and fundamental understanding of HTML, CSS, and JavaScript; however, there is no need to have prior Bootstrap experience.

What you will learn

  • Fire up Bootstrap and set up the required build tools to get started
  • See how and when to use Flexbox with the Bootstrap layouts
  • Find out how to make your websites responsive, keeping in mind Mobile First design
  • Work with content such as tables and figures
  • Play around with the huge variety of components that Bootstrap offers
  • Extend your build using plugins developed from JavaScript
  • Use Sass to customize your existing themes
Estimated delivery fee Deliver to Netherlands

Premium delivery 7 - 10 business days

€17.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Aug 26, 2016
Length: 246 pages
Edition : 2nd
Language : English
ISBN-13 : 9781785881008
Vendor :
Bootstrap
Languages :
Tools :

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
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

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to Netherlands

Premium delivery 7 - 10 business days

€17.95
(Includes tracking information)

Product Details

Publication date : Aug 26, 2016
Length: 246 pages
Edition : 2nd
Language : English
ISBN-13 : 9781785881008
Vendor :
Bootstrap
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.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
€189.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 €5 each
Feature tick icon Exclusive print discounts
€264.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 €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 106.97
Bootstrap 4 By Example
€36.99
Mastering Bootstrap 4
€36.99
Learning Bootstrap 4
€32.99
Total 106.97 Stars icon
Banner background image

Table of Contents

9 Chapters
1. Introducing Bootstrap 4 Chevron down icon Chevron up icon
2. Using Bootstrap Build Tools Chevron down icon Chevron up icon
3. Jumping into Flexbox Chevron down icon Chevron up icon
4. Working with Layouts Chevron down icon Chevron up icon
5. Working with Content Chevron down icon Chevron up icon
6. Playing with Components Chevron down icon Chevron up icon
7. Extending Bootstrap with JavaScript Plugins Chevron down icon Chevron up icon
8. Throwing in Some Sass Chevron down icon Chevron up icon
9. Migrating from Version 3 Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.2
(6 Ratings)
5 star 33.3%
4 star 16.7%
3 star 0%
2 star 33.3%
1 star 16.7%
Filter icon Filter
Top Reviews

Filter reviews by




Busch Markus Oct 11, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Covers everything new with Bootstrap and helps youget start with Harps, Sass and other helpful tools. I'm an experienced Bootstrap 3 user.
Amazon Verified review Amazon
P S Jun 07, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Happy
Amazon Verified review Amazon
Vincent Chan Oct 29, 2016
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
Some Code is inconsistence with content in paragraph elaboration.
Amazon Verified review Amazon
John F. Eakins Feb 11, 2021
Full star icon Full star icon Empty star icon Empty star icon Empty star icon 2
Well, what can I say? It starts out ok, but then he goes off the beaten path and not only bootstrap, but a whole bunch of different things unrelated to bootstrap. He wants you to learn all these different things and try to learn bootstrap too???? What an idiot. When I want to learn a subject, I want to learn that subject, not 4 or 5 different things that may go with it, but are unrelated to it and take away from the focus and joy of learning that subject. This idiot needs to learn how to write a learning book on a subject without all the extra fluff He wants to put with it. If I wanted to learn 13 different frameworks, I'll learn them one at a time, not all together in confusion. To me, this book is totally worthless.
Amazon Verified review Amazon
Randall Stewart Apr 20, 2018
Full star icon Full star icon Empty star icon Empty star icon Empty star icon 2
There are two problems with this book. First, in addition to Bootstrap, it uses a templating system called Harp. That's all well and good, but the author makes little to no effort to distinguish a Boostrap feature from a Harp feature, so you come away with a muddled understanding of both. That leads to the 2nd problem. This book is more of a tutorial than a text. It uses the tired old "let's build an application together!" approach, that has you imitate the examples without being taught much of how or why they work, or what other options might have been used. If you already understand the theory behind bootstrap (or you don't care) and you are looking for a copy-and-paste tutorial to practice, then you would probably rate the book higher. But if you are looking for systematic coverage of the theory of operation, the raw materials, and tools that come with the "Bootstrap 4 Toolbox," so you can put them together in your own creative ways, this book is disappointing.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela