HTML & CSS

Bootstrap CSS Framework for Responsive Designing

Description:

In this article, we will discuss the meaning of Bootstrap CSS Framework and see what are the advantages, a brief history, and alternatives to CSS frameworks other than Bootstrap.

Understanding Bootstrap

Bootstrap¬†is¬†an open-source front-end framework for designing web interfaces.¬†Bootstrap consists of a collection of “ready-to-use” HTML, CSS, and JavaScript code that makes it easier for us to create web designs.

Bootstrap is also often referred to as a¬†CSS framework¬†because it contains a “framework” (framework) on how to compile HTML and CSS code according to the rules of Bootstrap.¬†However, because Bootstrap also uses JavaScript, it is more fitting to be called a¬†front-end framework.




With Bootstrap, we can create an attractive web appearance without having to understand the complicated code behind it. The basis needed is quite basic HTML, CSS, and a little JavaScript if you want to create interactive effects.

Bootstrap is open-source and can be used for free. The official Bootstrap website is located at getbootstrap.com.

Bootstrap CSS Framework for responsive designing



Bootstrap CSS Framework Advantages

Why should you use a framework like Bootstrap? There are some reasons:

  • Browser compatibility.¬†We don’t need to worry about differences in appearance between one web browser and another.¬†If you’ve made web designs using CSS before, it’s not uncommon for there to be differences in implementation from one web browser to another.
  • Faster Development.¬†We can design a web appearance quickly because Bootstrap already provides ready-made code to create various web components, such as navigation menus, buttons, forms, responsive techniques, etc.
  • Great Design.¬†Bootstrap already provides good design standards so it is very helpful, especially for programmers who are less skilled in terms of design.¬†What’s more, the web appearance created with Bootstrap is responsive by default.
  • Easy to learn.¬†To be able to use most of the features in Bootstrap, it’s enough to write a few classes into HTML code without needing to understand the CSS code behind it.

Behind all these advantages, Bootstrap also often gets criticism because it looks like “that’s all”.¬†This is inseparable from the popularity of Bootstrap itself.

There are already so many websites that use Bootstrap, so it’s no wonder there are similarities between one website and another.¬†Apart from that, there are also many developers who are “lazy” to change the standard default look of Bootstrap (for example, still using the blue color that is characteristic of Bootstrap).

Bootstrap is a ”¬†front-end framework¬†“.¬†This means that Bootstrap specifically handles designing display designs such as tidying up form designs, creating slideshows, or creating popup windows.¬†Form processing as well as data processing is beyond Bootstrap’s reach.

If you want to process a form, it’s already part of the¬†back-end programming¬†which can be processed using the PHP language or using a special back-end framework such as Code Igniter / Laravel.



History of Bootstrap

Around 2010,¬†Mark Otto¬†and¬†Jacob Thornton¬†who were developers at Twitter developed a framework for the company’s internal.¬†This framework is named¬†Twitter Blueprint.

The reason behind this development is so that Twitter has a consistent look for different projects. Previously, developers at Twitter used different libraries for each project, making it difficult to manage. It is hoped that the Twitter Blueprint will become a universal framework for various projects that Twitter is working on.

After several months of development (and internal use), Twitter Blueprint changed its name to Bootstrap and was released as an open-source project on August 19, 2011. Since then, Bootstrap can be used by various developers around the world (not just Twitter employees). Many programmers and web designers also joined in developing Bootstrap.

On January 31, 2012, Bootstrap 2 was released with the addition of a 12-column responsive grid system, using icons from Glyphicons, and the addition of various new components.

Furthermore, Bootstrap 3 was released on August 19, 2013, with several changes such as adopting a flat design and using the mobile-first concept.

Bootstrap 4 arrived on January 18, 2018, 4 years after version 3. This version uses the flexbox concept in making layouts (previously using the float system), and replaces the internal CSS pre-processor from Less to Sass.

Finally, Bootstrap 5 was released on May 5, 2021, after going through several alpha and beta versions throughout 2020. This is the version I will be using throughout this bootstrap tutorial series.



Alternative CSS Framework besides Bootstrap

Bootstrap is currently still the most popular front-end framework, but it’s not the only framework for creating web designs quickly.¬†There are various other frameworks, including:

  • Foundation CSS framework
  • Bulma CSS framework
  • Semantic UI CSS framework
  • Materialize CSS framework
  • Tailwind CSS framework
  • Spectre CSS framework
  • UIKit CSS framework
  • Pure.css CSS framework
  • Tachyons CSS framework

Foundation CSS framework

Foundation is a responsive front-end framework that provides a CSS and JavaScript library for building responsive and mobile-first websites and web applications. It includes a range of pre-designed UI components, CSS and JavaScript tools, and layout templates to help developers quickly and easily create responsive designs. It also provides advanced features such as a flexible grid system, accessibility tools, and responsive media queries to make it easier to build and maintain responsive web designs.




