Bootstrap

Getting to know Bootstrap

on Jun 21, 17 • by Chavirat Burapadecha • with No Comments

An introduction to Bootstrap: The key usage benefits, its history, and the information you’ll need to comply with its open source license...

Home » Open Source » Getting to know Bootstrap

Bootstrap is a free and open source front-end web framework. It offers HTML- and CSS-based design templates. In this article, I’ll introduce you to some of the key benefits of using Bootstrap, a little bit about its history, and provide you with information you’ll need to comply with its open source license.

Key benefits of Bootstrap

Bootstrap makes it easy to spice up and extend your web applications. Here are a few of its many benefits:

1. Easy to start because the framework offers pre-styled components
2. Documentation to support every single component and JavaScript plugin
3. Speed up your work by applying and easily customizing components
4. Responsive design with a fluid grid system

Let’s take a look at each of these benefits, one at a time.

1. Easy to get started

Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You’ll see something like this:

 
bootstrap/
├── css/ 
├── bootstrap.css 
├── bootstrap.css.map 
├── bootstrap.min.css 
├── bootstrap.min.css.map 
├── bootstrap-theme.css 
├── bootstrap-theme.css.map
├── bootstrap-theme.min.css
└── bootstrap-theme.min.css.map 
├── js/
├── bootstrap.js 
└── bootstrap.min.js 
└── fonts/ 
├── glyphicons-halflings-regular.eot 
├── glyphicons-halflings-regular.svg 
├── glyphicons-halflings-regular.ttf 
├── glyphicons-halflings-regular.woff 
└── glyphicons-halflings-regular.woff2

The framework comes with stylesheets, JavaScript, and fonts. You can include the code directly in your application or you can use Bootstrap CDN by adding links into your HTML page without downloading Bootstrap framework.

Bootstrap code 1

2. Complete documentation with tutorials

Bootstrap provides a tutorial and examples of all its components.

3. Speed up your work through customization

For example, you want to create an alert warning message, you just add class “alert alert-danger” into the division of your page.

Result:

Code with Bootstrap:

Bootstrap code sample 2

Code without Bootstrap:

Bootstrap code sample #3.

4. Responsive design with the grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Bootstrap includes a responsive, mobile first fluid grid system

It’s not surprising Bootstrap is so popular among front-end web developers.

History

Bootstrap was initially released in August 19, 2011 as a framework to encourage consistency across internal tools. Mark Otto and Jacab Thornton developed Bootstrap as a framework to share common design patterns and assets within the company. The code is licensed under the Apache License v2.0. The documentation is licensed under Creative Commons Attribution BY 3.0.

On January 31, 2012, Bootstrap 2 was released, which added a twelve-column responsive grid layout system, built-in support for Glyphicons, several new components, as well as changes to many of the existing components. The grid system has a huge benefit to adjust the layout. Grids bring order to a layout making it easier for visitors to find and navigate through information. Furthermore, the code remained licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0.

On August 19, 2013, Bootstrap 3 was released, which redesigned components to use flat design, and a mobile first approach. It was more supporting mobile design. Even though many components increased from the version 2, it would not cause any problems to upgrade the version of Bootstrap from 2 to 3. Even though the code license changed from Apache v2.0 to MIT license, both are permissive licenses therefore, the license obligations and regulations are similar.

On August 19, 2015, the first alpha version of Bootstrap 4 was released. This version almost completely rewrites from Bootstrap 3.

Significant changes include:

• Switched from Less to Sass
• Dropped IE8, IE9, and iOS 6 support
• Added flexbox support and then dropped non-flexbox support
• Switched from pixels to root ems
• Increased global font-size from 14px to 16px
• Dropped the panel, thumbnail, and well components in favor of cards
• Dropped the Glyphicons icon font
• Dropped the pager component
• Rewrote almost all components, jQuery plugins, and documentation

Furthermore, Bootstrap 4 supports Internet Explorer 10+, but does not support IE9 and down. Moreover, some CSS3 properties and HTML5 elements may be not supported in IE10. In my opinion, Bootstrap 3 is the most stable version right now and almost fully supports any browser.

During the audits we’ve performed at Rogue Wave Software, we’ve found Bootstrap 3 is the most commonly used version for clients.

License and compliance

The code for Bootstrap was originally licensed under the Apache 2 license but was changed to the MIT License starting with version 3. The MIT License is a simple permissive license with only a couple of obligations you’ll need to follow to comply. Here is an outlining of the license requirements:

MUST

• Keep the license and copyright notice in CSS and JavaScript files of Bootstrap

PERMIT

• Free download and use in private or commercial purposes
• Modify the source code

DO NOT

• Hold the authors and license owners liable
• Hold the creators or copyright holders
• Redistribute any piece of Bootstrap without proper attribution
• Use any trademarks owned by Twitter

• Visit the Bootstrap website for more details.
• Stay current with the most recent open source releases and security updates. Sign up for OpenUpdate.
• Talk to our service team about Rogue Wave Open Source Audit services.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top