Bootstrap By Example
()
About this ebook
About This Book
- Become an expert in Bootstrap framework, and speed up front-end development and prototyping through real-life examples
- An applied guide exploring two web applications such as Twitter and Dashboard from scratch
- Hands on the Bootstrap version 4 even before the official release
Who This Book Is For
If you are a frontend developer with no knowledge of Bootstrap, then this book is for you. Basic knowledge of HTML, CSS, and JavaScript is expected, as well as a reasonable understanding of web frameworks, such as jQuery.
What You Will Learn
- Discover how to use Bootstrap’s components and elements, and to customize them for your own projects
- Understand the framework’s usage in the best way with the recommended development patterns
- Create web pages for any kind of device like tablet, mobile, computer, etc.
- Construct a Twitter app by exploring the advanced bootstrap components like Breadcrumbs, Pagination, Media objects, and so on
- Combine the power of JavaScript with your Bootstrap app for more functionality
- Create a Dashboard web app using Bootstrap’s JavaScript plugins
- Learn the difference between Bootstrap’s version 3 and 4 of the framework
- Extend your knowledge on Bootstrap’s external plugins, their incorporation and usage
In Detail
Bootstrap is a free, open source collection of tools that helps developers create websites or web applications. It provides a faster, easier, and less repetitive solution to designing and building applications. Before Bootstrap’s release, it was necessary to import a variety of libraries into your project that offered different components and features for web interface development. Plus with the increased popularity of smartphones there were lack of libraries that could handle the responsiveness of a web page. Bootstrap‘s existence let it quickly become famous as a front-end framework that offered a wide set of tools from page grid up to components that render a web page in the best possible way for any device.
This book will be a tutorial covering various examples as well as step-by-step methodology to create interesting web applications using Bootstrap and to understand the front-end framework to its core.
We begin with an introduction to the Bootstrap framework and setting up an environment to build a simple web page. We then cover the grid system, basic Bootstrap components, HTML elements, and customization components for responsive and mobile first development. This is presented by creating a beautiful Landing page sample. You will also learn how to create a web application like Twitter by using the full set of components offered in the framework. Finally, you will learn to create a dashboard web app, using Bootstrap to its finest potential including component customizations, event handling, and external library integration. All these examples are explained step-by-step and in depth, while covering the versions 3 and the most recent version 4 of Bootstrap. So, you will be in the state of the art for front-end development.
By the end of this book, you will be familiar with the development of a plugin for the framework and Bootstrap’s world which is popular for fast paced front-end web development, used in countless projects all over the world, and now yours.
Style and approach
This is a step-by-step guide that closely focuses on developing web applications in most objective way solving real-life problems with Bootstrap. It covers two sample web applications, which are explained in detail.
Related to Bootstrap By Example
Related ebooks
Mastering Bootstrap 4 Rating: 5 out of 5 stars5/5Learning Bootstrap Rating: 1 out of 5 stars1/5Learning Bootstrap 4 - Second Edition Rating: 5 out of 5 stars5/5Bootstrap 4 Site Blueprints Rating: 5 out of 5 stars5/5Bootstrap 4 Cookbook Rating: 0 out of 5 stars0 ratingsResponsive Media in HTML5 Rating: 0 out of 5 stars0 ratingsJavaScript Unlocked Rating: 5 out of 5 stars5/5Bootstrap for ASP.NET MVC - Second Edition Rating: 5 out of 5 stars5/5jQuery Mobile Web Development Essentials - Third Edition Rating: 0 out of 5 stars0 ratingsJavaScript Projects for Kids Rating: 0 out of 5 stars0 ratingsASP.NET Core 3 and React: Hands-On full stack web development using ASP.NET Core, React, and TypeScript 3 Rating: 0 out of 5 stars0 ratingsGetting Started with React Native Rating: 4 out of 5 stars4/5A Pocket Guide to CSS Animations Rating: 5 out of 5 stars5/5Bootstrap 4 Quick Start: A Beginner's Guide to Building Responsive Layouts with Bootstrap 4 Rating: 0 out of 5 stars0 ratingsProfessional CSS3 Rating: 5 out of 5 stars5/550 Recipes for Programming CSS3 Rating: 0 out of 5 stars0 ratingsResponsive Web Design with HTML5 and CSS3 Rating: 4 out of 5 stars4/5Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications, and libraries Rating: 3 out of 5 stars3/5PHP 7 Programming Blueprints Rating: 0 out of 5 stars0 ratingsMastering HTML5 Forms Rating: 1 out of 5 stars1/5Responsive Web Design with HTML5 and CSS3 - Second Edition Rating: 4 out of 5 stars4/5Node.js Web Development - Third Edition Rating: 2 out of 5 stars2/5HTML for the Business Developer: with JavaServer Pages, PHP, ASP.NET, CGI, and JavaScript Rating: 3 out of 5 stars3/5JavaScript for Modern Web Development: Building a Web Application Using HTML, CSS, and JavaScript Rating: 0 out of 5 stars0 ratingsResponsive Design High Performance Rating: 0 out of 5 stars0 ratingsInstant SASS CSS How-to Rating: 5 out of 5 stars5/5Node.JS Guidebook: Comprehensive guide to learn Node.js Rating: 0 out of 5 stars0 ratingsLearning PHP 7 Rating: 4 out of 5 stars4/5Wordpress Web Application Development - Third Edition Rating: 0 out of 5 stars0 ratings
Internet & Web For You
Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5How to Be Invisible: Protect Your Home, Your Children, Your Assets, and Your Life Rating: 4 out of 5 stars4/5Coding For Dummies Rating: 5 out of 5 stars5/5How to Disappear and Live Off the Grid: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratingsNo Place to Hide: Edward Snowden, the NSA, and the U.S. Surveillance State Rating: 4 out of 5 stars4/5The Gothic Novel Collection Rating: 5 out of 5 stars5/5HTML in 30 Pages Rating: 5 out of 5 stars5/5Podcasting For Dummies Rating: 4 out of 5 stars4/5Remote/WebCam Notarization : Basic Understanding Rating: 3 out of 5 stars3/5Social Engineering: The Science of Human Hacking Rating: 3 out of 5 stars3/5Mike Meyers' CompTIA Security+ Certification Guide, Third Edition (Exam SY0-601) Rating: 5 out of 5 stars5/5The Hacker Crackdown: Law and Disorder on the Electronic Frontier Rating: 4 out of 5 stars4/5Six Figure Blogging Blueprint Rating: 5 out of 5 stars5/5Tor and the Dark Art of Anonymity Rating: 5 out of 5 stars5/5How To Start A Profitable Authority Blog In Under One Hour Rating: 5 out of 5 stars5/5The Digital Marketing Handbook: A Step-By-Step Guide to Creating Websites That Sell Rating: 5 out of 5 stars5/5Wordpress for Beginners: The Easy Step-by-Step Guide to Creating a Website with WordPress Rating: 5 out of 5 stars5/5The $1,000,000 Web Designer Guide: A Practical Guide for Wealth and Freedom as an Online Freelancer Rating: 5 out of 5 stars5/5The Beginner's Affiliate Marketing Blueprint Rating: 4 out of 5 stars4/5How To Make Money Blogging: How I Replaced My Day-Job With My Blog and How You Can Start A Blog Today Rating: 4 out of 5 stars4/5Everybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Rating: 4 out of 5 stars4/5An Ultimate Guide to Kali Linux for Beginners Rating: 3 out of 5 stars3/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsLying and Lie Detection: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratingsWireless Hacking 101 Rating: 5 out of 5 stars5/5
Reviews for Bootstrap By Example
0 ratings0 reviews
Book preview
Bootstrap By Example - Moreto Silvio
Table of Contents
Bootstrap 4 By Example
Credits
About the Author
About the Reviewer
www.PacktPub.com
eBooks, discount offers, and more
Why subscribe?
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
Errata
Piracy
Questions
1. Getting Started
Getting Bootstrap
Setting up the framework
Folder structure
Warming up the sample example
Bootstrap required tags
Building our first Bootstrap example
The container tag
Optionally using the CDN setup
Community activity
Tools
Bootstrap and web applications
Browser compatibility
Summary
2. Creating a Solid Scaffolding
Understanding the grid system
Building our scaffolding
Setting things up
Offset columns
Completing the grid rows
Nesting rows
Finishing the grid
Fluid container
We need some style!
There are headings everywhere
Playing with buttons
More typography and code tags
Manipulating tables
Styling the buttons
Like a boss!
Final thoughts
Box-sizing
Quick floats
Clearfix
Font definitions for typography
Summary
3. Yes, You Should Go Mobile First
Making it greater
Bootstrap and the mobile-first design
How to debug different viewports at the browser
Cleaning up the mess
Creating the landing page for different devices
Mobile and extra small devices
Tablets and small devices
Desktop and large devices
Summary
4. Applying the Bootstrap Style
Changing our grid layout
Starting over the grid system
The header
The introduction header
The about section
The features section
The price table section
The footer
Forming the forms
Newsletter form
Contact form
Let's start with some JavaScript
The sign-in form
Images
Helpers
Floating and centering blocks
Context colors
Spacing
Responsive embeds
Summary
5. Making It Fancy
Using Bootstrap icons
Paying attention to your navigation
Until the navigation collapse
Using different attachments
Coloring the bar
Dropping it down
Customizing buttons dropdown
Making an input grouping
Getting ready for flexbox!
Understanding flexbox
Playing with Bootstrap and flexbox
Summary
6. Can You Build a Web App?
Understanding web applications
Creating the code structure
Adding the navigation
Adding the search input
Time for the menu options!
The option at the thumbnail
Adding the Tweet button
Customizing the navigation bar
Setting up the custom theme
Fixing the list navigation bar pseudo-classes
You deserve a badge!
Fixing some issues with the navigation bar
Do a grid again
Playing the cards
Learning cards in Bootstrap 4
Creating your own cards
Adding Cards to our web application
Another card using thumbnails
Implementing the main content
Making your feed
Doing some pagination
Creating breadcrumbs
Finishing with the right-hand-side content
Summary
7. Of Course, You Can Build a Web App!
Alerts in our web app
Dismissing alerts
Customizing alerts
Waiting for the progress bar
Progress bar options
Animating the progress bar
Creating a settings page
Pills of stack
Tabs in the middle
Adding the tab content
Using the Bootstrap tabs plugin
Creating content in the user info tab
The stats column
Labels and badges
Summary
8. Working with JavaScript
Understanding JavaScript plugins
The library dependencies
Data attributes
Bootstrap JavaScript events
Awesome Bootstrap modals
Modal general and content
The modal header
The modal body
The modal footer
Creating our custom modal
A tool for your tip
Pop it all over
Popover events
Making the menu affix
Finishing the web app
Summary
9. Entering in the Advanced Mode
The master plan
The last navigation bar with flexbox
The navigation search
The menu needs navigation
Checking the profile
Filling the main fluid content
From the side stacked menu
I heard that the left menu is great!
Learning the collapse plugin
Using some advanced CSS
Filling the main content
Rounding the charts
Creating a quick statistical card
Getting a spider chart
Overhead loading
Fixing the toggle button for mobile
Summary
10. Bringing Components to Life
Creating the main cards
The other card using Bootstrap components
Creating our last plot
Fixing the mobile viewport
Fixing the navigation menu
The notification list needs some style
Adding the missing left menu
Aligning the round charts
Learning more advanced plugins
Using the Bootstrap carousel
Customizing carousel items
Creating slide indicators
Adding navigation controls
Other methods and options for the carousel
The Bootstrap spy
Summary
11. Making It Your Taste
Customizing a Bootstrap component
The taste of your button
Using button toggle
The checkbox toggle buttons
The button as a radio button
Doing the JavaScript customization
Working with plugin customization
The additional Bootstrap plugins
Creating our Bootstrap plugin
Creating the plugin scaffold
Defining the plugin methods
The initialize method and plugin verifications
Adding the Bootstrap template
Creating the original template
The slide deck
The carousel indicators
The carousel controls
Initializing the original plugin
Making the plugin alive
Creating additional plugin methods
Summary
Index
Bootstrap 4 By Example
Bootstrap 4 By Example
Copyright © 2016 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: March 2016
Production reference: 1230316
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78528-887-6
www.packtpub.com
Credits
Author
Silvio Moreto
Reviewer
Paula Barcante
Commissioning Editor
Ashwin Nair
Acquisition Editor
Smeet Thakkar
Content Development Editor
Pooja Mhapsekar
Technical Editor
Tanmayee Patil
Copy Editor
Vikrant Phadke
Project Coordinator
Francina Pinto
Proofreader
Safis Editing
Indexer
Monica Ajmera Mehta
Production Coordinator
Conidon Miranda
Cover Work
Conidon Miranda
About the Author
Silvio Moreto is a developer with more than 7 years of experience with frontend technologies and has created many websites and web applications using the Bootstrap framework. From simple pages to complex ones, he has always used the Bootstrap framework.
Silvio is also the creator of the bootstrap-select plugin (http://silviomoreto.github.io/bootstrap-select/), which is a very popular plugin among the community. It is for replacing a selected element by a Bootstrap button drop-down element. Silvio foresaw that a plugin like this one was missing in the original framework, and it could be useful for the community. So he created the plugin, and the community helps him maintain it.
Besides this, he is very active in the open source community, participating in some open source repository and issue communities, such as Stack Overflow. Also, he finished third in the worldwide Django Dash 2013 challenge.
First, I would like to thank my wife to supporting me throughout the writing process of the book. I would also like to thank my dog for staying beside me every night when I was writing and being the inspiration to some scenarios in the book. Then I want to thank the editors from Packt Publishing for their understanding and for guiding me through the completion of the book.
About the Reviewer
Paula Barcante is a 23 year old UX designer with a passion for frontend development. She learned development on her own by reading books and taking free online courses. She began using Bootstrap 4 years ago and has continued using it ever since. Paula's passion lies in designing and developing beautiful experiences for users around the world. Most recently, she began working as a UX designer for Amazon.com. She is always happy to chat with those who are passionate about design or frontend development. Her work can be found at paulabarcante.com.
www.PacktPub.com
eBooks, discount offers, and more
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why subscribe?
Fully searchable across every book published by Packt
Copy and paste, print, and bookmark content
On demand and accessible via a web browser
Preface
Frontend development can be separated into two eras, before Bootstrap and after Bootstrap. In 2011, the greatest frontend framework ever was released. Also, in the same year, the adoption and use of the framework grew in great numbers, reaching almost every segment of the market.
The reason of this is as follows: imagine how painful it was to create a simple, nice button, for instance. You had to declare a lot of classes and styles in your code. This was the foresee of Bootstrap, created by some developers from Twitter. The framework was a paradigm change for developing a fast-paced web page frontend.
The greatness of Bootstrap lies in three aspects. The first is the style sheet, which contains some basic CSS for almost every HTML element in a uniform and beauty way.
The second aspect is the components. They can be reused by just copying and pasting code. The last aspect is the JavaScript plugin, which includes some very common additional elements that cannot be found elsewhere.
Take a deep dive into the Bootstrap frontend framework with the help of examples that will illustrate the usage of each element and component in a proper way. By seeing examples, you will get a better understanding of what is happening and where you want to reach.
During the book, along the examples, you will be able to nail the framework and develop some very common examples using Bootstrap. These are a landing page, a web application, and a dashboard, which is desired by 10 out 10 web developers. You will face these kind of page countless number of times during your life as a developer, and you will do that using Bootstrap at its finest, including component customizations, animations, event handling, and external library integration.
We will start from the basics of the framework, but we will not hesitate from going further to really nail the framework. If you complete the book's examples by yourself, we can guarantee that you will become a true Bootstrap master.
This book is the first one to offer support for version 4 of Bootstrap. However, we will offer support for version 3 as well. So, you will be ready for whatever comes your way.
What this book covers
Chapter 1, Getting Started, introduces the Bootstrap framework and teaches you how to set up the environment.
Chapter 2, Creating a Solid Scaffolding, starts the landing page example using the grid system.
Chapter 3, Yes, You Should Go Mobile First, talks about mobile-first development and how to do it.
Chapter 4, Applying the Bootstrap Style, uses the Bootstrap theme and some Bootstrap elements.
Chapter 5, Making It Fancy, is about adding more Bootstrap elements to the landing page example.
Chapter 6, Can You Build a Web App?, challenges us to create a web application using Bootstrap.
Chapter 7, Of Course, You Can Build a Web App!, creates the web application page using only Bootstrap elements and components.
Chapter 8, Working with JavaScript, starts using some JavaScript plugins in the web application example.
Chapter 9, Entering in the Advanced Mode, is the start of the dashboard example using advanced components and plugin integrations.
Chapter 10, Bringing Components to Life, completes the dashboard example while making the final customizations for our web page.
Chapter 11, Making It Your Taste, is the final challenge, where we customize Bootstrap plugins and create a new plugin for the framework.
What you need for this book
To follow this book's developments, you will need a web browser on your computer, preferably Google Chrome, because it will be used in some examples. But other browsers can work as well.
Also, you will need some basic knowledge in HTML, CSS, and JavaScript beforehand. Despite the fact that we will initially talk in a slow pace about those technologies, it will be good for you to know some basic concepts about them.
Another plus is knowledge of the jQuery library, which is a dependency of Bootstrap. We will actually use jQuery in Chapter 7, Of Course, You Can Build a Web App!, and they will be very simple examples. So just keep in mind to train some jQuery skills.
Who this book is for
Bootstrap By Example is perfect for frontend developers interested in fast, mobile-first, and responsive development. Bootstrap is the most famous frontend framework, with a big community that needs you as a new member in this world of extensive support for different devices, resolutions, browsers, and ready-to-use components. With this book, you will acquire your ticket to it and play around like a pro.
Conventions
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: Then, we created a
A block of code is set as follows:
Hello World!
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
Hello World!
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 preceding screenshot shows the final result of the Features section.
Note
Warnings or important notes appear in a box like this.
Tip
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 <feedback@packtpub.com>, 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.
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 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
Downloading the color images of this book
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 https://www.packtpub.com/sites/default/files/downloads/BootstrapByExample_ColorImages.pdf.
Errata
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
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 <copyright@packtpub.com> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at <questions@packtpub.com>, and we will do our best to address the problem.
Chapter 1. Getting Started
With the advent and increase in popularity of the mobile web, developers have had to adapt themselves to handling new challenges, such as different layouts in different resolutions, the new user experience paradigm, and optimization for low-bandwidth connections. While facing this, there were also a lot of old problems related to browser compatibility and lack of patterns in the community.
This was the outline scenario when the Bootstrap framework arrived. Developed by Twitter, the main goal of Bootstrap is to provide a web frontend framework for responsive developing with cross-browser compatibility. It is awesome! Developers fell in