Bulma CSS framework

Bulma is a free, open-source CSS framework based on Flexbox that makes it easy to create responsive and flexible web designs. It provides a range of pre-designed UI components, such as buttons, forms, navigation, and typography, as well as advanced features like responsiveness and modularity, to help developers create beautiful and functional web designs quickly and easily. It is known for its modern and clean design, ease of use, and ability to customize with SASS variables and mixins.

Semantic UI CSS framework

Semantic UI is a CSS framework that uses human-friendly HTML to create responsive and customizable user interfaces. It provides a range of pre-designed UI components, such as buttons, icons, forms, and models, as well as advanced features like theming, auto-generated documentation, and a powerful API for creating custom components. Semantic UI uses class names based on natural language to make HTML code more readable and intuitive, making it easier for developers to create beautiful and functional web designs.

Materialize CSS framework

Materialize is a CSS framework based on Google’s Material Design guidelines that provide a modern and clean design for building responsive and mobile-friendly websites and web applications. It includes a range of pre-designed UI components, such as buttons, cards, forms, and navigation, as well as advanced features like parallax scrolling, side navigation, and models. Materialize also provides JavaScript plugins, such as carousels and modals, to enhance the user experience and make it easier for developers to create dynamic and interactive web designs.



Tailwind CSS framework

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It provides a large set of pre-defined CSS classes that can be easily combined to create custom designs, rather than relying on a set of pre-designed UI components. This approach allows for greater flexibility and customization and makes it easy to create unique and responsive web designs. Tailwind also includes advanced features like responsiveness, built-in accessibility, and support for dark mode. The framework is known for its speed and efficiency, making it a popular choice for web developers.

Spectre CSS framework

Spectre.css is a lightweight and responsive CSS framework that provides a basic set of styles for common HTML elements, as well as a few useful components like forms, modals, and navigation. It is designed to be minimal and easy to customize, making it a good choice for projects that require a simple and fast setup. Spectre.css provides a basic grid system and basic styling for typography, colors, and other common design elements, but it is not as comprehensive as other CSS frameworks like Bootstrap or Foundation. It is known for its small file size and ease of use, making it a popular choice for developers who want a simple and fast setup for their projects.



UIKit CSS framework

UIkit is a lightweight and modular CSS framework for developing fast and powerful web interfaces. It provides a basic set of UI components, such as forms, buttons, and navigation, as well as advanced features like grid system, typography, and responsive design. UIkit is designed to be easy to use and customize, making it a good choice for projects that require a quick and simple setup. It is known for its modular architecture and performance, making it a popular choice for developers who want a fast and lightweight framework for their projects.

Pure.css CSS framework

Pure.css is a minimalist CSS framework that provides a basic set of styles for common HTML elements, such as forms, buttons, and typography. It is designed to be small, fast, and easy to use, making it a good choice for projects that require a simple and fast setup. Pure.css does not include many advanced features like a grid system or pre-designed UI components, but it provides basic styling for common design elements, making it a popular choice for developers who want a simple and lightweight framework for their projects. The framework is known for its small file size and performance, making it a popular choice for developers who want a fast and efficient setup for their projects.




Tachyons CSS framework

Tachyons are a functional CSS framework that provides a fast and efficient way to style websites and web applications. It provides a large set of pre-defined CSS classes that can be easily combined to create custom designs, rather than relying on a set of pre-designed UI components. This approach allows for greater flexibility and customization and makes it easy to create unique and responsive web designs. Tachyons are designed to be performance-focused and modular, making it a good choice for projects that require a fast and efficient setup. It is known for its speed and efficiency, making it a popular choice for web developers who want a fast and efficient way to style their projects.

And much more‚Ķ.¬†(can search on Google with the keyword “CSS Framework”)

Do I have to learn all of this?¬†Well… it doesn’t have to be all.



We must be able to manage time and energy to choose what should be studied. Each framework has its own advantages and disadvantages. The most important thing is how to make the project work done, regardless of what framework it uses.

If you have time and want to focus on web design, there’s nothing wrong with learning 2 or 3 front-end frameworks with more diverse skills. More or less, we can learn how the principles of the framework work and determine what is suitable for project A, and what is suitable for project B.

If you have to choose just one, I think Bootstrap is still the best choice. Because it is relatively easy to use and is very well known.

That’s our introduction to the Bootstrap CSS framework. Bootstrap 5 is the final version when this tutorial was written, and that is what we will use throughout the tutorial on learning Bootstrap. To learn how to download and install bootstrap 5 read my article.

Related Articles

Leave a Reply

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

Back to top button