Skip to content
Noroff Case Studies

Bootstrap

Author: Aleksander Engen <aBadMan91>

Bootstrap

Bootstrap was created at Twitter in mid-2010 and is an open-source front-end framework to make web development faster and easier. It contains HTML, CSS design templates for typography, forms, buttons, navigation, and other interface components, you can also use optional JavaScript plugins.

Brief History

  • 2011: Initial release of Bootstrap in August 2011.
  • 2012: Bootstrap 2 was released in January 2012 and supported responsive web design.
  • 2013: In August 2013, Bootstrap 3 was released, marking the framework’s first adoption of a mobile-first approach to design and development.
  • 2014: Bootstrap 4 was announced in October.
  • 2015: The first alpha release of Bootstrap 4 was released in August 2015.
  • 2017: Two years later the first beta release of Bootstrap 4 was released in August 2017.
  • 2018: Bootstrap 4 was finalized on January 2018.
  • 2021: Bootstrap 5 was released in 2021.

Main Features

Bootstrap has several features that make it one of the most popular frameworks, these are some of the features.

Responsive Grid System

  • The grid system divides the page into 12 columns and makes it easier to work on different screen sizes.
  • The framework is designed with a “Mobile-first design” to ensure that web pages looks great on mobile first, and then scale up to larger screen or devices.

Pre-designed UI Components

  • Buttons, navigation bars, modals, forms, cards and more is a part of Bootstrap’s pre-designed library of UI components, they can be customized to fit the style or branding of the developers project.

JavaScript plugins

  • Bootstrap includes many different JavaScript plugins such as modals for popups, carousels for displaying images in a slider or contents in a rotating slideshow, tooltips for adding informative hints that appear when you hover over elements, and more.

Themes and Customizable Templates

  • Bootstrap has a large collection of pre-built themes and templates that can be customized by developers.
  • Third-party themes and templates are also available for different project needs.

Documentation and Community Support

  • Bootstrap documentation is thorough with examples, making it easier to learn and troubleshoot.
  • Bootstrap is one of the most widely used frameworks, it has a large community and you can find plenty of tutorials, plugins, tools and solutions to common problems.

Browser compatibility

  • Bootstrap is compatible with all modern browsers (Chrome, Firefox, Edge, Safari, etc).

Market Comparison

One of the other tools that Bootstrap competes with is Tailwind, there are other frameworks out there but we will look at the pros and cons of these two.

Bootstrap

Pros

  • A wide range of pre-built components which speeds up development.
  • Responsive Grid System which makes it easier to design layouts that work for different screen sizes.
  • Great documentation with plenty of examples that makes it easier to get started.
  • Large community to ask for help, get plugins and more.

Cons

  • Can lead to similar looking websites if not customized because of the pre-designed components.
  • File size can be larger than Tailwind which means slower load times.
  • If you customize Bootstrap it may lead to overriding default styles and that might create conflicts.

Tailwind

Pros

  • Flexible and highly customizable.
  • Smaller file sizes which improves performance.
  • Utility-First Approach which mean you can style directly in HTML using pre-existing classes.
  • Large community and support.

Cons

  • Steeper learning curve.
  • Limited pre-built components.
  • Risk of inconsistent design

Getting Started

To add bootstrap to yout project just follow this guide.

Ideal for prototyping or when you don’t need to customize Bootstrap.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

Option 2: install using npm

This method is best for when you want to customize Bootstrap.

You need to install node.js for this to work (link included in the “Additional Resources” section).

First create a package.json by using this command in your project directory:

Terminal window
npm init -y

After the package.json is created use this command to install Bootstrap:

Terminal window
npm install bootstrap

Then import Bootstrap into your main JavaScript file:

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

If you want to read more on how to get started there are more links included in “Additional Resources”.

Conclusion

Bootstrap is great for beginners because of the great documentation with many examples and the pre-built components, it is also great for projects that needs to be developed fast. Tailwind is a better choice if the development team wants full control over the design and is willing to build a more custom UI, but the steeper learning curve makes it harder for beginners.

References

Additional Resources