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
Bootstrap 4 Cookbook
Bootstrap 4 Cookbook

Bootstrap 4 Cookbook: Solutions to common problems faced in Responsive Web Design

eBook
€8.99 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.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

Bootstrap 4 Cookbook

Layout Like a Boss with the Grid System

 

This chapter will cover the following topics:

  • Preparing a static server with Bootstrap 4, Harp, and Grunt
  • Deploying your web project with Surge
  • Splitting up our Harp project into partials
  • Using containers with margin and padding utility classes
  • Adding columns in a row
  • Making col-* classes work
  • Building a simple page with the default grid
  • Building a real-life web page example with the default grid

Introduction

In this chapter, we will start off by installing a static server with Harp, locally on Windows. Where there are differences between Windows and Ubuntu-based c9, they will be pointed out.

The way we set up Harp will allow for a truly modular approach to develop recipes throughout the rest of this book, helping us keep our code DRY.

Preparing a static server with Bootstrap 4, Harp, and Grunt

In this recipe, we will set up a static server with the help of Harp (available at https://harpjs.com/). We will use Grunt to set up the foundation for tasks to be run, and we will start with the grunt-contrib-copy, grunt-contrib-sass, and grunt-watch tasks. We will use Bootstrap 4 source code mainly because of its partial Sass files to begin with. This first recipe in this chapter will be the foundation for all the other recipes in this chapter. Hopefully, you will be able to appreciate the power that the combination of these technologies brings when joined with the Cloud9 web-based IDE.

This recipe is relatively long. If you just want to get up and run as fast as possible, you can skip the setup listed in this recipe and just clone the GitHub repository with all the files set up for you, at https://github...

Deploying your web project with Surge

In this recipe, we will serve the web project we created with Surge. For a quick introduction to the way it works, visit its website, surge.sh.

If you would like to know more about Surge, visit this Medium page--http://bit.ly/2jDJ7L1 (URL shortened as the original link was too long).

This short recipe will marry the workflow from the previous recipe, the relatively long setup of Harp on Cloud9 IDE, with a simple way to serve the completed page on a custom URL. This should be quite a time saver and a powerful way to combine Cloud9 IDE, Harp, and Surge.

Getting ready

To get ready, we should build on the setup we created in the first recipe, Preparing a static server with Bootstrap...

Splitting up our Harp project into partials

In this recipe, we will split our existing project into partials, to keep our code DRY. Harp uses Embedded JS (EJS) format for includes. For more information on .ejs, visit http://www.embeddedjs.com/.

To begin, we can either continue from the previous recipe or clone the available repository for the recipe from the link https://github.com/ImsirovicAjdin/bootstrap4-with-sass-harp-grunt.

It is assumed in this recipe that you are using Cloud9 IDE. However, if that is not the case, then do not include the reference to workspace in commands to be run, as that folder is Cloud9-specific.

How to do it...

  1. In workspace/app, add a new folder and call it partial:
      cd &amp...

Using containers with margin and padding utility classes

In this recipe, we will build a simple layout, the old-fashioned way, using the default Bootstrap grid (without flexbox).

Getting ready

To get ready for this recipe, we will build from what we made in the first two recipes, Preparing a static server with Bootstrap 4, Harp and Grunt and Deploying your web project with Surge, of this chapter.

For basic information on how the layout works in Bootstrap 4, check out http://v4-alpha.getbootstrap.com/layout/overview/.

How to do it...

  1. In workspace/app...

Introduction


In this chapter, we will start off by installing a static server with Harp, locally on Windows. Where there are differences between Windows and Ubuntu-based c9, they will be pointed out.

The way we set up Harp will allow for a truly modular approach to develop recipes throughout the rest of this book, helping us keep our code DRY.

Preparing a static server with Bootstrap 4, Harp, and Grunt


In this recipe, we will set up a static server with the help of Harp (available at https://harpjs.com/). We will use Grunt to set up the foundation for tasks to be run, and we will start with the grunt-contrib-copy, grunt-contrib-sass, and grunt-watch tasks. We will use Bootstrap 4 source code mainly because of its partial Sass files to begin with. This first recipe in this chapter will be the foundation for all the other recipes in this chapter. Hopefully, you will be able to appreciate the power that the combination of these technologies brings when joined with the Cloud9 web-based IDE.

Note

This recipe is relatively long. If you just want to get up and run as fast as possible, you can skip the setup listed in this recipe and just clone the GitHub repository with all the files set up for you, at https://github.com/ImsirovicAjdin/bootstrap4-with-sass-harp-grunt.

To get started quickly, look at the README.md available in the repository...

Deploying your web project with Surge


In this recipe, we will serve the web project we created with Surge. For a quick introduction to the way it works, visit its website, surge.sh.

Note

If you would like to know more about Surge, visit this Medium page--http://bit.ly/2jDJ7L1 (URL shortened as the original link was too long).

This short recipe will marry the workflow from the previous recipe, the relatively long setup of Harp on Cloud9 IDE, with a simple way to serve the completed page on a custom URL. This should be quite a time saver and a powerful way to combine Cloud9 IDE, Harp, and Surge.

Getting ready

To get ready, we should build on the setup we created in the first recipe, Preparing a static server with Bootstrap 4, Harp and Grunt, in this chapter. However, before we start, there are a few clarifications to be made.

The first thing to note is the one major distinction that the web page that was created in the app folder was still serving the index.html page from the root of that folder...

Splitting up our Harp project into partials


In this recipe, we will split our existing project into partials, to keep our code DRY. Harp uses Embedded JS (EJS) format for includes. For more information on .ejs, visit http://www.embeddedjs.com/.

To begin, we can either continue from the previous recipe or clone the available repository for the recipe from the link https://github.com/ImsirovicAjdin/bootstrap4-with-sass-harp-grunt.

It is assumed in this recipe that you are using Cloud9 IDE. However, if that is not the case, then do not include the reference to workspace in commands to be run, as that folder is Cloud9-specific.

How to do it...

  1. In workspace/app, add a new folder and call it partial:
      cd && cd worspace/app && mkdir partial
  1. Add _nav.ejs to the partial folder--touch partial/_nav.ejs.
  2. Open the app/index.html and cut all the code starting with <nav> and ending with </nav> (the whole navbar). Paste the code into the _nav.ejs file.
  3. In index.html, right where...
Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Packed with easy-to-follow recipes on building responsive web pages with Bootstrap 4 that can be applied to a web project of your choice
  • Build intuitive user interfaces that are mobile-ready with the latest features offered by BS4
  • Stay on top of the changes that Bootstrap 4 brings to front-end development
  • Craft beautiful UIs and learn best practices, tips and tricks for quick, effortless, and proper Bootstrap 4 development

Description

Bootstrap, one of the most popular front-end frameworks, is perfectly built to design elegant, powerful, and responsive interfaces for professional-level web pages. It supports responsive design by dynamically adjusting your web page layout. Bootstrap 4 is a major update with many impressive changes that greatly enhance the end results produced by Bootstrap. This cookbook is a collection of great recipes that show you how to use all the latest features of Bootstrap to build compelling UIs. This book is using the most up-to-date version of Bootstrap 4 in all its chapters. First off, you will be shown how you can leverage the latest core features of Bootstrap 4 to create stunning web pages and responsive media. You will gradually move on to extending Bootstrap 4 with the help of plugins to build highly customized and powerful UIs. By the end of this book, you will know how to leverage, extend, and integrate bootstrap to achieve optimal results for your web projects.

Who is this book for?

If you are a web designer or a developer who is familiar with the basics of Bootstrap and now want to build highly responsive and professional web pages using Bootstrap 4, this cookbook is for you. Familiarity with the fundamentals of HTML, CSS and jQuery, and some experience of incorporating JavaScript plugins is assumed.

What you will learn

  • Craft beautiful UIs the right way
  • Use jQuery and JavaScript to extend Bootstrap layouts
  • Become more efficient by speeding up your workflow to achieve amazing results in the shortest time possible
  • Setup your environment for future changes of the framework.
  • Stay DRY by quickly prototyping Bootstrap-based websites with the help of Github's own serverless blogging platform, Jekyll
  • Integrate Bootstrap with the most popular JS frameworks, Angular and React
  • Combine Bootstrap with the .NET platform

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jun 30, 2017
Length: 338 pages
Edition : 1st
Language : English
ISBN-13 : 9781785888762
Languages :
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 : Jun 30, 2017
Length: 338 pages
Edition : 1st
Language : English
ISBN-13 : 9781785888762
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 141.97
Bootstrap 4 Cookbook
€36.99
Mastering Bootstrap 4
€36.99
Bootstrap 4 ??? Responsive Web Design
€67.99
Total 141.97 Stars icon
Banner background image

Table of Contents

12 Chapters
Installing Bootstrap 4 and Comparing Its Versions Chevron down icon Chevron up icon
Layout Like a Boss with the Grid System Chevron down icon Chevron up icon
Power Up with the Media Object, Text, Images, and Tables Chevron down icon Chevron up icon
Diving Deep into Bootstrap 4 Components Chevron down icon Chevron up icon
Menus and Navigations Chevron down icon Chevron up icon
Extending Bootstrap 4 Chevron down icon Chevron up icon
Make Your Own jQuery Plugins in Bootstrap 4 Chevron down icon Chevron up icon
Bootstrap 4 Flexbox and Layouts Chevron down icon Chevron up icon
Workflow Boosters Chevron down icon Chevron up icon
Creating a Blog with Jekyll and Bootstrap 4 Chevron down icon Chevron up icon
Bootstrap 4 with ASP.NET Core Chevron down icon Chevron up icon
Integrating Bootstrap 4 with React and Angular Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Half star icon Empty star icon Empty star icon 2.8
(4 Ratings)
5 star 25%
4 star 25%
3 star 0%
2 star 0%
1 star 50%
Andrew Yourkin Oct 12, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book does exactly what it says in the foreword -- does not copy the official Bootstrap 4 documentation but expands on it, covering a lot of ground that can be useful to the initiated developer.Being fairly acquainted with the framework already, and having stumbled into some of its idiosyncrasies I was looking to fill in some gaps in BS4 customization, better layout techniques, and more examples of advanced usage. Not disappointed.
Amazon Verified review Amazon
Svein Soermo Apr 12, 2018
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
High quality projects and very good explanations.
Amazon Verified review Amazon
Kenneth D. Hawkins Mar 22, 2019
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
All of the first chapter and the beginning of the second chapter could be eliminated as it has nothing to do with bootstrap. I would expect someone writing a book on coding would understand the usage of white space and indentation, but not so. The code examples are a mish-mosh of mess. The only way to effectively read them is to copy them into your editor of choice and reformat them. I am glad he does not code for me.
Amazon Verified review Amazon
Maria Nov 09, 2017
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
use always online ide!!! cloud 9?? what's this? no atom no sublime text no visual studio... all those are free.I can't imagine a firm using cloud 9........aaaaand messy and intriguing explanations too!!why this book exist?
Amazon Verified review Amazon
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.