Learning Bootstrap 4 - Second Edition
By Matt Lambert
5/5
()
About this ebook
- This book shows how to take advantage of the all new features introduced in Bootstrap
- Learn responsive web design and discover how to build mobile-ready websites with ease
- Find out how to extend the capabilities of Bootstrap with a huge range of tools and plugins, including jQuery,
- Do more with JavaScript and learn how to create an enhanced user experience
If you want to learn to build enterprise-level websites efficiently with Bootstrap, this book is for you. You must have a basic understanding of HTML, CSS, and JavaScript; however, there is no need to have prior Bootstrap experience.
Read more from Matt Lambert
Tachycardia and Other Tales Rating: 0 out of 5 stars0 ratingsUnrest Insured Rating: 0 out of 5 stars0 ratingsIndependence Girl Rating: 0 out of 5 stars0 ratingsA Low Tide Rising Rating: 0 out of 5 stars0 ratingsBootstrap Site Blueprints Volume II Rating: 0 out of 5 stars0 ratings
Related to Learning Bootstrap 4 - Second Edition
Related ebooks
Responsive Web Design with HTML5 and CSS3 - Second Edition Rating: 4 out of 5 stars4/5Bootstrap By Example Rating: 0 out of 5 stars0 ratingsBootstrap 4 Site Blueprints Rating: 5 out of 5 stars5/5Mastering Bootstrap 4 Rating: 5 out of 5 stars5/5Bootstrap 4 Cookbook Rating: 0 out of 5 stars0 ratingsMastering Responsive Web Design with HTML5 and CSS3 Rating: 0 out of 5 stars0 ratingsProfessional CSS3 Rating: 5 out of 5 stars5/5Responsive Web Design by Example : Beginner's Guide - Second Edition Rating: 0 out of 5 stars0 ratingsResponsive Web Design with HTML5 and CSS3 Rating: 4 out of 5 stars4/5WordPress Web Application Development Rating: 5 out of 5 stars5/5HTML5 and CSS3: Building Responsive Websites Rating: 0 out of 5 stars0 ratingsWordpress Web Application Development - Third Edition Rating: 0 out of 5 stars0 ratingsResponsive Media in HTML5 Rating: 0 out of 5 stars0 ratingsWordPress 2.8 Theme Design Rating: 0 out of 5 stars0 ratingsWeb Design Blueprints Rating: 0 out of 5 stars0 ratingsSass and Compass for Designers Rating: 0 out of 5 stars0 ratingsCSS3 Foundations Rating: 4 out of 5 stars4/5Dreamweaver CS6 For Dummies Rating: 5 out of 5 stars5/5WordPress Search Engine Optimization - Second Edition Rating: 0 out of 5 stars0 ratingsWordPress 4.0 Site Blueprints - Second Edition Rating: 0 out of 5 stars0 ratingsBootstrap Site Blueprints Rating: 0 out of 5 stars0 ratingsWeb Development with MongoDB and NodeJS - Second Edition Rating: 0 out of 5 stars0 ratingsWeb Design All-in-One For Dummies Rating: 3 out of 5 stars3/5WordPress Web Application Development - Second Edition Rating: 0 out of 5 stars0 ratingsBuilding Websites All-in-One For Dummies Rating: 4 out of 5 stars4/5Mastering jQuery UI Rating: 0 out of 5 stars0 ratingsDesigning Next Generation Web Projects with CSS3 Rating: 0 out of 5 stars0 ratingsHTML5 and CSS3 All-in-One For Dummies Rating: 0 out of 5 stars0 ratingsMastering JavaScript Rating: 4 out of 5 stars4/5Instant SASS CSS How-to Rating: 5 out of 5 stars5/5
Internet & Web For You
No Place to Hide: Edward Snowden, the NSA, and the U.S. Surveillance State Rating: 4 out of 5 stars4/5Cybersecurity For Dummies Rating: 4 out of 5 stars4/5Coding For Dummies Rating: 5 out of 5 stars5/5Coding 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/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/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/5Social Engineering: The Science of Human Hacking Rating: 3 out of 5 stars3/5How to Disappear and Live Off the Grid: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratingsThe $1,000,000 Web Designer Guide: A Practical Guide for Wealth and Freedom as an Online Freelancer Rating: 5 out of 5 stars5/5How To Start A Podcast Rating: 4 out of 5 stars4/5Podcasting For Dummies 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/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 ratingsGet Rich or Lie Trying: Ambition and Deceit in the New Influencer Economy Rating: 0 out of 5 stars0 ratingsHacking : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Ethical Hacking Rating: 5 out of 5 stars5/5Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5How To Start A Profitable Authority Blog In Under One Hour Rating: 5 out of 5 stars5/5The Beginner's Affiliate Marketing Blueprint Rating: 4 out of 5 stars4/5The Gothic Novel Collection Rating: 5 out of 5 stars5/5The Logo Brainstorm Book: A Comprehensive Guide for Exploring Design Directions Rating: 4 out of 5 stars4/5Wireless Hacking 101 Rating: 4 out of 5 stars4/5The Mega Box: The Ultimate Guide to the Best Free Resources on the Internet Rating: 4 out of 5 stars4/5Remote/WebCam Notarization <<Extended>> Commonwealth of Virginia Rating: 0 out of 5 stars0 ratingsCreate Something Awesome: How Creators are Profiting from Their Passion in the Creator Economy Rating: 0 out of 5 stars0 ratings
Reviews for Learning Bootstrap 4 - Second Edition
1 rating0 reviews
Book preview
Learning Bootstrap 4 - Second Edition - Matt Lambert
Table of Contents
Learning Bootstrap 4 - Second Edition
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. Introducing Bootstrap 4
Introducing Bootstrap
Bootstrap 4 advantages
Improved grid system and flexbox
Card component
Rebooting normalize.css
Internet Explorer 8 support dropped
Other updates
Implementing framework files
Inserting the JavaScript files
The starter template
HTML5 DOCTYPE
Structuring the responsive meta tag
Normalizing and Rebooting
Taking the starter template further
Using a static site generator
Converting the base template to a generator
Installing Harp.js
Adding Sass in Harp
Setting up the project
Inserting the CSS
Inserting the JavaScript
Other directories
Setting up the layout
Compiling your project
Previewing your project
Deploying your project
Installing Surge
Using Surge to deploy your project
Summary
2. Using Bootstrap Build Tools
Different types of tools
Installing Node.js
Updating npm
Installing Grunt
Download the Bootstrap source files
Installing Ruby
Installing the Bundler gem
Running the documentation
Setting up the static site generator
Why use Harp.js
Installing Harp.js
Setting up the blog project
css
fonts
img
js
partial
EJS files
Setting up the JSON files
Creating the data JSON file
Setting up the layout
Setting up the header
Setting up the footer
Creating our first page template
Compiling your project
Running your project
Viewing your project
A note about Sass
Summary
3. Jumping into Flexbox
Flexbox basics and terminology
Ordering your Flexbox
Stretching your child sections to fit the parent container
Changing the direction of the boxes
Wrapping your Flexbox
Creating equal-height columns
Setting up the Bootstrap Flexbox layout grid
Updating the Sass variable
Setting up a Flexbox project
Adding a custom theme
Creating a basic three-column grid
Creating full-width layouts
Designing a single blog post
Summary
4. Working with Layouts
Working with containers
Creating a layout without a container
Using multiple containers on a single page
Inserting rows into your layout
Adding columns to your layout
Extra small
Small
Medium
Large
Extra large
Choosing a column class
Creating a simple three-column layout
Mixing column classes for different devices
What if I want to offset a column?
Coding the blog home page
Writing the index.ejs template
Using spacing CSS classes
Testing out the blog home page layout
Adding some content
What about mobile devices?
Using responsive utility classes
Coding the additional blog project page grids
Updating _data.json for our new pages
Creating the new page templates
Coding the contact page template
Adding the contact page body
Coding the blog post template
Adding the blog post feature
Adding the blog post body
Converting the mailing list section to a partial
Summary
5. Working with Content
Reboot defaults and basics
Headings and paragraphs
Lists
Preformatted text
Tables
Forms
Learning to use typography
Using display headings
Customizing headings
Using the lead class
Working with lists
Coding an unstyled list
Creating inline lists
Using description lists
How to style images
Making images responsive
Using image shapes
Aligning images with CSS
Coding tables
Setting up the basic table
Inversing a table
Inversing the table header
Adding striped rows
Adding borders to a table
Adding a hover state to rows
Color-coating table rows
Making tables responsive
Summary
6. Playing with Components
Using the button component
Basic button examples
Creating outlined buttons
Checkbox and radio buttons
Creating a radio button group
Using button groups
Creating vertical button groups
Coding a button dropdown
Creating a pop-up menu
Creating different size drop-down buttons
Coding forms in Bootstrap 4
Setting up a form
Adding a select dropdown
Inserting a textarea tag into your form
Adding a file input form field
Inserting radio buttons and checkboxes to a form
Adding a form to the blog contact page
Updating your project
Additional form fields
Creating an inline form
Hiding the labels in an inline form
Adding inline checkboxes and radio buttons
Changing the size of inputs
Controlling the width of form fields
Adding validation to inputs
Using the Jumbotron component
Adding the Label component
Using the Alerts component
Adding a dismiss button to alerts
Using Cards for layout
Moving the Card title
Changing text alignment in cards
Adding a header to a Card
Inverting the color scheme of a Card
Adding a location card to the Contact page
Updating the Blog index page
Adding the sidebar
Setting up the Blog post page
How to use the Navs component
Creating tabs with the Nav component
Creating a pill navigation
Using the Bootstrap Navbar component
Changing the color of the Navbar
Making the Navbar responsive
Adding Breadcrumbs to a page
Adding Breadcrumbs to the Blog post page
Using the Pagination component
Adding the Pager to the Blog post template
How to use the List Group component
Summary
7. Extending Bootstrap with JavaScript Plugins
Coding a Modal dialog
Coding the Modal dialog
Coding Tooltips
Updating the project layout
How to use Tooltips
How to position Tooltips
Adding Tooltips to buttons
Updating the layout for buttons
Avoiding collisions with our components
Using Popover components
Updating the JavaScript
Positioning Popover components
Adding a Popover to a button
Adding our Popover button in JavaScript
Using the Collapse component
Coding the collapsable content container
Coding an Accordion with the Collapse component
Coding a Bootstrap Carousel
Adding the Carousel bullet navigation
Including Carousel slides
Adding Carousel arrow navigation
Summary
8. Throwing in Some Sass
Learning the basics of Sass
Using Sass in the blog project
Updating the blog project
Using variables
Using the variables in CSS
Using other variables as variable values
Importing partials in Sass
Using mixins
How to use operators
Creating a collection of variables
Importing the variables to your custom style sheet
Adding a color palette
Adding some background colors
Setting up variables for typography
Coding the text color variables
Coding variables for links
Setting up border variables
Adding variables for margin and padding
Adding mixins to the variables file
Coding a border-radius mixin
Customizing components
Customizing the button component
Extending the button component to use our color palette
Writing a theme
Common components that need to be customized
Theming the drop-down component
Customizing the alerts component
Customizing the typography component
Summary
9. Migrating from Version 3
Browser support
Big changes in version 4
Switching to Sass
Updating your variables
Updating @import statements
Updating mixins
Additional global changes
Using REM units
Other font updates
New grid size
Migrating components
Migrating to the Cards component
Using icon fonts
Migrating JavaScript
Miscellaneous migration changes
Migrating typography
Migrating images
Migrating tables
Migrating forms
Migrating buttons
Summary
Learning Bootstrap 4 - Second Edition
Learning Bootstrap 4 - Second Edition
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: December 2014
Second edition: August 2016
Production reference: 1220816
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78588-100-8
www.packtpub.com
Credits
About the Author
Matt Lambert is a designer and developer with more than 16 years of experience. He currently works full-time as a senior product designer for CA Technologies in Vancouver, BC, Canada.
In his free time, he is an author, artist, and musician. In 2005, Matt founded Cardeo Creative, which is a small web design studio based in Vancouver. He works with a select list of clients on a part-time basis while producing his own products on the side.
To date, Matt has self-published three additional development books titled: Mastering Bootstrap, CSS3 Handbook, and the Freelance Startup Guide. He is also the author of Bootstrap Site Blueprints Volume II, Packt Publishing.
About the Reviewer
Sherwin Robles is a web application developer from the Philippines with a solid 5 years of experience of designing, developing, and implementing automated solutions. Most of his projects are built with the CakePHP framework with the help of Bootstrap, which makes development even faster. In April 2015 he joined INIGOTECH, a company that aims to make your ideas into reality.
His expertise is rooted in research and development endeavors on the subject of achieving improved levels of dependability from Internet and computing systems.
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 customercare@packtpub.com for more details.
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
Bootstrap, the most popular frontend framework built to design elegant, powerful, and responsive interfaces for professional-level web pages, has undergone a major overhaul. Bootstrap 4 introduces a wide range of new features that make frontend web design even more simple and exciting. In this comprehensive tutorial, we'll teach you everything you need to know to start building websites with Bootstrap 4 in a practical way. You'll get a feel of build tools such as Node, Grunt, and more to start building your project. You'll discover the principles of mobile-first design to ensure your pages can adapt to fit any screen size and meet the responsive requirements of the modern age. You'll get to play with Bootstrap’s grid system and base CSS to ensure your designs are robust and beautiful, and that your development process is speedy and efficient. Then, you'll find out how you can extend your current build with some cool JavaScript plugins, and throw in some Sass to spice things up and customize your themes. If you’ve tinkered with Bootstrap before and are planning on migrating to the latest version, we’ll give you just the right tricks to get you there. This book will make sure you’re geared up and ready to build amazingly beautiful and responsive websites in a jiffy.
What this book covers
Chapter 1 , Introducing Bootstrap 4, will be a quick overview of what Bootstrap is, what's new in Bootstrap 4, and why a developer should take the time to learn about the new framework. We'll also discuss the basic files and templates needed for any web page. I'll also cover the different ways you can download or build a Bootstrap project.
Chapter 2 , Using Bootstrap Build Tools, will teach the user how to use build tools such as Node, Grunt, and Autoprefixer to build their own projects.
Chapter 3 , Jumping into Flexbox, will give a quick explanation of what a flexbox layout is compared to traditional layouts. Also, you will learn about the benefits of flexbox and when to use it. Then it will briefly explain how to create a flexbox layout using the new Bootstrap layout component and review it with the reader.
Chapter 4 , Working with Layouts, will teach you the basic Bootstrap layout components and what is new in Bootstrap 4 in regard to them. For the components that are significantly different, the chapter will provide coded examples for the users.
Chapter 5 , Working with Content, covers the new Bootstrap CSS reset named REBOOT. It will also cover typography, code, images, tables, and figure components.
Chapter 6 , Playing with Components, will be one of the longer chapters in the book as it will cover a large amount of Bootstrap components. It will cover all remaining Bootstrap components, including Buttons, button groups, button drop-down, forms, input groups, drop-downs, jumbotron, labels, alerts, cards, navs, navbars, breadcrumbs, pagination, progress, and list groups.
Chapter 7, Extending Bootstrap with JavaScript Plugin, will cover any and all components in Bootstrap that rely on JavaScript. This will include Modal, Tooltips, Popovers, Collapse, and Carousel.
Chapter 8, Throwing in Some Sass, will explain how, in Bootstrap 4, the framework has moved from Less to Sass as its CSS preprocessor. It will cover the basics of using Sass in a Bootstrap theme and explain how you can customize or use existing variables or write your own.
Chapter 9, Migrating from Version 3, will cover the basic steps required to migrate a website from version 3 to 4 and point out some of the known trouble areas for doing this.
What you need for this book
To get started using Bootstrap 4 there are a few tools I would recommend installing on your computer. First of all you'll need a text editor like Sublime Text or Notepad. Secondly you'll need a command line tool. If you're on a MAC you can use Terminal which is included with OSX. If you're on Windows I would recommend downloading Cygwin. That's all you need to get started with the book. In Chapter 2, Using Bootstrap Build Tools, I'll cover the installation of a few other tools that we'll be using in our project like: Node.js, NPM, Grunt.js, Jekyll, Harp.js and Sass. If you already have those tools installed great! If not, don't worry we'll go through it step by step later in the book.
Who this book is for
If you want to learn to build enterprise-level websites efficiently with Bootstrap, this book is for you. You must have a basic and fundamental understanding of HTML, CSS, and JavaScript; however, there is no need to have prior Bootstrap experience.
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: Bootstrap has taken normalize.css and extended it with a new module.
A block of code is set as follows:
en>
utf-8>
viewport content=width=device-width, initial-scale=1, shrink-to-fit=no
>
Any command-line input or output is written as follows:
$ sudo npm install -g harp
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 first is the white button labeled Close, which, when clicked, will close the Modal.
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