Bootstrap 4 Cookbook

Bootstrap 4 Cookbook

by Ajdin Imsirovic
Released June 2017
Publisher(s): Packt Publishing
ISBN: 9781785889295

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

Take your Bootstrap game to the next level with this practical guide

About This Book

  • Packed with easy-to-follow recipes on building responsive web pages with Bootstrap 4 that can be applied to a web project of your choice

  • Build intuitive user interfaces that are mobile-ready with the latest features offered by BS4

  • Stay on top of the changes that Bootstrap 4 brings to front-end development

  • Craft beautiful UIs and learn best practices, tips and tricks for quick, effortless, and proper Bootstrap 4 development

    • Who This Book Is For

    If you are a web designer or a developer who is familiar with the basics of Bootstrap and now want to build highly responsive and professional web pages using Bootstrap 4, this cookbook is for you. Familiarity with the fundamentals of HTML, CSS and jQuery, and some experience of incorporating JavaScript plugins is assumed.

    What You Will Learn

  • Craft beautiful UIs the right way

  • Use jQuery and JavaScript to extend Bootstrap layouts

  • Become more efficient by speeding up your workflow to achieve amazing results in the shortest time possible

  • Setup your environment for future changes of the framework.

  • Stay DRY by quickly prototyping Bootstrap-based websites with the help of Github’s own serverless blogging platform, Jekyll

  • Integrate Bootstrap with the most popular JS frameworks, Angular and React

  • Combine Bootstrap with the .NET platform

    • In Detail

    Bootstrap, one of the most popular front-end frameworks, is perfectly built to design elegant, powerful, and responsive interfaces for professional-level web pages. It supports responsive design by dynamically adjusting your web page layout.

    Bootstrap 4 is a major update with many impressive changes that greatly enhance the end results produced by Bootstrap. This cookbook is a collection of great recipes that show you how to use all the latest features of Bootstrap to build compelling UIs.

    This book is using the most up-to-date version of Bootstrap 4 in all its chapters. First off, you will be shown how you can leverage the latest core features of Bootstrap 4 to create stunning web pages and responsive media. You will gradually move on to extending Bootstrap 4 with the help of plugins to build highly customized and powerful UIs.

    By the end of this book, you will know how to leverage, extend, and integrate bootstrap to achieve optimal results for your web projects.

    Style and approach

    Packed full of solutions that can be instantly applied, the practical-based recipes will help you get the most from Bootstrap.

    Table of contents

    1. 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. Errata
        3. Piracy
        4. Questions
    2. Installing Bootstrap 4 and Comparing Its Versions
      1. Introduction
      2. Installing Bootstrap 4 to Cloud9 IDE using npm
        1. Getting ready
        2. How to do it...
      3. Installing Bootstrap 4 to Cloud9 IDE via Git
        1. Getting ready
        2. How to do it...
      4. Installing Bootstrap 4 Jekyll-powered docs
        1. Getting ready
        2. How to do it...
      5. Customizing the styles of Bootstrap 4 docs
        1. Getting ready
        2. How to do it...
      6. Making custom Grunt tasks in Bootstrap 4
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Comparing Bootstrap 4 versions with Bower
        1. Getting ready
        2. How to do it...
      8. Installing Bootstrap 4 to our Cloud9 IDE with Bower
        1. Getting ready
        2. How to do it...
    3. Layout Like a Boss with the Grid System
      1. Introduction
      2. Preparing a static server with Bootstrap 4, Harp, and Grunt
        1. Getting ready
        2. How to do it...
      3. Deploying your web project with Surge
        1. Getting ready
        2. How to do it...
      4. Splitting up our Harp project into partials
        1. How to do it...
      5. Using containers with margin and padding utility classes
        1. Getting ready
        2. How to do it...
        3. How it works...
          1. Explanation of the data-* HTML5 attributes
        4. There's more...
          1. Renaming main.scss
      6. Adding columns in a row
        1. Getting ready
        2. How to do it...
      7. Making col-* classes work
        1. Getting ready
        2. How to do it...
      8. Building a simple page with the default grid
        1. Getting ready
        2. How to do it...
        3. How it works...
      9. Building a real-life web page example with the default grid
        1. Getting ready
        2. How to do it...
        3. How it works...
    4. Power Up with the Media Object, Text, Images, and Tables
      1. Introduction
      2. Extending the text classes of .display-* and adding hover effects with Hover.css
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Creating comment sections using media objects
        1. Getting ready
        2. How to do it...
        3. How it works...
      4. Enriching text content with Bootstrap typography classes
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Customizing the blockquote element with CSS
        1. Getting ready
        2. How to do it...
        3. How it works...
      6. Extending the blockquote styles with Sass
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Aligning text around images
        1. Getting ready
        2. How to do it...
        3. How it works...
      8. Wrapping text around rounded images
        1. Getting ready
        2. How to do it...
        3. How it works...
      9. Styling a pricing section using Bootstrap's default table classes
        1. Getting ready
        2. How to do it...
        3. How it works...
    5. Diving Deep into Bootstrap 4 Components
      1. Creating custom alerts and positioning them in the viewport
        1. Getting ready
        2. How to do it…
        3. How it works…
      2. Making full-page modals
        1. Getting ready
        2. How to do it…
        3. How it works…
      3. Altering the behavior of popups using tether options
        1. Getting ready
        2. How to do it…
        3. How it works…
      4. Controlling the color and opacity of ToolTips using Sass variables
        1. Getting ready
        2. How to do it…
        3. How it works…
      5. Using Bootstrap's Sass mixins to create custom buttons
        1. Getting ready
        2. How to do it…
        3. How it works…
      6. Adjusting the rounding of corners on buttons and button groups
        1. Getting ready
        2. How to do it…
        3. How it works…
      7. Controlling the number of card columns on different breakpoints with SCSS
        1. Getting ready
        2. How to do it…
        3. How it works…
      8. Making cards responsive
        1. Getting ready
        2. How to do it…
        3. How it works…
      9. Easily positioning inline forms
        1. Getting ready
        2. How to do it…
        3. How it works…
    6. Menus and Navigations
      1. Adding Font Awesome to Bootstrap navbar
        1. Getting ready
        2. How to do it…
        3. How it works…
      2. Placing a single Bootstrap navbar dropdown to the right
        1. Getting ready
        2. How to do it…
        3. How it works…
      3. Centering navbar links
        1. Getting ready
        2. How to do it…
        3. How it works…
      4. Making a transparent navbar on a darker background
        1. Getting ready
        2. How to do it…
        3. How it works…
      5. Creating a Navbar with Icons and Flexbox
        1. Getting ready
        2. How to do it…
        3. How it works…
      6. Adding another row of links to the navbar
        1. Getting ready
        2. How to do it…
        3. How it works…
      7. Adding Yamm3 Megamenu images to a navbar dropdown
        1. Getting ready
        2. How to do it…
        3. How it works…
      8. Adding Yamm3 Megamenu list of links to a navbar dropdown
        1. Getting ready
        2. How to do it…
        3. How it works…
    7. Extending Bootstrap 4
      1. Introduction
      2. Converting checkboxes into Toggles with Bootstrap Toggle plugin
        1. Getting ready
        2. How to do it…
        3. How it works…
      3. Onboarding users with Shepherd
        1. Getting ready
        2. How to do it…
      4. Toggling visibility of password fields with custom jQuery code
        1. Getting ready
        2. How to do it…
        3. How it works…
      5. Extending the functionality of select elements with Bootstrap Select plugin
        1. How to do it…
        2. How it works…
      6. Customizing select boxes with Select2 plugin
        1. Getting ready
        2. How to do it…
        3. How it works…
      7. Adding input sliders with Rangeslider.js
        1. Getting ready
        2. How to do it…
      8. Allowing users to easily add dates to your input fields with jQuery UI Datepicker
        1. How to do it…
      9. Converting plain tables into sophisticated data tables with Bootgrid
        1. Getting ready
        2. How to do it…
        3. How it works…
      10. Navigating easily with simple-sidebar jQuery plugin
        1. Getting ready
        2. How to do it…
        3. How it works…
      11. Adding fully customizable notifications with Notify.js
        1. Getting ready
        2. How to do it…
        3. How it works…
      12. Integrating a fancy modal using animatedModal.js
        1. Getting ready
        2. How to do it…
        3. How it works…
      13. Making pagination dynamic with the jQuery Pagination plugin and simplePagination.js
        1. Getting ready
        2. How to do it…
        3. How it works…
      14. Validating forms with svalidate.js
        1. Getting ready
        2. How to do it…
        3. How it works…
      15. Adding a rating system using jQuery Bar Rating plugin
        1. Getting ready
        2. How to do it…
        3. How it works…
    8. Make Your Own jQuery Plugins in Bootstrap 4
      1. Introduction
      2. Making the simplest possible jQuery plugin
        1. Getting ready
        2. How to do it…
        3. How it works…
      3. Making the plugin customizable with the extend() and each() methods
        1. Getting ready
        2. How to do it…
        3. How it works…
      4. Integrating a simple CSS Class Replacement plugin with Bootstrap 4
        1. Getting ready
        2. How to do it…
        3. How it works…
    9. Bootstrap 4 Flexbox and Layouts
      1. Introduction
      2. Breakpoint-dependent switching of flex direction on card components
        1. Getting ready
        2. How to do it…
        3. How it works…
      3. Letting cards take up space with the .flex-wrap and .col classes
        1. Getting ready
        2. How to do it…
        3. How it works…
      4. Adding any number of columns with Flexbox
        1. Getting ready
        2. How to do it…
        3. How it works…
      5. Combining numbered .col classes with plain .col classes
        1. Getting ready
        2. How to do it…
        3. How it works…
      6. Working with card layouts and the Flexbox grid
        1. Getting ready
        2. How to do it…
        3. How it works…
      7. Center-aligning cards on wider viewports only
        1. Getting ready
        2. How to do it…
        3. How it works…
      8. Positioning nav-tabs with Flexbox
        1. Getting ready
        2. How to do it…
        3. How it works…
    10. Workflow Boosters
      1. Introduction
      2. Customizing Bootstrap builds by cherry-picking Sass partials
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Cleaning up unused CSS with UnCSS and Grunt
        1. Getting ready
        2. How to do it...
        3. How it works...
      4. Removing CSS comments with the grunt-strip-CSS-comments plugin
        1. Getting ready
        2. How to do it...
        3. How it works...
    11. Creating a Blog with Jekyll and Bootstrap 4
      1. Making Jekyll work with Bootstrap 4
        1. Getting ready
        2. How to do it...
        3. How it works...
      2. Splitting Jekyll files into partials
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Making Jekyll blog-aware
        1. Getting ready
        2. How to do it...
        3. How it works...
      4. Deploying your blog to the web with GitHub
        1. Getting ready
        2. How to do it...
        3. How it works...
    12. Bootstrap 4 with ASP.NET Core
      1. Starting a project in ASP.NET Core and Bootstrap 4 in Visual Studio 2017
        1. Getting ready
        2. How to do it...
        3. How it works...
      2. Migrating the default web page of a .NET Core project from Bootstrap 3 to Bootstrap 4
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Working with Bower, Sass, and Grunt in our .NET Core project
        1. Getting ready
        2. How to do it...
        3. How it works...
    13. Integrating Bootstrap 4 with React and Angular
      1. Introduction
      2. Integrating Bootstrap 4 with React
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Replacing the Default Styles in Angular 2 QuickStart with Bootstrap 4 CDN CSS
        1. Getting ready
        2. How to do it...
        3. How it works...
      4. Integrating Angular 4 and Bootstrap 4 with the help of ng-bootstrap
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Conclusion
        1. Next Steps

    Product information

    • Title: Bootstrap 4 Cookbook
    • Author(s): Ajdin Imsirovic
    • Release date: June 2017
    • Publisher(s): Packt Publishing
    • ISBN: 9781785889295