Learning Bootstrap 4 - Programmer Books

1 Learning Bootstrap 4 Second Edition Unearth the potential of Bootstrap 4 to create highlyresponsive and beautiful websites using modern webtechniques Matt Lambert BIRMINGHAM - MUMBAIL earning Bootstrap 4 Second Edition Copyright 2016 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, ortransmitted in any form or by any means, without the prior written permission of thepublisher, except in the case of brief quotations embedded in critical articles or effort has been made in the preparation of this book to ensure the accuracy of theinformation presented.

2 However, the information contained in this book is sold withoutwarranty, either express or implied. Neither the author, nor Packt Publishing, and itsdealers and distributors will be held liable for any damages caused or alleged to be causeddirectly or indirectly by this Publishing has endeavored to provide trademark information about all of thecompanies and products mentioned in this book by the appropriate use of , Packt Publishing cannot guarantee the accuracy of this published: December 2014 Second edition: August 2016 Production reference: 1220816 Published by Packt Publishing Place35 Livery StreetBirmingham B3 2PB, Matt LambertCopy Editor Safis EditingReviewer Sherwin RoblesProject Coordinator Ulhas KambaliCommissioning Editor Wilson DsouzaProofreader Safis EditingAcquisition Editor Dharmesh ParmarIndexer Tejal Daruwale SoniContent Development Editor Prashanth G RaoProduction Coordinator Melwyn DsaTechnical Editor Murtaza TinwalaGraphics Abhinash SahuAbout the AuthorMatt Lambert is a designer and developer with more than 16 years of experience.

3 Hecurrently works full-time as a senior product designer for CA Technologies in Vancouver,BC, his free time, he is an author, artist, and musician. In 2005, Matt founded CardeoCreative, which is a small web design studio based in Vancouver. He works with a selectlist of clients on a part-time basis while producing his own products on the date, Matt has self-published three additional development Books titled: MasteringBootstrap, CSS3 Handbook, and the Freelance Startup Guide. He is also the author of BootstrapSite Blueprints Volume II, Packt the ReviewerSherwin Robles is a web application developer from the Philippines with a solid 5 years ofexperience of designing, developing, and implementing automated solutions.

4 Most of hisprojects are built with the CakePHP framework with the help of Bootstrap , which makesdevelopment even faster. In April 2015 he joined INIGOTECH, a company that aims tomake your ideas into expertise is rooted in research and development endeavors on the subject of achievingimproved levels of dependability from Internet and computing , discount offers, and moreDid you know that Packt offers eBook versions of every book published, with PDF andePub files available? You can upgrade to the eBook version at and as aprint book customer, you are entitled to a discount on the eBook copy.

5 Get in touch with usat for more , you can also read a collection of free technical articles, sign up for arange of free newsletters and receive exclusive discounts and offers on Packt Books t t p s : / / w w w 2 . p a c k t p u b . c o m / b o o k s / s u b s c r i p t i o n / p a c k t l i bDo you need instant solutions to your IT questions? PacktLib is Packt's online digital booklibrary. Here, you can search, access, and read Packt's entire library of subscribe?Fully searchable across every book published by PacktCopy and paste, print, and bookmark contentOn demand and accessible via a web browserTable of ContentsPreface1 Chapter 1.

6 Introducing Bootstrap 47 Introducing Bootstrap7 Bootstrap 4 advantages8 Improved grid system and flexbox8 Card component8 Rebooting Explorer 8 support dropped9 Other updates9 Implementing framework files9 Inserting the JavaScript files10 The starter template10 HTML5 DOCTYPE11 Structuring the responsive meta tag12 Normalizing and Rebooting12 Taking the starter template further12 Using a static site generator12 Converting the base template to a generator13 Installing Sass in Harp14 Setting up the project14 Inserting the CSS14 Inserting the JavaScript14 Other directories14 Setting up the layout15 Compiling your project16 Previewing your project16 Deploying your project16 Installing Surge17 Using Surge to deploy your project17 Summary17 Chapter 2.

7 Using Bootstrap Build Tools18 Different types of tools18 Installing npm19 Installing Grunt21[ ii ]Download the Bootstrap source files22 Installing Ruby22 Installing the Bundler gem24 Running the documentation25 Setting up the static site generator25 Why use up the blog project27css27fonts27img27js28partial28 EJS files28 Setting up the JSON files28 Creating the data JSON file29 Setting up the layout30 Setting up the header31 Setting up the footer33 Creating our first page template34 Compiling your project34 Running your project35 Viewing your project35A note about Sass37 Summary37 Chapter 3.

8 Jumping into Flexbox38 Flexbox basics and terminology38 Ordering your Flexbox39 Stretching your child sections to fit the parent container41 Changing the direction of the boxes41 Wrapping your Flexbox43 Creating equal-height columns45 Setting up the Bootstrap Flexbox layout grid51 Updating the Sass variable51 Setting up a Flexbox project52 Adding a custom theme53 Creating a basic three-column grid54 Creating full-width layouts56 Designing a single blog post57[ iii ]Summary60 Chapter 4: Working with Layouts61 Working with containers61 Creating a layout without a container63 Using multiple containers on a single page63 Inserting rows into your layout64 Adding columns to your layout65 Extra small65 Small65 Medium65 Large66 Extra large66 Choosing a column class66 Creating a simple three-column layout66 Mixing column classes for different devices68 What if I want to offset a column?

9 69 Coding the blog home page70 Writing the template70 Using spacing CSS classes71 Testing out the blog home page layout72 Adding some content73 What about mobile devices?75 Using responsive utility classes77 Coding the additional blog project page grids77 Updating for our new pages77 Creating the new page templates78 Coding the contact page template78 Adding the contact page body79 Coding the blog post template82 Adding the blog post feature82 Adding the blog post body83 Converting the mailing list section to a partial84 Summary87 Chapter 5: Working with Content88 Reboot defaults and basics88 Headings and paragraphs89 Lists89 Preformatted text89 Tables89 Forms89[ iv ]

10 Learning to use typography90 Using display headings90 Customizing headings91 Using the lead class91 Working with lists92 Coding an unstyled list92 Creating inline lists94 Using description lists94 How to style images95 Making images responsive95 Using image shapes96 Aligning images with CSS96 Coding tables98 Setting up the basic table98 Inversing a table99 Inversing the table header100 Adding striped rows101 Adding borders to a table101 Adding a hover state to rows102 Color-coating table rows103 Making tables responsive104 Summary104 Chapter 6: Playing with Components105 Using the button component105 Basic button examples105 Creating outlined buttons106 Checkbox and radio buttons107 Creating a radio button group108 Using button groups110 Creating vertical button groups110 Coding a button dropdown111 Creating a pop-up menu112 Creating different size drop-down buttons113 Coding forms in Bootstrap 4114 Setting up a form114 Adding a select dropdown115 Inserting a textarea tag into your form117 Adding a file input form field117 Inserting radio buttons and checkboxes to a form118 Adding a form to the blog