O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Complete Bootstrap: Responsive Web Development with Bootstrap 4

Book Description

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

About This Book

  • Do more with JavaScript and learn how to create an enhanced user experience
  • Leverage Sass to make your CSS code maintainable, reusable and prevent code duplications
  • Leverage Bootstrap's excellent JavaScript plugins

Who This Book Is For

This course is mainly intended for web developers who want to learn to build enterprise-level and professional websites efficiently with Bootstrap. You must have a basic and fundamental understanding of HTML, CSS, and JavaScript; however, there is no need to have prior Bootstrap experience.

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

In Detail

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

Style and approach

This course takes a practical approach to teach you how to build modern responsive websites with Bootstrap. It follows a project-based approach to creating different types of popular websites using Bootstrap.

Table of Contents

  1. Complete Bootstrap: Responsive Web Development with Bootstrap 4
    1. Introduction
      1. What's in it for me – Course Roadmap?
      2. How is this course different from other courses?
      3. What will I get from this course?
      4. Prerequisites
    2. Credits
      1. Meet your experts
    3. 1. Setting up Our First Blog Project
      1. Implementing framework files
      2. Inserting the JavaScript files
      3. The starter template
        1. HTML5 DOCTYPE
        2. Structuring the responsive meta tag
      4. Normalizing and Rebooting
      5. Taking the starter template further
      6. Using a static site generator
      7. Converting the base template to a generator
      8. Setting up the blog project
        1. css
        2. fonts
        3. img
        4. js
        5. partial
        6. EJS files
      9. 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
      10. Creating our first page template
        1. Compiling your project
        2. Running your project
        3. Viewing your project
        4. A note about Sass
      11. Browser support
        1. Vendor prefixes
        2. Troubleshooting
      12. Summary
      13. Assessments
    4. 2. 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
      8. Assessments
    5. 3. 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
      8. Writing the index.ejs template
      9. Using spacing CSS classes
      10. Testing out the blog home page layout
      11. Adding some content
      12. What about mobile devices?
      13. 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
      14. Summary
      15. Assessments
    6. 4. 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
      4. Making images responsive
        1. Using image shapes
        2. 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
      7. Assessments
    7. 5. 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
      6. Additional form fields
      7. Creating an inline form
        1. Hiding the labels in an inline form
      8. Adding inline checkboxes and radio buttons
        1. Changing the size of inputs
        2. Controlling the width of form fields
      9. Adding validation to inputs
      10. Using the Jumbotron component
      11. Adding the Label component
      12. Using the Alerts component
        1. Adding a dismiss button to alerts
      13. 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
      14. Updating the Blog index page
        1. Adding the sidebar
        2. Setting up the Blog post page
      15. 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
      16. Adding Breadcrumbs to a page
        1. Adding Breadcrumbs to the Blog post page
        2. Using the Pagination component
          1. Adding the Pager to the Blog post template
      17. How to use the List Group component
      18. Summary
      19. Assessments
    8. 6. 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
      5. Adding a Popover to a button
        1. Adding our Popover button in JavaScript
      6. Using the Collapse component
        1. Coding the collapsable content container
      7. Coding an Accordion with the Collapse component
      8. Coding a Bootstrap Carousel
        1. Adding the Carousel bullet navigation
        2. Including Carousel slides
        3. Adding Carousel arrow navigation
      9. Summary
      10. Assessments
    9. 7. 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
      8. Assessments
    10. 8. Bootstrapping Your Portfolio
      1. What we'll build
      2. Surveying the exercise files
      3. Marking up the carousel
        1. How does the carousel work?
        2. Changing the carousel by adding new animations
        3. JavaScript events of the Carousel plugin
      4. Creating responsive columns
      5. Turning links into buttons
      6. Understanding the power of Sass
      7. Customizing Bootstrap's Sass according to our needs
        1. Customizing variables
        2. Customizing the navbar
      8. Adding the logo image
      9. Adding icons
      10. Styling the carousel
        1. Adding top and bottom padding
        2. Repositioning the carousel indicators
        3. Styling the indicators
      11. Tweaking the columns and their content
      12. Styling the footer
      13. Recommended next steps
      14. Summary
      15. Assessments
    11. 9. Bootstrapping Business
      1. Sizing up our beginning files
      2. Setting up the basics of your design
        1. Adding drop-down menus to our navbar
        2. Setting the bottom border for the page header
        3. Adding images with holder.js
      3. Creating a complex banner area
        1. Placing a logo above the navbar
        2. Reviewing and checking navbar drop-down items
      4. Adding utility navigation
      5. Making responsive adjustments
      6. Implementing the color scheme
      7. Styling the collapsed navbar
        1. Customizing the drop-down menus
      8. Styling the horizontal navbar
      9. Enabling Flexbox support
      10. Designing a complex responsive layout
        1. Adjusting the large and extra-large layout
        2. Adjusting the medium layout for tablet-width viewports
        3. Adjusting headings, font sizes, and buttons
        4. Enhancing the primary column
        5. Adjusting the tertiary column
        6. Fine touches for multiple viewports
      11. Laying out a complex footer
      12. Setting up the markup
        1. Adjusting for tablet-width viewports
        2. Adding a targeted responsive clearfix
        3. Refining the details
      13. Summary
      14. Assessments
    12. 10. Bootstrapping E-Commerce
      1. Surveying the markup for our products page
      2. Styling the breadcrumbs, page title, and pagination
      3. Adjusting the products grid
        1. Don't forget the Card module
          1. Cards with the CSS3 Flexbox layout module
      4. Styling the options sidebar
        1. Setting up basic styles
        2. Styling the Clearance Sale link
        3. Styling the options list
        4. Adding Font Awesome checkboxes to our option links
        5. Using Sass mixins to arrange option links in columns
        6. Adjusting the options list layout for tablets and phones
        7. Collapsing the options panel for phone users
      5. Adding a search form to your designing
        1. Using the Typeahead plugin
      6. Summary
      7. Assessments
    13. 11. Bootstrapping a One-Page Marketing Website
      1. Overview
      2. Surveying the starter files
      3. Viewing the page content
      4. Adding Font Awesome to our project
      5. Adjusting the navbar
      6. Customizing the jumbotron
        1. Refining the jumbotron message design
      7. Beautifying the features list
      8. Tackling customer reviews
        1. Positioning and styling captions
        2. Refining the caption position
          1. Adjusting for tiny screens
      9. Creating attention-grabbing pricing tables
        1. Setting up the variables, files, and markup
        2. Beautifying the table head
        3. Styling the table body and foot
        4. Differentiating the packages
        5. Adjusting for small viewports
        6. Providing a visual hierarchy to our tables
      10. Adding the final touches
      11. Adding ScrollSpy to the navbar
        1. Animating the scroll
      12. Summary
      13. Assessments
    14. 12. Assessment Answers