Table Of ContentBootstrap 4 Cookbook
Over 75 recipes to help you build elegant and responsive web
applications with Bootstrap 4
Ajdin Imsirovic
BIRMINGHAM - MUMBAI
Bootstrap 4 Cookbook
Copyright © 2017 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: June 2017
Production reference: 1290617
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-78588-929-5
www.packtpub.com
Credits
Author Copy Editor
Ajdin Imsirovic Dhanya Baburaj
Reviewer Project Coordinator
Zlatko Alomerovic Ritika Manoj
Commissioning Editor Proofreader
Ashwin Nair Safis Editing
Acquisition Editor Indexer
Siddharth Mandal Francy Puthiry
Content Development Editor Graphics
Arun Nadar Jason Monteiro
Technical Editor Production Coordinator
Rashil Shah Shantanu Zagade
About the Author
Ajdin Imsirovic has been working with frontend technologies, as well as web and print
design, for almost 2 decades. He is an accomplished video course creator and an author of a
wildly popular video course series on Bootstrap development. He is dedicated to making
the learning of the practical use of HTML, CSS, and JavaScript technologies with Bootstrap
easy and fruitful. In his Bootstrap 4 Cookbook, he brings together all his experience while
teaching Bootstrap development to make a must-read guide to the newest version of
Bootstrap.
I would like to thank my family for their selfless support. Without their help, I would not
have achieved nearly as many of my goals as I have. Also, I would like to thank all my
colleagues in the IT companies I have worked for who inspired me to learn and grow both
as a person and as a developer. You know who you are.
About the Reviewer
Zlatko Alomerovic is a full-stack web developer with a degree in electrical engineering and
computer science. Zlatko likes solving problems with Ruby. He chooses Ruby on Rails,
ReactJS, and EmberJS to get the job done. In his spare time, he gives lessons in Judo, teaches
kids to code, explores Blockchain, Bitcoin, and Ethereum technologies. Check out his
website at www.ingneer.com.
To my beautiful wife, thank you for your endless support and understanding.
www.PacktPub.com
For support files and downloads related to your book, please visit www.PacktPub.com.
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://www.packtpub.com/mapt
Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt
books and video courses, as well as industry-leading tools to help you plan your personal
development and advance your career.
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
Customer Feedback
Thanks for purchasing this Packt book. At Packt, quality is at the heart of our editorial
process. To help us improve, please leave us an honest review on this book's Amazon page
at https://www.amazon.com/dp/178588929X.
If you'd like to join our team of regular reviewers, you can e-mail us at
[email protected]. We award our regular reviewers with free eBooks and
videos in exchange for their valuable feedback. Help us be relentless in improving our
products!
Table of Contents
Preface
1
Chapter 1: Installing Bootstrap 4 and Comparing Its Versions
7
Introduction 7
Installing Bootstrap 4 to Cloud9 IDE using npm 8
Getting ready 9
How to do it... 10
Installing Bootstrap 4 to Cloud9 IDE via Git 12
Getting ready 13
How to do it... 13
Installing Bootstrap 4 Jekyll-powered docs 15
Getting ready 15
How to do it... 15
Customizing the styles of Bootstrap 4 docs 17
Getting ready 17
How to do it... 17
Making custom Grunt tasks in Bootstrap 4 20
Getting ready 20
How to do it... 21
How it works... 24
Comparing Bootstrap 4 versions with Bower 24
Getting ready 24
How to do it... 24
Installing Bootstrap 4 to our Cloud9 IDE with Bower 27
Getting ready 28
How to do it... 28
Chapter 2: Layout Like a Boss with the Grid System
29
Introduction 29
Preparing a static server with Bootstrap 4, Harp, and Grunt 30
Getting ready 30
How to do it... 30
Deploying your web project with Surge 41
Getting ready 42
How to do it... 42
Splitting up our Harp project into partials 44
How to do it... 44
Using containers with margin and padding utility classes 46
Getting ready 46
How to do it... 46
How it works... 48
Explanation of the data-* HTML5 attributes 48
There's more... 49
Renaming main.scss 49
Adding columns in a row 51
Getting ready 51
How to do it... 51
Making col-* classes work 53
Getting ready 53
How to do it... 53
Building a simple page with the default grid 55
Getting ready 56
How to do it... 56
How it works... 60
Building a real-life web page example with the default grid 60
Getting ready 61
How to do it... 61
How it works... 66
Chapter 3: Power Up with the Media Object, Text, Images, and Tables
67
Introduction 67
Extending the text classes of .display-* and adding hover effects with
Hover.css 69
Getting ready 69
How to do it... 70
How it works... 73
Creating comment sections using media objects 74
Getting ready 74
How to do it... 74
How it works... 77
Enriching text content with Bootstrap typography classes 78
Getting ready 79
How to do it... 79
How it works... 80
Customizing the blockquote element with CSS 81
Getting ready 81
[ ii ]
