Complete Bootstrap: Responsive Web Development with Bootstrap 4

Learn all the new features and build a set of example applications for your portfolio with the latest version of Bootstrap
Preview in Mapt

Complete Bootstrap: Responsive Web Development with Bootstrap 4

Matt Lambert et al.

Learn all the new features and build a set of example applications for your portfolio with the latest version of Bootstrap

Quick links: > What will you learn?> Table of content

Mapt Subscription
FREE
$29.99/m after trial
eBook
$25.20
RRP $35.99
Save 29%
Print + eBook
$44.99
RRP $44.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$25.20
$44.99
$29.99 p/m after trial
RRP $35.99
RRP $44.99
Subscription
eBook
Print + eBook
Start 14 Day Trial

Frequently bought together


Complete Bootstrap: Responsive Web Development with Bootstrap 4 Book Cover
Complete Bootstrap: Responsive Web Development with Bootstrap 4
$ 35.99
$ 25.20
Learn Bootstrap 4 Responsive Web Development [Video] Book Cover
Learn Bootstrap 4 Responsive Web Development [Video]
$ 49.99
$ 42.50
Buy 2 for $35.00
Save $50.98
Add to Cart

Book Details

ISBN 139781788833400
Paperback403 pages

Book Description

Since its debut in August 2011, Bootstrap has become by far the most popular framework for empowering and enhancing frontend web design. With version 4, Bootstrap reaches an exciting new milestone, a lean code base optimized for modern browsers. Bootstrap 4 introduces a wide range of new features that make frontend web design even more simple and exciting. So, if you're interested to unearth the potential of Bootstrap 4 to build highly responsive and beautiful websites using modern web techniques, then you should surely go for this course.

The highlights of this course are:

Learn out how to make your websites responsive

Explore the robust features of Bootstrap 4 and create exciting websites through excellent hands-on projects

Find out how to extend the capabilities of Bootstrap with a huge range of tools and plugins, including jQuery

Customize your designs by working directly with SASS files

Let’s take a quick look at your learning journey. In this comprehensive course, you’ll learn everything that you need to know excel in Bootstrap web development. You’ll first learn to build a simple blog named Hello World! You'll then discover the principles of mobile-first design in order to ensure your pages can fit any screen size and meet the responsive requirements. You’ll 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. You’ll then 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. Finally, you’ll go through different hands-on projects on Bootstrap such as building your portfolio, building an ecommerce website, and many more!

By the end of this course, you will able to build amazingly beautiful and responsive websites with Bootstrap.

Note: This course is a blend of text and quizzes, all packaged up keeping your journey in mind. It includes content from the following Packt products:

  • Learning Bootstrap 4, Second Edition by Matt Lambert
  • Bootstrap 4 Site Blueprints by Bass Jobsen, David Cochran, and Ian Whitley

Table of Contents

Chapter 1: Setting up Our First Blog Project
Implementing framework files
Inserting the JavaScript files
The starter template
Normalizing and Rebooting
Taking the starter template further
Using a static site generator
Converting the base template to a generator
Setting up the blog project
Setting up the JSON files
Creating our first page template
Browser support
Summary
Assessments
Chapter 2: 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
Assessments
Chapter 3: 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
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
Summary
Assessments
Chapter 4: Working with Content
Reboot defaults and basics
Learning to use typography
Customizing headings
Making images responsive
Coding tables
Summary
Assessments
Chapter 5: Playing with Components
Using the button component
Basic button examples
Creating outlined buttons
Checkbox and radio buttons
Coding forms in Bootstrap 4
Additional form fields
Creating an inline form
Adding inline checkboxes and radio buttons
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
How to use the List Group component
Summary
Assessments
Chapter 6: Extending Bootstrap with JavaScript Plugins
Coding a Modal dialog
Coding Tooltips
Avoiding collisions with our components
Using Popover components
Adding a Popover to a button
Using the Collapse component
Coding an Accordion with the Collapse component
Coding a Bootstrap Carousel
Summary
Assessments
Chapter 7: 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
Assessments
Chapter 8: Bootstrapping Your Portfolio
What we'll build
Surveying the exercise files
Marking up the carousel
Creating responsive columns
Turning links into buttons
Understanding the power of Sass
Customizing Bootstrap's Sass according to our needs
Adding the logo image
Adding icons
Styling the carousel
Tweaking the columns and their content
Styling the footer
Recommended next steps
Summary
Assessments
Chapter 9: Bootstrapping Business
Sizing up our beginning files
Setting up the basics of your design
Creating a complex banner area
Adding utility navigation
Making responsive adjustments
Implementing the color scheme
Styling the collapsed navbar
Styling the horizontal navbar
Enabling Flexbox support
Designing a complex responsive layout
Laying out a complex footer
Setting up the markup
Summary
Assessments
Chapter 10: Bootstrapping E-Commerce
Surveying the markup for our products page
Styling the breadcrumbs, page title, and pagination
Adjusting the products grid
Styling the options sidebar
Adding a search form to your designing
Summary
Assessments
Chapter 11: Bootstrapping a One-Page Marketing Website
Overview
Surveying the starter files
Viewing the page content
Adding Font Awesome to our project
Adjusting the navbar
Customizing the jumbotron
Beautifying the features list
Tackling customer reviews
Creating attention-grabbing pricing tables
Adding the final touches
Adding ScrollSpy to the navbar
Summary
Assessments
Chapter 12: Assessment Answers

