Learning Bootstrap 4 - Second Edition

Unearth the potential of Bootstrap 4 to create highly responsive and beautiful websites using modern web techniques

Learning Bootstrap 4 - Second Edition

This ebook is included in a Mapt subscription
Matt Lambert

5 customer reviews
Unearth the potential of Bootstrap 4 to create highly responsive and beautiful websites using modern web techniques
$0.00
$16.00
$39.99
$29.99p/m after trial
RRP $31.99
RRP $39.99
Subscription
eBook
Print + eBook
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

Book Details

ISBN 139781785881008
Paperback246 pages

Book Description

Bootstrap, 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.

Table of Contents

Chapter 1: Introducing Bootstrap 4
Introducing Bootstrap
Summary
Chapter 2: Using Bootstrap Build Tools
Different types of tools
Download the Bootstrap source files
Setting up the blog project
Setting up the JSON files
Creating our first page template
Summary
Chapter 3: Jumping into Flexbox
Flexbox basics and terminology
Ordering your Flexbox
Wrapping your Flexbox
Setting up the Bootstrap Flexbox layout grid
Setting up a Flexbox project
Designing a single blog post
Summary
Chapter 4: Working with Layouts
Working with containers
Inserting rows into your layout
Adding columns to your layout
Choosing a column class
Creating a simple three-column layout
Mixing column classes for different devices
Coding the blog home page
Using responsive utility classes
Summary
Chapter 5: Working with Content
Reboot defaults and basics
Learning to use typography
Customizing headings
How to style images
Coding tables
Summary
Chapter 6: Playing with Components
Using the button component
Basic button examples
Creating outlined buttons
Checkbox and radio buttons
Coding forms in Bootstrap 4
Creating an inline form
Adding validation to inputs
Using the Jumbotron component
Adding the Label component
Using the Alerts component
Using Cards for layout
Updating the Blog index page
How to use the Navs component
Adding Breadcrumbs to a page
Using the Pagination component
How to use the List Group component
Summary
Chapter 7: Extending Bootstrap with JavaScript Plugins
Coding a Modal dialog
Coding Tooltips
Avoiding collisions with our components
Using Popover components
Using the Collapse component
Coding an Accordion with the Collapse component
Coding a Bootstrap Carousel
Summary
Chapter 8: Throwing in Some Sass
Learning the basics of Sass
Using Sass in the blog project
Importing partials in Sass
Creating a collection of variables
Customizing components
Writing a theme
Summary
Chapter 9: Migrating from Version 3
Browser support
Big changes in version 4
Updating your variables
Additional global changes
Other font updates
Migrating components
Migrating JavaScript
Miscellaneous migration changes
Summary

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 themes

Authors

Table of Contents

Chapter 1: Introducing Bootstrap 4
Introducing Bootstrap
Summary
Chapter 2: Using Bootstrap Build Tools
Different types of tools
Download the Bootstrap source files
Setting up the blog project
Setting up the JSON files
Creating our first page template
Summary
Chapter 3: Jumping into Flexbox
Flexbox basics and terminology
Ordering your Flexbox
Wrapping your Flexbox
Setting up the Bootstrap Flexbox layout grid
Setting up a Flexbox project
Designing a single blog post
Summary
Chapter 4: Working with Layouts
Working with containers
Inserting rows into your layout
Adding columns to your layout
Choosing a column class
Creating a simple three-column layout
Mixing column classes for different devices
Coding the blog home page
Using responsive utility classes
Summary
Chapter 5: Working with Content
Reboot defaults and basics
Learning to use typography
Customizing headings
How to style images
Coding tables
Summary
Chapter 6: Playing with Components
Using the button component
Basic button examples
Creating outlined buttons
Checkbox and radio buttons
Coding forms in Bootstrap 4
Creating an inline form
Adding validation to inputs
Using the Jumbotron component
Adding the Label component
Using the Alerts component
Using Cards for layout
Updating the Blog index page
How to use the Navs component
Adding Breadcrumbs to a page
Using the Pagination component
How to use the List Group component
Summary
Chapter 7: Extending Bootstrap with JavaScript Plugins
Coding a Modal dialog
Coding Tooltips
Avoiding collisions with our components
Using Popover components
Using the Collapse component
Coding an Accordion with the Collapse component
Coding a Bootstrap Carousel
Summary
Chapter 8: Throwing in Some Sass
Learning the basics of Sass
Using Sass in the blog project
Importing partials in Sass
Creating a collection of variables
Customizing components
Writing a theme
Summary
Chapter 9: Migrating from Version 3
Browser support
Big changes in version 4
Updating your variables
Additional global changes
Other font updates
Migrating components
Migrating JavaScript
Miscellaneous migration changes
Summary

Book Details

ISBN 139781785881008
Paperback246 pages
Read More
From 5 reviews

Read More Reviews