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

Bootstrap 4 Site Blueprints

Book Description

Explore the robust features of Bootstrap 4 to create exciting websites through this collection of excellent hands-on projects

About This Book

  • Explore the inner workings of Bootstrap 4 by building different websites
  • Customize your designs by working directly with Bootstrap’s SASS files
  • Leverage Bootstrap’s excellent JavaScript plugins

Who This Book Is For

If you are a web developer who wants to build professional websites using Bootstrap 4, then this book is for you. Familiarity with the basics of HTML, CSS, and JavaScript is assumed.

What You Will Learn

  • Understand how Bootstrap compiles SASS code to static CSS and ES6 code into JavaScript code
  • Integrate Bootstrap into application frameworks such as Angular 2 (AngularJS), Ember, and React
  • Reuse Bootstrap’s SASS mixins and set responsive breakpoints in your designs
  • Customize Bootstrap’s SASS files and add your own in the process
  • Manage multiple rows of products in a complex responsive grid
  • Create a complete one-page scrolling website using Bootstrap’s components and plugins

In Detail

Packed with trade secrets, this second edition is your one-stop solution to creating websites that will provide the best experience for your users. We cover six popular, real-world examples, where each project teaches you about the various functionalities of Bootstrap 4 and their implementation.

The book starts off by getting you up and running with the new features of Bootstrap 4 before gradually moving on to customizing your blog with Bootstrap and SASS, building a portfolio site, and turning it into a WordPress theme. In the process, you will learn to recompile Bootstrap files using SASS, design a user interface, and integrate JavaScript plugins. Towards the end of the book, you will also be introduced to integrating Bootstrap 4 with popular application frameworks such as Angular 2, Ruby on Rails, and React.

Style and approach