What You Will Learn

  • Fire up Bootstrap and set up the required build tools to get started
  • Understand how and when to use Flexbox with the Bootstrap layouts
  • 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
  • Play around with the huge variety of components that Bootstrap offers
  • Customize your designs by working directly with Bootstrap's SASS files
  • Explore the inner workings of Bootstrap 4 by building different websites

Authors

Table of Contents

Chapter 1: Setting up Our First Blog Project
Implementing framework files
Inserting the JavaScript files
The starter template
Normalizing and Rebooting
Taking the starter template further
Using a static site generator
Converting the base template to a generator
Setting up the blog project
Setting up the JSON files
Creating our first page template
Browser support
Summary
Assessments
Chapter 2: 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
Assessments
Chapter 3: 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
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
Summary
Assessments
Chapter 4: Working with Content
Reboot defaults and basics
Learning to use typography
Customizing headings
Making images responsive
Coding tables
Summary
Assessments
Chapter 5: Playing with Components
Using the button component
Basic button examples
Creating outlined buttons
Checkbox and radio buttons
Coding forms in Bootstrap 4
Additional form fields
Creating an inline form
Adding inline checkboxes and radio buttons
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
How to use the List Group component
Summary
Assessments
Chapter 6: Extending Bootstrap with JavaScript Plugins
Coding a Modal dialog
Coding Tooltips
Avoiding collisions with our components
Using Popover components
Adding a Popover to a button
Using the Collapse component
Coding an Accordion with the Collapse component
Coding a Bootstrap Carousel
Summary
Assessments
Chapter 7: 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
Assessments
Chapter 8: Bootstrapping Your Portfolio
What we'll build
Surveying the exercise files
Marking up the carousel
Creating responsive columns
Turning links into buttons
Understanding the power of Sass
Customizing Bootstrap's Sass according to our needs
Adding the logo image
Adding icons
Styling the carousel
Tweaking the columns and their content
Styling the footer
Recommended next steps
Summary
Assessments
Chapter 9: Bootstrapping Business
Sizing up our beginning files
Setting up the basics of your design
Creating a complex banner area
Adding utility navigation
Making responsive adjustments
Implementing the color scheme
Styling the collapsed navbar
Styling the horizontal navbar
Enabling Flexbox support
Designing a complex responsive layout
Laying out a complex footer
Setting up the markup
Summary
Assessments
Chapter 10: Bootstrapping E-Commerce
Surveying the markup for our products page
Styling the breadcrumbs, page title, and pagination
Adjusting the products grid
Styling the options sidebar
Adding a search form to your designing
Summary
Assessments
Chapter 11: Bootstrapping a One-Page Marketing Website
Overview
Surveying the starter files
Viewing the page content
Adding Font Awesome to our project
Adjusting the navbar
Customizing the jumbotron
Beautifying the features list
Tackling customer reviews
Creating attention-grabbing pricing tables
Adding the final touches
Adding ScrollSpy to the navbar
Summary
Assessments
Chapter 12: Assessment Answers

Book Details

ISBN 139781788833400
Paperback403 pages
Read More

Read More Reviews

Recommended for You

Learn Bootstrap 4 Responsive Web Development [Video] Book Cover
Learn Bootstrap 4 Responsive Web Development [Video]
$ 49.99
$ 42.50
Vue.js 2 and Bootstrap 4 Web Development Book Cover
Vue.js 2 and Bootstrap 4 Web Development
$ 35.99
$ 25.20
Bootstrap 4 Recipes [Video] Book Cover
Bootstrap 4 Recipes [Video]
$ 124.99
$ 106.25
Bootstrap 4 - Responsive Web Design Book Cover
Bootstrap 4 - Responsive Web Design
$ 71.99
$ 50.40
Web Development with Bootstrap 4 and Angular 2 - Second Edition Book Cover
Web Development with Bootstrap 4 and Angular 2 - Second Edition
$ 39.99
$ 28.00
Responsive Web Design by Example Book Cover
Responsive Web Design by Example
$ 31.99
$ 22.40