Mastering Bootstrap 4

Mastering Bootstrap 4

by Benjamin Jakobus, Jason Marah
Released September 2016
Publisher(s): Packt Publishing
ISBN: 9781783981120

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Learn how to build beautiful and highly customizable web interfaces by leveraging the power of Bootstrap 4

About This Book

  • Adapt and customize Bootstrap to produce enticing websites that fit your needs
  • Explore Bootstrap's grid system, helper classes, and responsive utilities
  • Extend Bootstrap with jQuery plugins and learn how to create your own custom plugins

Who This Book Is For

This book targets intermediate-level front-end web-developers. The book is not intended to be an introduction to web development. As such, the book assumes that readers have a firm grasp on the basic concepts behind web-development, as well as essential HTML, JavaScript and CSS skills.

What You Will Learn

  • Create a professional Bootstrap-based website from scratch without using third-party templates
  • Apply the Bootstrap mobile-first grid system and add responsiveness and aesthetic touches to image elements
  • Style various types of content and learn how to build a page's layout from scratch by applying the power of Bootstrap 4
  • Take advantage of Bootstrap's form helper and contextual classes
  • Infuse your web pages with life and movement using Bootstrap jQuery plugins
  • Customize the behavior and features of Bootstrap's jQuery Plugins extensively
  • Optimize your Bootstrap-based project before deployment
  • Incorporate Bootstrap into an AngularJS or React application and use Bootstrap components as AngularJS directives or React components

In Detail

Bootstrap 4 is a free CSS and JavaScript framework that allows developers to rapidly build responsive web-interfaces.

Right from the first chapter, dive 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. Then take walk through the fundamental features, such as its grid system, helper classes, and responsive utilities. When you have mastered these, you will discover how to structure page layouts, use forms, style different types of content and utilize Bootstrap's various navigation components. Among other things, you will also tour the anatomy of a Bootstrap plugin, creating your own custom components and extending Bootstrap using jQuery. Finally, you will discover how to optimize your website and integrate it with third-party frameworks.

By the end of this book, you will have a thorough knowledge of the framework's ins and outs, and be able to build highly customizable and optimized web interfaces.

Style and approach

This comprehensive step-by-step guide walks you through building a complete website using Bootstrap 4. Each chapter is accompanied by source code and screenshots, and focuses on a distinct set of lessons that are illustrated within the context of a demo project.

Table of contents

  1. Mastering Bootstrap 4
    1. Mastering Bootstrap 4
    2. Credits
    3. About the Authors
    4. About the Reviewers
    5. www.PacktPub.com
      1. Why subscribe?
    6. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    7. 1. Revving Up Bootstrap
      1. Introducing our demo project
      2. What Bootstrap 4 Alpha 4 has to offer
        1. Layout
        2. Content styling
        3. Components
        4. Mobile support
        5. Utility classes
        6. Cross-browser compatibility
        7. Sass instead of Less
        8. From pixel to root em
        9. No more support for Internet Explorer 8
        10. A new grid tier
        11. Bye-bye GLYPHICONS
        12. Bigger text: no more panels, wells, and thumbnails
        13. New and improved form input controls
        14. Customization
      3. Setting up our project
      4. Summary
    8. 2. Making a Style Statement
      1. The grid system
        1. Containers
          1. container
          2. container-fluid
        2. Rows
        3. Columns
          1. Nesting
          2. Pulling and pushing
          3. Offsetting
      2. Image elements
        1. Responsive images
        2. Image modifiers
      3. Responsive utilities
      4. Helper classes
        1. Context
        2. Centering and floating
        3. Toggling visibility
      5. Text alignment and transformation
      6. Summary
    9. 3. Building the Layout
      1. Splitting it up
      2. Adding Bootstrap components
        1. Jumbotron
        2. Tabs
        3. Carousel
        4. Cards
        5. Navbar
          1. Styling
      3. Summary
    10. 4. On Navigation, Footers, Alerts, and Content
      1. Fixating the navbar
      2. Improving navigation using Scrollspy
      3. Customizing scroll speed
      4. Icons
        1. A note on icons in Bootstrap 3
      5. Using and customizing alerts
      6. Creating a footer
      7. Creating and customizing forms
      8. Form validation
      9. Progress indicators
      10. Adding content using media objects
      11. Figures
      12. Quotes
      13. Abbreviations
      14. Summary
    11. 5. Speeding Up Development Using jQuery Plugins
      1. Browser detection
      2. Enhanced pagination using bootpag
      3. Displaying images using Bootstrap Lightbox
      4. Improving our price list with DataTables
      5. Summary
    12. 6. Customizing Your Plugins
      1. Anatomy of a plugin
        1. JavaScript
          1. Setup
          2. Class definition
          3. Data API implementation
          4. jQuery
        2. Sass
      2. Customizing plugins
        1. Customizing Bootstrap's jQuery alert plugin
          1. The markup
          2. Extending alert's style sheets
          3. Extending alert's functionality with JavaScript
        2. Customizing Bootstrap's jQuery carousel plugin
          1. The markup
          2. Extending carousel's functionality with JavaScript
          3. Extending carousel's style sheets
      3. Writing a custom Bootstrap jQuery plugin
        1. The idea – the A11yHCM plugin
        2. The a11yHCM.js file
        3. The markup
        4. Adding some style
      4. Summary
    13. 7. Integrating Bootstrap with Third-Party Plugins
      1. Building a testimonial component with Salvattore
        1. Introducing Salvattore
        2. Integrating Salvattore with Bootstrap
        3. Adding Animate.css to MyPhoto
        4. Bouncing alerts
        5. Animating a Salvattore grid
      2. Hover
        1. Adding Hover to MyPhoto
        2. Making the navbar grow
        3. Awesome Hover icons
        4. Salvattore Hover
      3. Summary
    14. 8. Optimizing Your Website
      1. CSS optimization
        1. Inline styles
        2. Long identifier and class names
        3. Shorthand rules
        4. Grouping selectors
        5. Rendering times
      2. Minifying CSS and JavaScript
      3. Introducing Grunt
        1. Minification and concatenation using Grunt
      4. Running tasks automatically
      5. Stripping our website of unused CSS
        1. Processing HTML
        2. Deploying assets
        3. Stripping CSS comments
      6. JavaScript file concatenation
      7. Summary
    15. 9. Integrating with AngularJS and React
      1. Introducing AngularJS
        1. Setting up AngularJS
        2. Improving the testimonials component
          1. Making testimonials dynamic
          2. Making a Promise with $q
          3. Creating an AngularJS directive
          4. Writing the testimonials template
          5. Testing the testimonial directive
          6. Importing the Salvatorre library
      2. Introducing React
        1. Setting up React
        2. Making a Gallery component in React
        3. Using carousel in React
      3. Summary

Product information

  • Title: Mastering Bootstrap 4
  • Author(s): Benjamin Jakobus, Jason Marah
  • Release date: September 2016
  • Publisher(s): Packt Publishing
  • ISBN: 9781783981120