Your First Week With Bootstrap
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