Learning Bootstrap 4 - Second Edition

Learning Bootstrap 4 - Second Edition

by Matt Lambert
Released August 2016
Publisher(s): Packt Publishing
ISBN: 9781785881008

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

Unearth the potential of Bootstrap 4 to create highly responsive and beautiful websites using modern web techniques

About This Book

  • This book shows how to take advantage of the all new features introduced in Bootstrap
  • 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,
  • Do more with JavaScript and learn how to create an enhanced user experience

Who This Book Is For

If you want to learn to build enterprise-level websites efficiently with Bootstrap, this book is for you. 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
  • See how and when to use Flexbox with the Bootstrap layouts
  • Find out how to make your websites responsive, keeping in mind Mobile First design
  • Work with content such as tables and figures
  • Play around with the huge variety of components that Bootstrap offers
  • Extend your build using plugins developed from JavaScript
  • Use Sass to customize your existing themes

In Detail

Bootstrap, the most popular front-end framework built to design elegant, powerful, and responsive interfaces for professional-level web pages has undergone a major overhaul. Bootstrap 4 introduces a wide range of new features that make front-end web design even simpler and exciting.

In this gentle and comprehensive book, 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 your pages can fit any screen size and meet the responsive requirements. 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. Then, you'll 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. This book will make sure you're geared up and ready to build amazingly beautiful and responsive websites in a jiffy.

Style and approach

With the help of several real-world examples and code, this book will teach you to build a full-featured responsive website in Bootstrap, which is mobile-ready.

Table of contents

  1. Learning Bootstrap 4 - Second Edition
    1. Learning Bootstrap 4 - Second Edition
    2. Credits
    3. About the Author
    4. About the Reviewer
    5. www.PacktPub.com
      1. eBooks, discount offers, and more
        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. 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
    8. 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
    9. 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
    10. 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
    11. 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
    12. 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
    13. 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
    14. 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
    15. 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

Product information

  • Title: Learning Bootstrap 4 - Second Edition
  • Author(s): Matt Lambert
  • Release date: August 2016
  • Publisher(s): Packt Publishing
  • ISBN: 9781785881008