How Open Sourcing Bootstrap Made It Huge

Maria Antonietta Perna
Maria Antonietta Perna
Open Source Week

It’s Open Source Week at SitePoint! All week we’re publishing articles focused on everything Open Source, Free Software and Community, so keep checking the OSW tag for the latest updates.

Open Sourcing Bootstrap

Bootstrap, the popular HTML/CSS/JS framework created by Mark Otto and Jacob Thornton, started off as a proprietary tool aiming to foster code consistency and maintainability across Twitter products. It was in late August 2010 that the big decision of open sourcing Bootstrap was taken.

Was Open Sourcing Bootstrap a Great Decision?

Bootstrap 4 logo

In Learnings from Open-Sourcing Bootstrap, Mark Otto shared one of the best testimonies of what it means to be at the heart of one of the most successful open source projects in the front-end ecosystem:

open-sourcing Bootstrap was one of the best things to happen to me personally and professionally. I’ve been able to help thousands of people do their work better and faster—all while helping them learn a bit more as they go. … Bootstrap has been worth every second I’ve put into it and I hope to keep it up for a long time to come.

That was 2012, what about now? Fast forward to 2016: Bootstrap 4 alpha 5 is out and to my recent question on the dedicated Bootstrap Slack Channel about how much being an open source project has contributed to the growth and success of the framework, Otto was quick to reply:

without it being open source, it wouldn’t have grown at all :) It would still be an internal project at twitter if we hadn’t shared it outwardly when we did.

The open source way is at the heart of Bootstrap being as huge as it is today: the second most starred project on GitHub and providing the front-end infrastracture for over ten million live websites.

At its core is communication and collaboration between designers and developers. Bootstrap itself comes to be called by its creator a living document powered by itself, as it embodies the very templates and components it documents. As a living styleguide, Bootstrap works as a compass for all discussions about the framework’s evolution as well as providing as many people as possible with guidance on its usage for building websites and apps.

Last but not least, being a framework that caters for all skill levels and being an instance of best front-end development practices, Bootstrap can be put to use as an excellent learning tool.

It’s not by chance that Bootstrap’s motto is in fact: Help awesome people do awesome stuff.

How is Bootstrap Managed on GitHub?

Not being part of the development team behind Bootstrap doesn’t mean being totally in the dark about how the project is maintained and developed on GitHub.

Let us not forget about the central role communication plays in laying the groundwork for the entire project. It turns out not only is Mark Otto great at documenting code, he’s also quite open when it comes to sharing his vision, project management, and generally his thought about a number of web development topics. The most curious among you can head over to Ask @mdo anything! on GitHub and browse through Otto’s replies, or better still, fire away with your own questions.

In Managing features in Bootstrap, Otto outlines a few guiding principles and practices he and his team follow on the Bootstrap repository.

Here’s a summary:

  • Bootstrap is a product with a clear mission: Making design and development easier. If you request a particular feature, the Bootstrap team will evaluate whether to pursue it or not on the basis of a balance between this goal and the team’s interests and experience.
  • The main tool for features management is the Bootstrap issue tracker. If you’d like to suggest a new feature or extend an existing one, just open a new issue or send a pull request. The team is quite shrewd when it comes to rejecting new suggestions that don’t match up with their goals for the framework, but if they accept, your request remains open and gets assigned a milestone for its release.
  • Development of major releases is under wraps until testing time. The team has fun making significant changes to the framework on every major release. Which features will be present and which ones will be scrapped is managed in two private GitHub repos. Once the team is ready for testing, the project opens its doors to the community for help and feedback.

Bootstrap Version 4 Alpha 5

With each major release, Bootstrap gets a complete makeover. Version 4, the latest release at the time of writing, is no exception. Although the framework is in its alpha stage, which means all sorts of changes can still take place, you can come away from reading the docs and the issues tracker on GitHub with a rough idea of what you’ll find once the stable version comes out.

