Bootstrap 4 - Responsive Web Design

Unearth the potential of Bootstrap with step-by-step guidance.
Preview in Mapt
Code Files

Bootstrap 4 - Responsive Web Design

Silvio Moreto et al.

3 customer reviews
Unearth the potential of Bootstrap with step-by-step guidance.
Mapt Subscription
FREE
$29.99/m after trial
eBook
$50.40
RRP $71.99
Save 29%
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
$50.40
$29.99 p/m after trial
RRP $71.99
Subscription
eBook
Start 14 Day Trial

Frequently bought together


Bootstrap 4 - Responsive Web Design Book Cover
Bootstrap 4 - Responsive Web Design
$ 71.99
$ 50.40
Java: Data Science Made Easy Book Cover
Java: Data Science Made Easy
$ 67.99
$ 47.60
Buy 2 for $35.00
Save $104.98
Add to Cart

Book Details

ISBN 139781788397315
Paperback810 pages

Book Description

Bootstrap framework's ease-of-use (along with its cross-browser compatibility, support for mobile user interfaces, and responsive web design capabilities) makes it an essential building block for any modern web application.

With the first module, plunge into the Bootstrap frontend framework with the help of examples that will illustrate the use of each element and component in a proper way. You will get a better understanding of what is happening and where you want to reach. Also, you will gain confidence with the framework and develop some very common examples using Bootstrap. All these examples are explained step by step and in depth.

The second module is a comprehensive tutorial; 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 that your pages can fit any screen size and meet responsive requirements. Learn Bootstrap's grid system and base CSS to ensure that your designs are robust and that your development process is speedy and efficient.
Right from the first chapter of the third module, you'll delve into building a customized Bootstrap website from scratch. Get to grips with Bootstrap's key features and quickly discover the various ways in which Bootstrap can help you develop web interfaces. Once you reach the final pages of this book, you should have mastered the framework's ins and outs, and should be building highly customizable and optimized web interfaces.

The course will enable you to rapidly build elegant, powerful, and responsive interfaces for professional-level web pages using Bootstrap 4.

This Learning Path combines some of the best that Packt has to offer in one complete, curated package. It includes content from the following Packt products:

Table of Contents

Chapter 1: Getting Started
Getting Bootstrap
Setting up the framework
Building our first Bootstrap example
Optionally using the CDN setup
Community activity
Bootstrap and web applications
Browser compatibility
Summary
Chapter 2: Creating a Solid Scaffolding
Understanding the grid system
Building our scaffolding
Fluid container
We need some style!
Manipulating tables
Like a boss!
Final thoughts
Summary
Chapter 3: Yes, You Should Go Mobile First
Making it greater
Bootstrap and the mobile-first design
How to debug different viewports at the browser
Cleaning up the mess
Creating the landing page for different devices
Summary
Chapter 4: Applying the Bootstrap Style
Changing our grid layout
Summary
Chapter 5: Making It Fancy
Using Bootstrap icons
Paying attention to your navigation
Dropping it down
Making an input grouping
Getting ready for flexbox!
Summary
Chapter 6: Can You Build a Web App?
Understanding web applications
Adding the navigation
Do a grid again
Playing the cards
Implementing the main content
Creating breadcrumbs
Finishing with the right-hand-side content
Summary
Chapter 7: Of Course, You Can Build a Web App!
Alerts in our web app
Waiting for the progress bar
Creating a settings page
Summary
Chapter 8: Working with JavaScript
Understanding JavaScript plugins
Awesome Bootstrap modals
Creating our custom modal
A tool for your tip
Pop it all over
Making the menu affix
Finishing the web app
Summary
Chapter 9: Entering in the Advanced Mode
The master plan
The last navigation bar with flexbox
Filling the main fluid content
Filling the main content
Overhead loading
Fixing the toggle button for mobile
Summary
Chapter 10: Bringing Components to Life
Creating the main cards
Fixing the mobile viewport
Learning more advanced plugins
Summary
Chapter 11: Making It Your Taste
Customizing a Bootstrap component
Working with plugin customization
The additional Bootstrap plugins
Creating our Bootstrap plugin
Defining the plugin methods
Creating additional plugin methods
Summary
Chapter 12: Introducing Bootstrap 4
Introducing Bootstrap
Summary
Chapter 13: 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 14: 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 15: 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 16: Working with Content
Reboot defaults and basics
Learning to use typography
Customizing headings
How to style images
Coding tables
Summary
Chapter 17: 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 18: 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 19: 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 20: 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
Chapter 21: Revving Up Bootstrap
Introducing our demo project
What Bootstrap 4 Alpha 4 has to offer
Setting up our project
Summary
Chapter 22: Making a Style Statement
The grid system
Image elements
Responsive utilities
Helper classes
Text alignment and transformation
Summary
Chapter 23: Building the Layout
Splitting it up
Adding Bootstrap components
Summary
Chapter 24: On Navigation, Footers, Alerts, and Content
Fixating the navbar
Improving navigation using Scrollspy
Customizing scroll speed
Icons
Using and customizing alerts
Creating a footer
Creating and customizing forms
Form validation
Progress indicators
Adding content using media objects
Figures
Quotes
Abbreviations
Summary
Chapter 25: Speeding Up Development Using jQuery Plugins
Browser detection
Enhanced pagination using bootpag
Displaying images using Bootstrap Lightbox
Improving our price list with DataTables
Summary
Chapter 26: Customizing Your Plugins
Anatomy of a plugin
Customizing plugins
Writing a custom Bootstrap jQuery plugin
Summary
Chapter 27: Integrating Bootstrap with Third-Party Plugins
Building a testimonial component with Salvattore
Hover
Summary
Chapter 28: Optimizing Your Website
CSS optimization
Minifying CSS and JavaScript
Introducing Grunt
Running tasks automatically
Stripping our website of unused CSS
JavaScript file concatenation
Summary
Chapter 29: Integrating with AngularJS and React
Introducing AngularJS
Introducing React
Summary

