Bootstrap 4 – Responsive Web Design

Table of contents

1. Bootstrap 4 – Responsive Web Design
   1. Table of Contents
   2. Bootstrap 4 – Responsive Web Design
   3. Credits
      1. Authors Silvio Moreto Matt Lambert Benjamin Jakobus Jason Marah Reviewers Paula Barcante Sherwin Robles Marija Zaric Content Development Editor Roshan Kumar Graphics Jason Monterio Production Coordinator Melwyn D'sa
   4. Preface
      1. What this learning path covers
      2. What you need for this learning path
      3. Who this learning path is for
      4. Reader feedback
      5. Customer support
         1. Downloading the example code
         2. Errata
         3. Piracy
         4. Questions
   5. 1. Module 1
      1. 1. Getting Started
         1. Getting Bootstrap
         2. Setting up the framework
            1. Folder structure
            2. Warming up the sample example
            3. Bootstrap required tags
         3. Building our first Bootstrap example
            1. The container tag
         4. Optionally using the CDN setup
         5. Community activity
            1. Tools
         6. Bootstrap and web applications
         7. Browser compatibility
         8. Summary
      2. 2. Creating a Solid Scaffolding
         1. Understanding the grid system
         2. Building our scaffolding
            1. Setting things up
            2. Offset columns
            3. Completing the grid rows
            4. Nesting rows
            5. Finishing the grid
         3. Fluid container
         4. We need some style!
            1. There are headings everywhere
            2. Playing with buttons
            3. More typography and code tags
         5. Manipulating tables
            1. Styling the buttons
         6. Like a boss!
         7. Final thoughts
            1. Box-sizing
            2. Quick floats
            3. Clearfix
            4. Font definitions for typography
         8. Summary
      3. 3. Yes, You Should Go Mobile First
         1. Making it greater
         2. Bootstrap and the mobile-first design
         3. How to debug different viewports at the browser
         4. Cleaning up the mess
         5. Creating the landing page for different devices
            1. Mobile and extra small devices
            2. Tablets and small devices
            3. Desktop and large devices
         6. Summary
      4. 4. Applying the Bootstrap Style
         1. Changing our grid layout
            1. Starting over the grid system
               1. The header
               2. The introduction header
               3. The about section
               4. The features section
               5. The price table section
               6. The footer
            2. Forming the forms
               1. Newsletter form
               2. Contact form
                  1. Let's start with some JavaScript
               3. The sign-in form
            3. Images
            4. Helpers
               1. Floating and centering blocks
               2. Context colors
               3. Spacing
               4. Responsive embeds
         2. Summary
      5. 5. Making It Fancy
         1. Using Bootstrap icons
         2. Paying attention to your navigation
            1. Until the navigation collapse
            2. Using different attachments
            3. Coloring the bar
         3. Dropping it down
            1. Customizing buttons dropdown
         4. Making an input grouping
         5. Getting ready for flexbox!
            1. Understanding flexbox
            2. Playing with Bootstrap and flexbox
         6. Summary
      6. 6. Can You Build a Web App?
         1. Understanding web applications
            1. Creating the code structure
         2. Adding the navigation
            1. Adding the search input
            2. Time for the menu options!
               1. The option at the thumbnail
               2. Adding the Tweet button
            3. Customizing the navigation bar
               1. Setting up the custom theme
               2. Fixing the list navigation bar pseudo-classes
            4. You deserve a badge!
            5. Fixing some issues with the navigation bar
         3. Do a grid again
         4. Playing the cards
            1. Learning cards in Bootstrap 4
            2. Creating your own cards
            3. Adding Cards to our web application
            4. Another card using thumbnails
         5. Implementing the main content
            1. Making your feed
            2. Doing some pagination
         6. Creating breadcrumbs
         7. Finishing with the right-hand-side content
         8. Summary
      7. 7. Of Course, You Can Build a Web App!
         1. Alerts in our web app
            1. Dismissing alerts
            2. Customizing alerts
         2. Waiting for the progress bar
            1. Progress bar options
            2. Animating the progress bar
         3. Creating a settings page
            1. Pills of stack
            2. Tabs in the middle
               1. Adding the tab content
               2. Using the Bootstrap tabs plugin
            3. Creating content in the user info tab
            4. The stats column
            5. Labels and badges
         4. Summary
      8. 8. Working with JavaScript
         1. Understanding JavaScript plugins
            1. The library dependencies
            2. Data attributes
            3. Bootstrap JavaScript events
         2. Awesome Bootstrap modals
            1. Modal general and content
            2. The modal header
            3. The modal body
            4. The modal footer
         3. Creating our custom modal
         4. A tool for your tip
         5. Pop it all over
            1. Popover events
         6. Making the menu affix
         7. Finishing the web app
         8. Summary
      9. 9. Entering in the Advanced Mode
         1. The master plan
         2. The last navigation bar with flexbox
            1. The navigation search
            2. The menu needs navigation
            3. Checking the profile
         3. Filling the main fluid content
            1. From the side stacked menu
            2. I heard that the left menu is great!
            3. Learning the collapse plugin
            4. Using some advanced CSS
         4. Filling the main content
            1. Rounding the charts
            2. Creating a quick statistical card
            3. Getting a spider chart
         5. Overhead loading
         6. Fixing the toggle button for mobile
         7. Summary
      10. 10. Bringing Components to Life
          1. Creating the main cards
             1. The other card using Bootstrap components
             2. Creating our last plot
          2. Fixing the mobile viewport
             1. Fixing the navigation menu
             2. The notification list needs some style
             3. Adding the missing left menu
             4. Aligning the round charts
          3. Learning more advanced plugins
             1. Using the Bootstrap carousel
                1. Customizing carousel items
                2. Creating slide indicators
                3. Adding navigation controls
                4. Other methods and options for the carousel
             2. The Bootstrap spy
          4. Summary
      11. 11. Making It Your Taste
          1. Customizing a Bootstrap component
             1. The taste of your button
             2. Using button toggle
             3. The checkbox toggle buttons
             4. The button as a radio button
             5. Doing the JavaScript customization
          2. Working with plugin customization
          3. The additional Bootstrap plugins
          4. Creating our Bootstrap plugin
             1. Creating the plugin scaffold
          5. Defining the plugin methods
             1. The initialize method and plugin verifications
             2. Adding the Bootstrap template
             3. Creating the original template
                1. The slide deck
                2. The carousel indicators
                3. The carousel controls
             4. Initializing the original plugin
             5. Making the plugin alive
          6. Creating additional plugin methods
          7. Summary
   6. 2. Module 2
      1. 1. Introducing Bootstrap 4
         1. Introducing Bootstrap
            1. Bootstrap 4 advantages
               1. Improved grid system and flexbox
               2. Card component
               3. Rebooting normalize.css
               4. Internet Explorer 8 support dropped
               5. Other updates
            2. Implementing framework files
            3. Inserting the JavaScript files
            4. The starter template
               1. HTML5 DOCTYPE
               2. Structuring the responsive meta tag
            5. Normalizing and Rebooting
            6. Taking the starter template further
            7. Using a static site generator
            8. Converting the base template to a generator
            9. Installing Harp.js
            10. Adding Sass in Harp
            11. Setting up the project
                1. Inserting the CSS
                2. Inserting the JavaScript
                3. Other directories
            12. Setting up the layout
            13. Compiling your project
            14. Previewing your project
            15. Deploying your project
                1. Installing Surge
                2. Using Surge to deploy your project
         2. Summary
      2. 2. Using Bootstrap Build Tools
         1. Different types of tools
            1. Installing Node.js
            2. Updating npm
            3. Installing Grunt
         2. Download the Bootstrap source files
            1. Installing Ruby
            2. Installing the Bundler gem
            3. Running the documentation
            4. Setting up the static site generator
            5. Why use Harp.js
            6. Installing Harp.js
         3. Setting up the blog project
            1. css
            2. fonts
            3. img
            4. js
            5. partial
            6. EJS files
         4. Setting up the JSON files
            1. Creating the data JSON file
            2. Setting up the layout
            3. Setting up the header
            4. Setting up the footer
         5. Creating our first page template
            1. Compiling your project
            2. Running your project
            3. Viewing your project
            4. A note about Sass
         6. Summary
      3. 3. Jumping into Flexbox
         1. Flexbox basics and terminology
         2. Ordering your Flexbox
            1. Stretching your child sections to fit the parent container
            2. Changing the direction of the boxes
         3. Wrapping your Flexbox
            1. Creating equal-height columns
         4. Setting up the Bootstrap Flexbox layout grid
            1. Updating the Sass variable
         5. Setting up a Flexbox project
            1. Adding a custom theme
            2. Creating a basic three-column grid
            3. Creating full-width layouts
         6. Designing a single blog post
         7. Summary
      4. 4. Working with Layouts
         1. Working with containers
            1. Creating a layout without a container
            2. Using multiple containers on a single page
         2. Inserting rows into your layout
         3. Adding columns to your layout
            1. Extra small
            2. Small
            3. Medium
            4. Large
            5. Extra large
         4. Choosing a column class
         5. Creating a simple three-column layout
         6. Mixing column classes for different devices
            1. What if I want to offset a column?
         7. Coding the blog home page
            1. Writing the index.ejs template
            2. Using spacing CSS classes
            3. Testing out the blog home page layout
            4. Adding some content
            5. What about mobile devices?
         8. Using responsive utility classes
            1. Coding the additional blog project page grids
               1. Updating _data.json for our new pages
               2. Creating the new page templates
            2. Coding the contact page template
               1. Adding the contact page body
            3. Coding the blog post template
               1. Adding the blog post feature
               2. Adding the blog post body
            4. Converting the mailing list section to a partial
         9. Summary
      5. 5. Working with Content
         1. Reboot defaults and basics
            1. Headings and paragraphs
            2. Lists
            3. Preformatted text
            4. Tables
            5. Forms
         2. Learning to use typography
            1. Using display headings
         3. Customizing headings
            1. Using the lead class
            2. Working with lists
               1. Coding an unstyled list
               2. Creating inline lists
               3. Using description lists
         4. How to style images
            1. Making images responsive
            2. Using image shapes
            3. Aligning images with CSS
         5. Coding tables
            1. Setting up the basic table
            2. Inversing a table
               1. Inversing the table header
            3. Adding striped rows
            4. Adding borders to a table
            5. Adding a hover state to rows
            6. Color-coating table rows
            7. Making tables responsive
         6. Summary
      6. 6. Playing with Components
         1. Using the button component
         2. Basic button examples
         3. Creating outlined buttons
         4. Checkbox and radio buttons
            1. Creating a radio button group
            2. Using button groups
            3. Creating vertical button groups
            4. Coding a button dropdown
            5. Creating a pop-up menu
            6. Creating different size drop-down buttons
         5. Coding forms in Bootstrap 4
            1. Setting up a form
               1. Adding a select dropdown
               2. Inserting a textarea tag into your form
               3. Adding a file input form field
               4. Inserting radio buttons and checkboxes to a form
               5. Adding a form to the blog contact page
               6. Updating your project
            2. Additional form fields
         6. Creating an inline form
            1. Hiding the labels in an inline form
            2. Adding inline checkboxes and radio buttons
            3. Changing the size of inputs
            4. Controlling the width of form fields
         7. Adding validation to inputs
         8. Using the Jumbotron component
         9. Adding the Label component
         10. Using the Alerts component
             1. Adding a dismiss button to alerts
         11. Using Cards for layout
             1. Moving the Card title
             2. Changing text alignment in cards
             3. Adding a header to a Card
             4. Inverting the color scheme of a Card
             5. Adding a location card to the Contact page
         12. Updating the Blog index page
             1. Adding the sidebar
             2. Setting up the Blog post page
         13. How to use the Navs component
             1. Creating tabs with the Nav component
             2. Creating a pill navigation
             3. Using the Bootstrap Navbar component
             4. Changing the color of the Navbar
             5. Making the Navbar responsive
         14. Adding Breadcrumbs to a page
             1. Adding Breadcrumbs to the Blog post page
         15. Using the Pagination component
             1. Adding the Pager to the Blog post template
         16. How to use the List Group component
         17. Summary
      7. 7. Extending Bootstrap with JavaScript Plugins
         1. Coding a Modal dialog
            1. Coding the Modal dialog
         2. Coding Tooltips
            1. Updating the project layout
            2. How to use Tooltips
            3. How to position Tooltips
            4. Adding Tooltips to buttons
            5. Updating the layout for buttons
         3. Avoiding collisions with our components
         4. Using Popover components
            1. Updating the JavaScript
            2. Positioning Popover components
            3. Adding a Popover to a button
            4. Adding our Popover button in JavaScript
         5. Using the Collapse component
            1. Coding the collapsable content container
         6. Coding an Accordion with the Collapse component
         7. Coding a Bootstrap Carousel
            1. Adding the Carousel bullet navigation
            2. Including Carousel slides
            3. Adding Carousel arrow navigation
         8. Summary
      8. 8. Throwing in Some Sass
         1. Learning the basics of Sass
         2. Using Sass in the blog project
            1. Updating the blog project
            2. Using variables
            3. Using the variables in CSS
            4. Using other variables as variable values
         3. Importing partials in Sass
            1. Using mixins
            2. How to use operators
         4. Creating a collection of variables
            1. Importing the variables to your custom style sheet
            2. Adding a color palette
            3. Adding some background colors
            4. Setting up variables for typography
            5. Coding the text color variables
            6. Coding variables for links
            7. Setting up border variables
            8. Adding variables for margin and padding
            9. Adding mixins to the variables file
            10. Coding a border-radius mixin
         5. Customizing components
            1. Customizing the button component
            2. Extending the button component to use our color palette
         6. Writing a theme
            1. Common components that need to be customized
            2. Theming the drop-down component
            3. Customizing the alerts component
            4. Customizing the typography component
         7. Summary
      9. 9. Migrating from Version 3
         1. Browser support
         2. Big changes in version 4
            1. Switching to Sass
         3. Updating your variables
            1. Updating @import statements
            2. Updating mixins
         4. Additional global changes
            1. Using REM units
         5. Other font updates
            1. New grid size
         6. Migrating components
            1. Migrating to the Cards component
            2. Using icon fonts
         7. Migrating JavaScript
         8. Miscellaneous migration changes
            1. Migrating typography
            2. Migrating images
            3. Migrating tables
            4. Migrating forms
            5. Migrating buttons
         9. Summary
   7. 3. Module 3
      1. 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
      2. 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
      3. 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
      4. 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
      5. 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
      6. 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
      7. 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
      8. 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
      9. 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
   8. Bibliography
   9. Index