This book follows a project-based approach to creating different types of popular websites using Bootstrap. You’ll work through easy-to-follow, clear, and logical steps, with screenshots and tips provided along the way to help you get more from Bootstrap.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Bootstrap 4 Site Blueprints
    1. Bootstrap 4 Site Blueprints
    2. Credits
    3. About the Authors
    4. About the Reviewer
    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. Getting Started with Bootstrap
      1. Quantity and quality
        1. Improving with age
        2. The power of Sass
        3. Downloading the compiled code
        4. The Flexbox enabled version
        5. The grid only versions
        6. Running Bootstrap from CDN
          1. Subresource Integrity (SRI)
      2. Downloading Bootstrap's source files
        1. The files you'll have
        2. Other ways to download and integrate Bootstrap
      3. Tooling setup
        1. The HTML starter template
          1. Responsive meta tag
          2. The X-UA-Compatible meta tag
          3. Bootstrap's CSS code
          4. The JavaScript files
      4. Using Bootstrap CLI
      5. Preparing a new Bootstrap project
      6. Setting up major structural elements
        1. Providing a navbar markup
          1. The CSS classes of the navbar
          2. Placement of the navbars
          3. Adding collapsible content to the navbar
          4. Responsive features and breakpoints
          5. Responsive utility classes
          6. Completing the responsive navbar
          7. The new Reboot module and Normalize.css.
          8. Box-sizing
          9. Predefined CSS classes
          10. Sass variables and mixins
      7. Browser support
        1. Vendor prefixes
        2. Flexible boxes
      8. The Yeoman workflow
      9. Troubleshooting
      10. Summary
    8. 2. Creating Your Own Build Process with Gulp
      1. What are we going to build?
        1. Requirements
          1. What is Gulp and why should you use it?
      2. Bootstrap's build process
      3. Installing Gulp in your project
        1. Creating the Gulpfile.js which holds your tasks
        2. The clean task
      4. Setting up environments for development and production
      5. Installing Bootstrap via Bower
      6. Creating a local Sass structure 
        1. Compiling Bootstrap's Sass code into CSS code
        2. CSS sourcemaps for debugging
        3. Running the postCSS autoprefixer
        4. Getting your CSS code ready for production
        5. Linting your SCSS code
      7. Preparing the JavaScript plugins
        1. Getting your JavaScript code ready for production
      8. Modularization of your HTML
        1. Installing the Gulp task to compile the Panini HTML templates
        2. Validating the compiled HTML code
      9. Creating a static web server
        1. Start watching your file changes
        2. Copying and minifying your images
      10. Putting it all together and creating the default task
      11. Using the build process to finish your project
        1. The layout template
        2. The page header
          1. Custom CSS code for the page header
          2. Fine tuning of your CSS and HTML code
          3. Styling the navbar and hero unit
      12. Styling the features
      13. Styling the footer of your page
      14. Running your template with Bootstrap CLI
      15. JavaScript task runners are not required
      16. Publishing your work on GitHub
      17. Summary
    9. 3. Customizing Your Blog with Bootstrap and Sass
      1. Expected results and the process
      2. Setting up your project and requirements
      3. The power of Sass in your project
        1. Nested rules
        2. Variables
        3. Mixins
        4. Operations
      4. Importing files
        1. The modular file organization
      5. Using the SCSS-linter for cleaner and more readable code
      6. Strategies for customization with Sass
        1. Using variables for customization
        2. Extending Bootstrap's predefined CSS classes
        3. (Re)Using Bootstrap's mixins
        4. Sass functions
        5. Reusing others' code
          1. Compass
      7. Writing your own custom SCSS code
        1. The color scheme
        2. Preparing the HTML templates
        3. Styling the page header
        4. Styling the navbar
          1. A navbar without Bootstrap's predefined CSS classes
      8. The main part of your blog page
      9. Styling the blog posts
      10. Styling the side bar
      11. The page footer
        1. The left footer column
        2. The right footer column
      12. Reusing the SCSS code of the social buttons
      13. Source code of this chapter
        1. Using the CLI and running the code from GithHub
      14. Summary
    10. 4. Bootstrappin' a WordPress Theme
      1. Installing WordPress and other requirements
        1. Installing WordPress
        2. Node.js, Gulp, and Bower
      2. Installing the JBST 4 theme
      3. Installing the theme
      4. Reusing the Sass code
      5. Conflicts between WordPress and Bootstrap – predefined classes
        1. Turn the navigation into a Bootstrap navbar
        2. About the grid
      6. Configuring the navbar
        1. Updating the HTML code
        2. Adding your photo to the middle of the navbar
      7. Giving your blog a page header
      8. Don't forget the page footer
      9. Styling your blog posts
      10. The side bar of your blog
      11. The off-canvas side bar
      12. Applying style to the buttons
        1. Other tweaks in your Sass
          1. The pagination
          2. Search form button
      13. Styling the user comments on your pages
      14. Adding a carousel to your page
      15. Using Font Awesome in your theme
        1. Building the social links with Font Awesome
      16. Using the masonry template
      17. Child theming
      18. Download at GitHub
      19. Summary
    11. 5. Bootstrappin' Your Portfolio
      1. What we'll build
      2. Surveying the exercise files
      3. Marking up the carousel
        1. How does the carousel work?
          1. Changing the carousel by adding new animations
          2. 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
          1. 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
    12. 6. Bootstrappin' Business
      1. Sizing up our beginning files
      2. Setting up the basics of your design
        1. Adding drop-down menus to our navbar
          1. Setting the bottom border for the page header
        2. 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
    13. 7. Bootstrappin' 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
    14. 8. Bootstrappin' 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
    15. 9. Building an Angular 2 App with Bootstrap
      1. Overview
      2. Setting up your first Angular app
      3. Adding routing to our app
      4. Setting up navigation
      5. Adding Bootstrap's HTML markup code to your app
      6. Integrating Bootstrap's CSS code into the application
        1. Setting up the Sass compiler
        2. Adding the post-processors
        3. Using the ng-bootstrap directives
          1. Using other directives
          2. Using the ng2-bootstrap directives as an alternative
      7. Downloading the complete code
      8. What about Angular CLI?
      9. Using React.js with Bootstrap
        1. Using React Bootstrap 4 components
      10. Other tools for deploying Bootstrap 4
        1. Yeoman
      11. Summary