What You Will Learn

  • Discover how to use Bootstrap's components and elements, and customize them for your own projects
  • Understand the framework's usage in the best way with the recommended development patterns
  • Use Sass to customize your existing themes
  • Apply the Bootstrap mobile-first grid system and add responsiveness and aesthetic touches to image elements
  • Customize the behavior and features of Bootstrap’s jQuery Plugins extensively
  • Style various types of content and learn how to build a page’s layout from scratch by applying the power of Bootstrap 4
  • Work with content, such as tables and figures

Authors

Table of Contents

Chapter 1: Getting Started
Getting Bootstrap
Setting up the framework
Building our first Bootstrap example
Optionally using the CDN setup
Community activity
Bootstrap and web applications
Browser compatibility
Summary
Chapter 2: Creating a Solid Scaffolding
Understanding the grid system
Building our scaffolding
Fluid container
We need some style!
Manipulating tables
Like a boss!
Final thoughts
Summary
Chapter 3: Yes, You Should Go Mobile First
Making it greater
Bootstrap and the mobile-first design
How to debug different viewports at the browser
Cleaning up the mess
Creating the landing page for different devices
Summary
Chapter 4: Applying the Bootstrap Style
Changing our grid layout
Summary
Chapter 5: Making It Fancy
Using Bootstrap icons
Paying attention to your navigation
Dropping it down
Making an input grouping
Getting ready for flexbox!
Summary
Chapter 6: Can You Build a Web App?
Understanding web applications
Adding the navigation
Do a grid again
Playing the cards
Implementing the main content
Creating breadcrumbs
Finishing with the right-hand-side content
Summary
Chapter 7: Of Course, You Can Build a Web App!
Alerts in our web app
Waiting for the progress bar
Creating a settings page
Summary
Chapter 8: Working with JavaScript
Understanding JavaScript plugins
Awesome Bootstrap modals
Creating our custom modal
A tool for your tip
Pop it all over
Making the menu affix
Finishing the web app
Summary
Chapter 9: Entering in the Advanced Mode
The master plan
The last navigation bar with flexbox
Filling the main fluid content
Filling the main content
Overhead loading
Fixing the toggle button for mobile
Summary
Chapter 10: Bringing Components to Life
Creating the main cards
Fixing the mobile viewport
Learning more advanced plugins
Summary
Chapter 11: Making It Your Taste
Customizing a Bootstrap component
Working with plugin customization
The additional Bootstrap plugins
Creating our Bootstrap plugin
Defining the plugin methods
Creating additional plugin methods
Summary
Chapter 12: Introducing Bootstrap 4
Introducing Bootstrap
Summary
Chapter 13: 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 14: 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 15: 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 16: Working with Content
Reboot defaults and basics
Learning to use typography
Customizing headings
How to style images
Coding tables
Summary
Chapter 17: 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 18: 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 19: 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 20: 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
Chapter 21: Revving Up Bootstrap
Introducing our demo project
What Bootstrap 4 Alpha 4 has to offer
Setting up our project
Summary
Chapter 22: Making a Style Statement
The grid system
Image elements
Responsive utilities
Helper classes
Text alignment and transformation
Summary
Chapter 23: Building the Layout
Splitting it up
Adding Bootstrap components
Summary
Chapter 24: On Navigation, Footers, Alerts, and Content
Fixating the navbar
Improving navigation using Scrollspy
Customizing scroll speed
Icons
Using and customizing alerts
Creating a footer
Creating and customizing forms
Form validation
Progress indicators
Adding content using media objects
Figures
Quotes
Abbreviations
Summary
Chapter 25: Speeding Up Development Using jQuery Plugins
Browser detection
Enhanced pagination using bootpag
Displaying images using Bootstrap Lightbox
Improving our price list with DataTables
Summary
Chapter 26: Customizing Your Plugins
Anatomy of a plugin
Customizing plugins
Writing a custom Bootstrap jQuery plugin
Summary
Chapter 27: Integrating Bootstrap with Third-Party Plugins
Building a testimonial component with Salvattore
Hover
Summary
Chapter 28: Optimizing Your Website
CSS optimization
Minifying CSS and JavaScript
Introducing Grunt
Running tasks automatically
Stripping our website of unused CSS
JavaScript file concatenation
Summary
Chapter 29: Integrating with AngularJS and React
Introducing AngularJS
Introducing React
Summary

Book Details

ISBN 139781788397315
Paperback810 pages
Read More
From 3 reviews

Read More Reviews

Recommended for You

Java: Data Science Made Easy Book Cover
Java: Data Science Made Easy
$ 67.99
$ 47.60
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
Responsive Web Design by Example Book Cover
Responsive Web Design by Example
$ 31.99
$ 22.40
Web Developer Toolbox - Essentials for Modern Web Development [Video] Book Cover
Web Developer Toolbox - Essentials for Modern Web Development [Video]
$ 124.99
$ 106.25
UX Design - Understanding the User and Business [Video] Book Cover
UX Design - Understanding the User and Business [Video]
$ 124.99
$ 106.25