Here’s a bird’s eye view of what’s new in Bootstrap version 4 alpha:

  • Move from Less to Sass.
  • Optional use of flexbox.
  • Replacement of pixels with rem and em units for sizing fonts, margins and paddings.
  • One more grid tier for the extra-large responsive breakpoint.
  • Introduction of Reboot as the new module for HTML resets.
  • Rewrite of all JavaScript plugins using ES6.
  • Improvement of Tooltips and Popovers with the Tether library.
  • Scrapped Wells, Thumbnails and Panels for the Cards component.
  • Removal of the Affix component.
  • Dropped support for Internet Explorer 8 and below.

You can find more about broad changes in Bootstrap 4 alpha in Bootstrap 4 Alpha: Super Smart Features to Win You Over.

Here, I’m not going to include more granular changes involving class names, components’ HTML structure, reorganization and renaming of Sass variables, etc., since it’s likely they’re going to change quite a bit until the first stable release of the framework comes out.

If you’re curious, the alpha docs and The Bootstrap Blog are the best places to hunt for more details.


Teaching and learning from each other and building awesome stuff as a result of open communication and collaboration lie at the heart of the open source philosophy. Bootstrap certainly stands out as one of the most successful instances of the open source approach, which has made it what it is today.

Why not start to play with Bootstrap, learn from it, and make it more awesome with your contributions?

Frequently Asked Questions (FAQs) about Open-Sourcing Bootstrap

What is the significance of open-sourcing Bootstrap?

Open-sourcing Bootstrap has played a crucial role in its success. It allows developers from all over the world to contribute to its development, making it more robust and versatile. Open-source software is typically more secure as it is constantly reviewed and improved by the community. It also fosters innovation as developers can modify and adapt the software to meet their specific needs.

How has open-sourcing contributed to Bootstrap’s popularity?

Open-sourcing has made Bootstrap accessible to a wide range of developers. It has created a community of users who contribute to its development, share knowledge, and help each other solve problems. This sense of community and the ability to contribute to the project has made Bootstrap very popular among developers.

What are the benefits of using Bootstrap for web development?

Bootstrap offers a variety of benefits for web development. It provides a responsive grid system, pre-designed components, and powerful plugins built on jQuery. It allows developers to create responsive, mobile-first projects on the web quickly and efficiently. It also ensures consistency regardless of who’s working on the project, which is particularly useful for teams.

How can I contribute to the Bootstrap project?

As an open-source project, Bootstrap welcomes contributions from developers. You can contribute by reporting bugs, suggesting new features, improving documentation, or writing code. To get started, you can check out the project on GitHub, understand the contribution guidelines, and start contributing.

What is the future of Bootstrap?

The future of Bootstrap looks promising. With the continuous contributions from the community, it is expected to evolve and improve further. The developers are committed to making it more efficient, flexible, and easy to use. They are also focused on keeping up with the latest trends in web development, ensuring that Bootstrap remains relevant and valuable to developers.

How does Bootstrap compare to other front-end frameworks?

Bootstrap is one of the most popular front-end frameworks due to its simplicity, flexibility, and robustness. It provides a comprehensive set of tools for developing responsive, mobile-first websites. While other frameworks like Foundation and Bulma also offer similar features, Bootstrap’s large community and extensive documentation make it a preferred choice for many developers.

Can I use Bootstrap for commercial projects?

Yes, you can use Bootstrap for commercial projects. As an open-source project, it is free to use and does not require any licensing fees. However, it is good practice to acknowledge the use of Bootstrap in your project.

How can I learn Bootstrap?

There are many resources available to learn Bootstrap. The official Bootstrap website provides comprehensive documentation and examples. There are also numerous online tutorials, courses, and books available. Additionally, the Bootstrap community is a great place to ask questions and learn from experienced developers.

What are some of the challenges of using Bootstrap?

While Bootstrap offers many benefits, it also has some challenges. It can be overkill for simple projects, and it may be unnecessary to load all Bootstrap components for every project. Some developers also feel that Bootstrap sites tend to look similar due to the use of pre-designed components.

How often is Bootstrap updated?

Bootstrap is regularly updated by its developers. Major updates are typically released every few years, with minor updates and bug fixes released more frequently. The developers are committed to keeping Bootstrap up-to-date with the latest web development trends and technologies.