Learning Bootstrap 4 - Second Edition

Matt Lambert

• Publisher: Packt Publishing
• Year: 2016
• eBook ISBN: 9781785888595
• Edition: 2
• Topic: Design
• Subtopic: Programming in JavaScript

Unearth the potential of Bootstrap 4 to create highly responsive and beautiful websites using modern web techniquesAbout This Book• 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 experienceWho This Book Is ForIf 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.What You Will Learn• Fire up Bootstrap and set up the required build tools to get started• See how and when to use Flexbox with the Bootstrap layouts• Find out how to make your websites responsive, keeping in mind Mobile First design• Work with content such as tables and figures• Play around with the huge variety of components that Bootstrap offers• Extend your build using plugins developed from JavaScript• Use Sass to customize your existing themesIn DetailBootstrap, the most popular front-end 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 front-end web design even simpler and exciting.In this gentle and comprehensive book, we'll teach you everything that you need to know to start building websites with Bootstrap 4 in a practical way. You'll learn about build tools such as Node, Grunt, and many others. You'll also discover the principles of mobile-first design in order to ensure your pages can fit any screen size and meet the responsive requirements. Learn to play with Bootstrap's grid system and base CSS to ensure your designs are robust 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. This book will make sure you're geared up and ready to build amazingly beautiful and responsive websites in a jiffy.Style and approachWith the help of several real-world examples and code, this book will teach you to build a full-featured responsive website in Bootstrap, which is mobile-ready.

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

Author Matt Lambert	Copy Editor Safis Editing
Reviewer Sherwin Robles	Project Coordinator Ulhas Kambali
Commiss ioning Editor Wilson Dsouza	Proofreader Safis Editing
Acquisition Editor Dharmesh Parmar	Indexer Tejal Daruwale Soni
Content Development Editor Prashanth G Rao	Production Coordinator Melwyn Dsa
Technical Editor Murtaza Tinwala	Graphics Abhinash Sahu

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 [email protected] 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, Migra...

Table of contents

• Learning Bootstrap 4 - Second Edition