Your First Week With Bootstrap
Close
    • Your First Week With Bootstrap
    • Notice of Rights
    • Notice of Liability
    • Trademark Notice
    • About SitePoint
    • Who Should Read This Book?
    • Conventions Used
    • Reason 1: The Powerful Grid System
    • Reason 2: Rapid Development
    • Reason 3: Browser Compatibility
    • Reason 4: Customization!
    • Reason 5: Open Source
    • Want to Learn Bootstrap?
    • Getting Started
    • So What Exactly Are We Going to Build?
    • The Structure
    • Diving into Bootstrap
    • Wrap-up
    • #1 New Interactive Documentation
    • #2 Top-notch Modular Architecture
    • #3 Easier Scaling Across Screen Sizes
    • Conclusion
    • The Default Modal
    • Changing the Modal's Size
    • Activating Bootstrap Modals with jQuery
    • Bootstrap Modal Events
    • Conclusion
    • Getting Started
    • Creating a Simple Form
    • Forms With Grid
    • Inline Forms
    • Form Validation
    • Conclusion
    • What Is the Bootstrap Card Component?
    • Including Bootstrap in Your Project
    • Minimal Styling for Cards
    • Controlling Bootstrap Card Component Width and Height
    • Bootstrap Card Component Header and Footer
    • Adding Navigation
    • Adding Links to the Bootstrap Card Component
    • Aligning and Transforming Text in Bootstrap Card Components
    • Customizing Bootstrap Card Component Background, Foreground and Border Colors
    • Creating Advanced Layouts with the Bootstrap Card Component
    • Conclusion
    • How Bootstrap Sets Up Typography by Default
    • Creating the Responsive Type Scale
    • Wrapping It Up
    • The Bootstrap Responsive Type Scale in Action
    • Introducing Bootstrap Utility Classes
    • Flex
    • Float
    • Display
    • Sizing
    • Spacing
    • Text
    • Colors
    • Borders
    • Embeds
    • Close Icon
    • Conclusion
    • Only Download the Bootstrap Package You need
    • Opt for the Source rather than the Precompiled Download Package
    • Make Use of Proven Client-side Optimization Techniques
    • Conclusion
    • How to Customize the Appearance of Bootstrap Plugins
    • Customizing a Bootstrap Plugin's Functionality
    • Conclusion
    • What We're Looking For with Design Accessibility
    • Let's Start Testing Bootstrap Accessibility
    • So Is Bootstrap Accessible?
    • Advantages of Ready-to-use Front-end Frameworks
    • Downsides of Ready-to-use Front-end Frameworks
    • Advantages of Custom Solutions
    • Downsides of Custom Solutions
    • The Third Solution
    • Is "Reinventing the Wheel" a Real Problem?
    • How Can You Make the Right Choice?

Why I Love Bootstrap, and Why You Should Too

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.

Bootstrap provides a solid foundation for any website, irrespective of project size. It contains Reboot, which is based on Normalize.css and helps level out browser differences for various page elements. Bootstrap also provides great typography. Even basic HTML form elements like checkboxes, radio buttons, select options, etc., have been restyled to give them a modern look. I use Bootstrap because it saves me a considerable amount of effort.

Today's websites should be modern, sleek, responsive, and "mobile first". Bootstrap helps us to achieve these goals with minimum fuss. Here are the top five reasons why I love Bootstrap:

Reason 1: The Powerful Grid System

Bootstrap has one of the best responsive, mobile-first grid systems available. It's built with Flexbox and it's easy to use. It helps in scaling a single website design from the smallest mobile device to high-definition displays, logically dividing the screen into 12 columns, so that you can decide just how much screen real estate each element of your design should take up.

Although developers have CSS Grid Layout for layout building, the Bootstrap Grid component can still be handy for quick prototyping --- at least while we get more familiar with the new native CSS tool at our disposal today.

Reason 2: Rapid Development

Bootstrap comes complete with many reusable CSS and JavaScript components that can help achieve the functionality needed in almost any kind of website. You just have to use some HTML to plug them into your template, with no need to spend huge amounts of time writing complex CSS and JavaScript. Plus, all these components are responsive, too!

Reason 3: Browser Compatibility

Bootstrap is compatible with the latest, stable releases of all major browsers and platforms. With regard to the Windows platform, Bootstrap works in Internet Explorer versions 10--11 and Microsoft Edge. If Bootstrap's instructions are followed properly, you can create a website design that works in all these browsers.

Of course, if your employer wants to make a website that looks exactly the same in IE7--8 as it does in modern, standards-compliant browsers, then it might be time to think about switching jobs!

Reason 4: Customization!

Bootstrap offers many ways to customize its default design. You can override all of its CSS and default JavaScript behavior. Bootstrap is even more interesting if you're a Sass developer, as it includes Sass customization options. These options let you smoothly create a new template using Bootstrap.

Reason 5: Open Source

Bootstrap is an open-source project that's hosted on GitHub and released under the MIT license. This is one of the biggest reasons I use Bootstrap. My clients won't have to deal with purchasing and licensing issues, and Bootstrap's license gives me the freedom to completely change and experiment with it.

Want to Learn Bootstrap?

SitePoint has published my book on Bootstrap called " Jump Start Bootstrap ". It teaches you how to get started with Bootstrap. Apart from teaching you how to use Bootstrap's components and plugins, it also covers how to customize them through options like Less and Sass. A major section has been dedicated to Bootstrap's grid system, which is the most important aspect of creating a responsive website design. You'll also learn to create many demo website designs throughout the book.

Hopefully you found this article interesting, and it has convinced you to try Bootstrap in your future projects.

Community Questions