Bootstrap 4 By Example

Learn responsive web development with Bootstrap 4's front end framework
Preview in Mapt

Bootstrap 4 By Example

Silvio Moreto

1 customer reviews
Learn responsive web development with Bootstrap 4's front end framework

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

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


Bootstrap 4 By Example Book Cover
Bootstrap 4 By Example
$ 35.99
$ 25.20
Bootstrap 4 Site Blueprints Book Cover
Bootstrap 4 Site Blueprints
$ 39.99
$ 28.00
Buy 2 for $35.00
Save $40.98
Add to Cart

Book Details

ISBN 139781785288876
Paperback324 pages

Book Description

Bootstrap is a free, open source collection of tools that helps developers create websites or web applications. It provides a faster, easier, and less repetitive solution to designing and building applications. Before Bootstrap’s release, it was necessary to import a variety of libraries into your project that offered different components and features for web interface development. Plus with the increased popularity of smartphones there were lack of libraries that could handle the responsiveness of a web page. Bootstrap‘s existence let it quickly become famous as a front-end framework that offered a wide set of tools from page grid up to components that render a web page in the best possible way for any device.

This book will be a tutorial covering various examples as well as step-by-step methodology to create interesting web applications using Bootstrap and to understand the front-end framework to its core.

We begin with an introduction to the Bootstrap framework and setting up an environment to build a simple web page. We then cover the grid system, basic Bootstrap components, HTML elements, and customization components for responsive and mobile first development. This is presented by creating a beautiful Landing page sample. You will also learn how to create a web application like Twitter by using the full set of components offered in the framework. Finally, you will learn to create a dashboard web app, using Bootstrap to its finest potential including component customizations, event handling, and external library integration. All these examples are explained step-by-step and in depth, while covering the versions 3 and the most recent version 4 of Bootstrap. So, you will be in the state of the art for front-end development.

By the end of this book, you will be familiar with the development of a plugin for the framework and Bootstrap’s world which is popular for fast paced front-end web development, used in countless projects all over the world, and now yours.

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

What You Will Learn

  • Discover how to use Bootstrap’s components and elements, and to customize them for your own projects
  • Understand the framework’s usage in the best way with the recommended development patterns
  • Create web pages for any kind of device like tablet, mobile, computer, etc.
  • Construct a Twitter app by exploring the advanced bootstrap components like Breadcrumbs, Pagination, Media objects, and so on
  • Combine the power of JavaScript with your Bootstrap app for more functionality
  • Create a Dashboard web app using Bootstrap’s JavaScript plugins
  • Learn the difference between Bootstrap’s version 3 and 4 of the framework
  • Extend your knowledge on Bootstrap’s external plugins, their incorporation and usage

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

Book Details

ISBN 139781785288876
Paperback324 pages
Read More
From 1 reviews

Read More Reviews

Recommended for You

Bootstrap 4 Site Blueprints Book Cover
Bootstrap 4 Site Blueprints
$ 39.99
$ 28.00
Learning Bootstrap 4 - Second Edition Book Cover
Learning Bootstrap 4 - Second Edition
$ 31.99
$ 22.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
HTML5 and CSS3: Building Responsive Websites Book Cover
HTML5 and CSS3: Building Responsive Websites
$ 67.99
$ 47.60
Angular 2 By Example Book Cover
Angular 2 By Example
$ 35.99
$ 25.20
Learning Angular 2 Book Cover
Learning Angular 2
$ 31.99
$ 22.40