You are previewing Extending Bootstrap.
O'Reilly logo
Extending Bootstrap

Book Description

Written for intermediate frontend developers, this book helps you extend Bootstrap, allowing you to tailor your project using themes, third-party plugins, and plugins you’ve customized yourself. A practical, instruction-based guide.

In Detail

Bootstrap is a free collection of tools used to create websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Much has been written and said recently, in the world of web design and development, about Bootstrap. Some people call it a boon for web developers with little designing knowledge, while others call it a blessing for the designers. A user familiar with all that Bootstrap has to offer can extend the framework so that it no longer has the original look and feel of Twitter. This will allow you to use clever and novel ways of taking the power the standard library of Bootstrap has, and transform it into what you have envisioned.

This is a practical, step-by-step guide to extending Bootstrap. It covers all the aspects of extending Bootstrap, including themes, customization, extending its plugins, and an introduction to several third- party Bootstrap plugins.

Once you understand why you should use Bootstrap in the first place, you will learn about custom themes. This book then walks you through customization with CSS, and introduces you to LESS. You will learn to use Grunt.js to generate your own custom build of Bootstrap, customize plugins and grids, and even build custom plugins! Finally you will explore the most useful third-party plugins for Bootstrap and end with creating your first Bootswatch theme. This is a complete guide to unlocking the true power of Bootstrap.

What You Will Learn

  • Create your first Bootstrap project
  • Customize your project with themes through CSS
  • Use Bootstrap with LESS
  • Build a custom build with Grunt.js
  • Customize and extend JavaScript plugins
  • Utilize third- party plugins such as Lightbox, Notify.js, and so on
  • 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 If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

    Table of Contents

    1. Extending Bootstrap
      1. Table of Contents
      2. Extending Bootstrap
      3. Credits
      4. About the Author
      5. About the Reviewers
        1. Support files, eBooks, discount offers and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      7. 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
      8. 1. Getting Started with Bootstrap
        1. Why use Bootstrap?
        2. Bootstrap pros and cons
        3. Creating your first Bootstrap project
        4. Summary
      9. 2. Applying a Custom Theme
        1. When to use a theme
        2. Finding a suitable theme
        3. Applying the theme
        4. Customizing your theme
        5. Best practices
        6. Summary
      10. 3. Creating Your Own Build
        1. Need to customize Bootstrap
        2. Generating a custom build
        3. Keeping only what you need
        4. Summary
      11. 4. LESS is More
        1. Why use LESS?
        2. Compiling your first LESS file
        3. Building Bootstrap from the source
        4. Customizing variables
        5. Summary
      12. 5. Compiling Your Styles with Grunt
        1. Why build LESS files with Grunt?
        2. Using Grunt to build your project
        3. Using Grunt for live reloading
        4. Summary
      13. 6. Adapting Bootstrap JavaScript Plugins
        1. Why customize plugins?
        2. Customizing plugins
        3. Extending Bootstrap plugins
        4. Summary
      14. 7. Custom Grids
        1. Why use a custom grid?
        2. Customizing the grid
        3. Custom breakpoints
        4. Disabling responsiveness
        5. Summary
      15. 8. Custom Bootstrap Plugins
        1. Why use custom plugins?
        2. Popular plugins
          1. Bootbox.js
          2. Bootstrap DateTime Picker
          3. Bootstrap Modal
          4. Bootstrap Lightbox
          5. Bootstrap Wysihtml5
          6. Font Awesome
          7. Jasny Bootstrap
          8. jQuery File Upload
          9. Notify.js
          10. typeahead.js
          11. X-editable
        3. Summary
      16. 9. Creating Your Own Theme
        1. Why create a theme?
        2. Creating your own Bootstrap theme
        3. Publishing your theme
        4. Summary
      17. Index