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: Related Tools & Skills

Book Description

Bootstrap stands as one of the most popular, open-source, front-end frameworks on the Web. Since its official release in 2011, it has undergone several changes, and it's now one of the most stable and responsive frameworks available. It's loved by web developers of all levels, as it gives them the capability to build a functional, attractive website design within minutes. A novice developer with just some basic knowledge of HTML and little CSS can easily get started with Bootstrap.

In this book, we'll look at some related tools and skills that will help you with Bootstrap development. It contains:

  • 15 Bootstrap Tools and Playgrounds by David Attard
  • An Introduction to Grid Systems in Web Design by Callum Hopkins
  • Bootstrap UI Libraries for Angular, React and Vue.js by Maria Antonietta Perna
  • Bootstrap Grid: Mastering the Most Useful Flexbox Properties by Ahmed Bouchefra
  • Bootstrap Sass Installation and Customization by Reggie Dawson
  • The 5 Most Popular Front-end Frameworks Compared by Ivaylo Gerchev
  • The CSS Grid Layout vs CSS Frameworks Debate by Maria Antonietta Perna

This book is for all frontend developers who want to build responsive, mobile-first websites. You'll need to be familiar with HTML and CSS and have a reasonable level of understanding of JavaScript in order to follow the discussion.

Table of Contents

  1. Bootstrap: Related Tools & Skills
  2. Notice of Rights
  3. Notice of Liability
  4. Trademark Notice
  5. About SitePoint
  6. Preface
    1. Who Should Read This Book?
    2. Conventions Used
      1. Code Samples
      2. Tips, Notes, and Warnings
  7. Chapter 1: 15 Bootstrap Tools and Playgrounds
    1. by David Attard
    2. 1. Pingendo
    3. 2. Brix
    4. 3. Jetstrap
    5. 4. Pinegrow
    6. 5. Bootstrap Studio
    7. 6. Bootply
    8. 7. BootMetro
    9. 8. BootTheme
    10. 9. JSFiddle with Bootstrap
    11. 10. JSFiddle (Bootstrap + Font Awesome)
    12. 11. BootPress
    13. 12. Shoelace
    14. 13. UnderStrap
    15. 14. Bootstrap Button Generator
    16. 15. CodePen
  8. Chapter 2: An Introduction to Grid Systems in Web Design
    1. by Callum Hopkins
    2. The Nature of Grid Systems
    3. Unity in Grid Systems
    4. Grid Systems Beyond Web Design
    5. What Grid Systems Are Available?
    6. Other Grid Systems and Further Reading
  9. Chapter 3: Bootstrap UI Libraries for Angular, React and Vue.js
    1. by Maria Antonietta Perna
    2. Bootstrap Interface Elements for Angular Developers
      1. ng-bootstrap
      2. ngx-bootstrap
    3. Bootstrap Interface Elements for React Developers
      1. reactstrap
      2. React-Bootstrap
      3. Material Design for Bootstrap React Version
    4. Bootstrap Interface Elements for Vue Developers
      1. Bootstrap-Vue
    5. Conclusion
  10. Chapter 4: Bootstrap Grid: Mastering the Most Useful Flexbox Properties
    1. by Ahmed Bouchefra
    2. What is Flexbox?
    3. Introduction to the Bootstrap Grid System
      1. Key Classes of the Bootstrap Grid System
    4. Bootstrap Grid Layouts with Flexbox vs Floats
      1. Flexbox with Auto Margins
    5. Useful Flexbox Concepts to Handle Bootstrap Flex Utility Classes
      1. Flex Containers
      2. Flex Items
      3. Alignment of Flex Items
    6. Conclusion
  11. Chapter 5: Bootstrap Sass Installation and Customization
    1. by Reggie Dawson
    2. Bootstrap Installation
      1. Download Bootstrap files
      2. Node
      3. Ruby Gems
    3. Bootstrap Sass Setup
    4. Customize
    5. Conclusion
  12. Chapter 6: The 5 Most Popular Front-end Frameworks Compared
    1. by Ivaylo Gerchev
    2. 1. Bootstrap
      1. Notes on Bootstrap
    3. 2. Foundation by ZURB
      1. Notes on Foundation
    4. 3. Semantic UI
      1. Notes on Semantic UI
    5. 4. Pure, by Yahoo!
      1. Notes on Pure
    6. 5. UIkit by YOOtheme
      1. Notes on UIkit
    7. What’s the Right Front-end Framework for You?
  13. Chapter 7: The CSS Grid Layout vs CSS Frameworks Debate
    1. by Maria Antonietta Perna
    2. What Is CSS Grid?
    3. What Is Bootstrap?
    4. Why Bootstrap When We Have Grid?
      1. Bootstrap Is More Than Its Grid System
      2. Bootstrap Is a Great Prototyping Tool
      3. Working on Older Websites Built With Bootstrap
    5. Conclusion