Bootstrap is a free CSS and JavaScript framework that allows developers to rapidly build responsive web interfaces. The framework was first conceived by Mark Otto and Jacob Thornton while working at Twitter in 2010. Since its release as an open source project in August of 2011, Bootstrap has become a household name among frontend web developers. The framework’s ease-of-use along with its cross-browser compatibility, support for mobile user interfaces, and responsive web design capabilities, make it an essential building block for any modern web application. Totaling over 600 contributors, and more than 34,000 GitHub forks, Bootstrap has become the world’s most popular responsive web development framework. However, despite its popularity, there are relatively few advanced resources on the fourth, and latest, version of Bootstrap. As such, the motivation behind this book is to provide a comprehensive, step-by-step guide for developers that wish to build a complete, production-ready, website using Bootstrap 4. Once you turn the final pages of this book, you should be mastering the framework’s ins and outs, and building highly customizable and optimized web interfaces. You will know how to both extend the framework, integrate it with third-party components and frameworks, as well as optimize and automate your Bootstrapped builds.
This book targets readers who already have an understanding of HTML, JavaScript and CSS, and who wish to learn how to build responsive websites using Bootstrap 4. The book is not intended to be an introduction to web development.
Chapter 1, Revving Up Bootstrap, places the Bootstrap framework into context by highlighting the relevant features that come bundled with it. It briefly deals with various ways to include the framework and concludes by setting up the required files for the book’s demo project.
Chapter 2, Making a Style Statement, introduces the Bootstrap markup and style rules for the mobile-first grid system and HTML image elements. It also goes into the handy helper classes and responsive utilities that Bootstrap makes available to boost development speed.
Chapter 3, Building the Layout, focuses on starting to flesh out the demo project set up in Chapter 1, Revving Up Bootstrap, by adding a style guide for commonly used HTML elements and structuring the page layout.
Chapter 4, On Navigation, Footers, Alerts, and Content, shows you how to take advantage of Bootstrap to build footers and alerts, and how you can add and style various types of content using Bootstrap’s built-in classes.
Chapter 5, Speeding Up Development Using Third-Party Plugins, demonstrates how to use the handy third-party jQuery plugins to add interactivity and fun to a web page.
Chapter 6, Customizing Your Plugins, delves into the Bootstrap jQuery plugins’ code and customizes it to jazz up this book’s demo page. Plugins will be examined and extended throughout this chapter in an effort to not only make our page better, but to also improve our knowledge of how jQuery plugins are built and how they behave within Bootstrap’s ecosystem.
Chapter 7, Advanced Third-Party Plugins, identifies new features or improvements that we want to make to our demo website. Consequently, the chapter will introduce libraries to help us achieve those goals and figure out how these can be gracefully integrated with our existing architecture.
Chapter 8, Utilities, aims to close any knowledge gaps that we may have of Bootstrap 4 by taking a look at Bootstrap's various utility classes and teaching you how you can use them effectively to speed up website development.
Chapter 9, List Groups and Accordions, shows how your website can be optimized for maximum performance and fast loading time on any device.
Chapter 10, Optimizing Your Website, covers how your website can be optimized for maximum performance and fast loading time on any device.
Chapter 11, Integrating with AngularJS and React, teaches the essentials of using Bootstrap within AngularJS and React. AngularJS is a Model-View-* JavaScript framework, while React is a JavaScript library that concentrates solely on the View part of the Model-View-Controller type stack. A vast amount of web pages are built with the frameworks or libraries, such as AngularJS and React, as they provide very useful abstractions on top of JavaScript and the DOM.
- The reader should understand HTML and CSS
- The reader should have at least basic knowledge of JavaScript
You can download the example code files for this book from your account at www.packtpub.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
- Log in or register at www.packtpub.com.
- Select the
SUPPORTtab. - Click on
Code Downloads & Errata. - Enter the name of the book in the
Searchbox and follow the onscreen instructions.
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 https://github.com/PacktPublishing/Mastering-Bootstrap-4-Second-Edition. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
There are a number of text conventions used throughout this book.
CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."
A block of code is set as follows:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
[default]
exten => s,1,Dial(Zap/1|30)
exten => s,2,Voicemail(u100)
exten => s,102,Voicemail(b100)
exten => i,1,Voicemail(s0)Any command-line input or output is written as follows:
npm init
npm install bootstrapBold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select System info from the "Administration panel.
Feedback from our readers is always welcome.
General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packtpub.com.