Book Image

Bootstrap 4 Cookbook

By : Ajdin Imsirovic
Book Image

Bootstrap 4 Cookbook

By: Ajdin Imsirovic

Overview of this book

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.
Table of Contents (19 chapters)
Title Page
About the Author
About the Reviewer
Customer Feedback


Bootstrap is the most popular frontend framework today. One of its advantages is that it is easy to start working with. In fact, it is possible to simply get the links for Bootstrap's CSS and JS files over a Content Delivery Network (CDN), and you are good to go!

However, under this low barrier to entry lies a whole world of possibilities to put together websites in Bootstrap 4.

For example, there are additional ways to install Bootstrap, such as cloning it via Git or installing it via NPM or Bower.

There are also several ways to work with it, with increasing levels of complexity. For example, you can simply use its CSS as is. You can also use its SCSS files, which come with the default installation in Bootstrap 4. By tweaking SCSS files, using includes, variables, and mixins (Sass functions), you can create highly customized layouts.

Bootstrap 4 also includes the amazing Flexbox grid, which gives us a whole new way of working with layouts.

When working with any frontend technology, there are always a lot of repetitive tasks, such as minification and Sass-to-CSS compilation. These tasks are performed using task runners, and in this book, the focus is on Grunt. Although working with task runners does add an extra layer of complexity to our development with Bootstrap 4, it also increases our efficiency as frontend developers.

Bootstrap 4 is powered by Sass and jQuery, so due care was given to covering the use of both technologies in this book's recipes.

In the last few chapters, we are looking into integrating Bootstrap with Jekyll, GitHub's serverless blog system, and deploying it onto GitHub pages. We also take a look at using GitHub with .NET Core, Angular, and React.

One of the more ambitious goals of this book was to truly build on the available Bootstrap 4 documentation, rather than just reiterate the existing concepts. If some of the recipes seem a bit too advanced, understanding Bootstrap's official documentation might be a prerequisite for better understanding. Also, each recipe was built to be as straightforward and beginner-friendly as possible, while remaining self-contained.

The world of the frontend web development is changing fast, and it is becoming increasingly complex. In the recipes of this book, emphasis was given to catering for this complexity in a manner that would suit developers of various levels of expertise.

What this book covers

Chapter 1, Installing Bootstrap 4 and Comparing Its Versions, covers various ways of installing Bootstrap 4 and using it with an online IDE, Cloud9, or on your local machine. It also explains the workings of Grunt, Sass, and Jekyll, which are all used in the full local installation of Bootstrap 4.

Chapter 2, Layout Like a Boss with the Grid System, deals with the basics of using containers, rows, and columns, as well as building a couple of real web page examples. All these are done with the help of Harp and Grunt.

Chapter 3, Power Up with the Media Object, Text, Images, and Tables, helps you to create a comments section, customize the blockquote element, align text and images, and work with tables.

Chapter 4, Diving Deep into Bootstrap 4 Components, explores customizing alerts, modals, popups, and tooltips. It also looks into using Bootstrap's Sass mixins to customize components such as cards and buttons.

Chapter 5, Menus and Navigations, explains various ways of working with navbars.

Chapter 6, Extending Bootstrap 4, teaches you a number of ways to extend Bootstrap 4 with the help of jQuery plugins. Some of the recipes in this chapter extend the functionality of the existing components, such as the pagination component. Others deal with integrating nonexisting components, such as the datepicker on input fields.

Chapter 7, Make Your Own jQuery Plugins in Bootstrap 4, covers the foundations of making your own jQuery plugins. Since jQuery is such an integral part of Bootstrap, knowing its inner workings can help in both extending the existing plugins and making Bootstrap 3 plugins work with Bootstrap 4. Also, understanding the basics of how jQuery plugins work opens a new way of working with interactions in your Bootstrap-powered websites.

Chapter 8, Bootstrap 4 Flexbox and Layouts, outlines the amazing changes brought to Bootstrap 4 by the inclusion of the CSS flexbox specification into the framework itself. It is an alternative way of building websites and stepping away from float-based layouts.

Chapter 9, Workflow Boosters, focuses on the use of Sass partials, cleaning up unused CSS in your custom Bootstrap 4 builds, and stripping comments. We'll see how the Grunt task runner is used to achieve these goals, which will help in understanding the general way Grunt tasks are structured and run.

Chapter 10, Creating a Blog with Jekyll and Bootstrap 4, lists the process of including Bootstrap 4 Sass with Jekyll, splitting it into partials, making Jekyll blog-aware, and finally, serving your Bootstrap 4 Jekyll blog online with the help of GitHub Pages.

Chapter 11, Bootstrap 4 with Core, takes a look at the process of setting up Bootstrap 4 Sass and Grunt in Visual Studio 2017 and Core 1.0/1.1.

Chapter 12, Integrating Bootstrap 4 with React and Angular, discusses the integration of Bootstrap 4 with React and Angular. Component-based frontend development is not the future--it is already here. Understanding at least the basics of how it works is crucial. This chapter aims to remove the complexity of these two frameworks and the complexity of their setup, and strives to show how to make these frameworks work with Bootstrap 4 in a simple and understandable manner.

What you need for this book

In almost all the chapters of this book, the following technologies are used:

  • Node and NPM
  • Bower
  • Ruby and Jekyll
  • Git and Git Bash
  • Harp

Chapter 11, Bootstrap 4 with Core, is specific because it requires that you have an installation of Visual Studio 2017 Community Edition and a .NET Core 1.x installation.

Chapter 12, Integrating Bootstrap 4 with React and Angular, requires installations of React and Angular via npm.

Who this book is for

This book is for both new and seasoned frontend developers. With so many technologies being affected by Bootstrap and affecting Bootstrap itself, there are plenty of ways of putting them together and working with them, as can be seen throughout this book's recipes.

These are just some of the technologies this book covers: CSS and HTML, jQuery, Sass, Harp, Jekyll, Node and NPM, Bower, Grunt, Angular, React, and .NET Core. All of these technologies are looked at through the lens of Bootstrap 4 framework.


In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning. Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "After running the npm install command, a number of dependencies will be installed, just as listed in the package.json file."

A block of code is set as follows:

   "name": "customGrunt",
   "version": "",
   "devDependencies": {
     "grunt": "~1.0.1",
     "grunt-contrib-copy": "^1.0.0"

Any command-line input or output is written as follows:

 cd && cd workspace
 touch Gruntfile.js package.json

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Click on Create a new workspace, and a new page will appear with only a few things to fill in."


Warnings or important notes appear in a box like this.


Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for this book from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you. You can download the code files by following these steps:

  1. Log in or register to our website using your e-mail address and password.
  2. Hover the mouse pointer on the SUPPORT tab at the top.
  3. Click on Code Downloads & Errata.
  4. Enter the name of the book in the Search box.
  5. Select the book for which you're looking to download the code files.
  6. Choose from the drop-down menu where you purchased this book from.
  7. Click on Code Download.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

  • WinRAR / 7-Zip for Windows
  • Zipeg / iZip / UnRarX for Mac
  • 7-Zip / PeaZip for Linux

The code bundle for the book is also hosted on GitHub at We also have other code bundles from our rich catalog of books and videos available at Check them out!


Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title. To view the previously submitted errata, go to and enter the name of the book in the search field. The required information will appear under the Errata section.


Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy. Please contact us at [email protected] with a link to the suspected pirated material. We appreciate your help in protecting our authors and our ability to bring you valuable content.


If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.