Since its debut in August 2011, Twitter Bootstrap, now simply Bootstrap, has become by far the most popular framework for empowering and enhancing frontend web design.
With over 5 years of experience with Bootstrap, I'm happy to write this book for you and share my experience with you. Since Bootstrap helps me to implement best practices for both CSS and HTML. Bootstrap enables me to work faster and deliver stable results. Bootstrap definitely made me a better web developer.
With version 4, Bootstrap reaches an exciting new milestone, a lean code base optimized for modern browsers. Bootstrap enables you to build applications and websites that look good and work well on all types of devices and screen sizes from a single code base.
Bootstrap is open source and released under the MIT license. It's hosted, developed, and maintained on GitHub.
This book is a hands-on guide to the inner workings of Bootstrap. In an easy-to-follow, step-by-step format, you'll experience the power of customizing and recompiling Bootstrap's Sass files and adapting Bootstrap's JavaScript plugins to design professional user interfaces.
At the end of the day, this book is about something bigger than Bootstrap. Bootstrap is but a tool—a means to an end. By the end of this book, you will become a more adept and efficient web designer.
Chapter 1, Getting Started with Bootstrap, teaches us how to download Bootstrap, set up a site template based on the HTML5 boilerplate, and practice compiling Bootstrap's Sass files to CSS.
Chapter 2, Creating Your Own Build Process with Gulp, teaches us how to create a build process for your Bootstrap projects with Gulp. You can reuse the build process for your newer projects. The build process compiles your Sass code into CSS code, prepares your JavaScript code, and runs a static web server to test the results.
Chapter 3, Customizing Your Blog with Bootstrap and Sass, enables us to get a grip on Sass. You now know how to use Sass to customize Bootstrap's components. You will build a web page for your web log and apply different strategies to style it with Sass.
Chapter 4, Bootstrappin' a WordPress Theme, enables us to take the portfolio design and turn it into a WordPress theme. We'll start with the excellent JBST 4 Starter Theme and customize template files, Sass, CSS, and JavaScript to suit our needs.
Chapter 5, Bootstrappin' Your Portfolio, helps us to build a basic portfolio site with a full-width carousel, three columns of text, and social icons provided by Font Awesome—customizing Bootstrap's Sass files and adding your own in the process.
Chapter 6, Bootstrappin' Business, shows us how to create a complex banner area, add drop-down menus and utility navigation, build a complex three-column page layout, and add a four-column footer, and ensures that all these things remain fully responsive.
Chapter 7, Bootstrappin' E-Commerce, guides us through the design of a products page capable of managing multiple rows of products in a complex responsive grid. While at it, we will provide a fully responsive design for options to filter products by category, brand, and so on.
Chapter 8, Bootstrappin' a One-Page Marketing Website, gives a detailed outline of how to design a beautiful one-page scrolling website with a large welcome message, a grid of product features with large icons, customer testimony in a masonry layout, and a set of three thoughtfully designed pricing tables.
Chapter 9, Building an Angular 2 App with Bootstrap, enables you to learn how to set up an Angular 2 app with Bootstrap 4. At the end, you will be introduced to some other tools to deploy your projects.
To complete the exercises in this book, you will need the following software:
A modern web browser
A text or code editor
The NodeJS installed on your system
This book is assumed to be good for readers who are comfortable with handcoding HTML and CSS and are familiar with the fundamentals of valid HTML5 markup and well-structured style sheets. Basic familiarity with JavaScript is a bonus, as we will be making use of Bootstrap's jQuery plugins. We will work a great deal with LESS to customize, compose, and compile style sheets. Those who are familiar with LESS will gain significant experience working with the details of Bootstrap's LESS files. Those who are new to LESS will find this book a reasonably thorough primer.
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: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."
A block of code is set as follows:
.btn-tomato {
color: white;
background-color: tomato;
border-color: white;
}Any command-line input or output is written as follows:
npm install --global gulp-cli
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: "The shortcuts in this book are based on the Mac OS X 10.5+ scheme."
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 www.packtpub.com/authors.
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.
You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
You can download the code files by following these steps:
Log in or register to our website using your e-mail address and password.
Hover the mouse pointer on the SUPPORT tab at the top.
Click on Code Downloads & Errata.
Enter the name of the book in the Search box.
Select the book for which you're looking to download the code files.
Choose from the drop-down menu where you purchased this book from.
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 https://github.com/PacktPublishing/Bootstrap-4-Site-Blueprints. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from http://www.packtpub.com/sites/default/files/downloads/Bootstrap4SiteBlueprints_ColorImages.pdf.
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 http://www.packtpub.com/submit-errata, 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 https://www.packtpub.com/books/content/support 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.