Learning Bootstrap 4 - Second Edition

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