Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit

Over the last few years, the browsing habits of end users have evolved to include a variety of devices. As a result, responsive web design is a necessity for every website that is developed today. However, creating a responsive design from scratch for every project can be time-consuming. One great solution that makes your life easier is to use a CSS framework. Such a framework takes care of basic responsive design principles for you. In this comparison, we take a look at some of the best CSS frameworks out there and see which is best. Here’s Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit.

This post guides you to choose the right CSS framework for your next project. I assume that you have basic knowledge of front-end technologies and responsive web design principles. Each CSS framework is tested to cover various aspects of Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit. I cover the origins of each framework and the top features of it. I also give you a quick start guide for each framework.

At the end of this post, you will know the top features and limitations of each framework and be in a better position to identify which of them best suits your needs. Let’s get started:

Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit

Bootstrap #
Foundation #
Bulma #
Semantic #
UIkit #
Final thoughts #

Bootstrap (getbootstrap.com)

Bootstrap is a responsive, mobile-first CSS framework to develop websites quickly. It is the most popular CSS framework on this list, with over 130k stars on GitHub. Bootstrap contains ready-to-use components developed with HTML, CSS and JavaScript.

Bootstrap was initially developed at Twitter in 2011, but it eventually evolved into an independent project. The current stable version is 4.3. Bootstrap 5, currently in development, will substitute the use of jQuery with vanilla JS, drop support for outdated browsers and change the current testing platform.

To use Bootstrap, you have to do the following when building a new web page:

Use the HTML5 doctype
Create a viewport meta tag
Import the Bootstrap CSS in your head tag
Import scripts in the order of jQuery, Popper.js and then bootstrap.min.js to use any of Bootstrap’s JavaScript functionalities

Here is a starter template.

<!doctype html>
<html>
  <head>
...
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
...
  </head>
  <body>
...
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

In this tutorial, we will use the CDN-hosted versions of resources (CSS and JS files) for these frameworks. Here is a quick start guide on Bootstrap.

In addition to a robust mobile-first approach, there is significant community support owning to the maturity of the framework. Moreover, while Bootstrap maintains a list of approved frameworks and kits for you to choose from, third party developers also offer kits and packages for Bootstrap that can be integrated with your projects equally easily. Here is our pick of free UI kits for Bootstrap. In addition to being mobile first, there is some support for touchscreens. As Bootstrap is a mature project, it supports many accessibility features.

The biggest drawback of Bootstrap is the increase in page weight. While a few hundred kilobytes may not be significant in a world where the average page size is around 2MB, it may concern developers who aim for the highest efficiency. The dependence on jQuery is a concern, although it is encouraging to know that jQuery’s removal is a part of the roadmap for Bootstrap 5.

? Pros:

Mobile first, responsive web design framework
Good community support and documentation

? Cons:

Large dependency size (~ 300KB)
Dependency on jQuery for some components to work

Bootstrap should be your go-to option if you are looking for a stable platform with a good support base. It is the right choice if you do not wish to tinker much with the default components. Bootstrap is perfect for those who want to quickly iterate solutions in an agile environment.

Foundation (foundation.zurb.com)

Foundation, first released within a month of Bootstrap in 2011, is a class of front end frameworks for not just websites, but applications and emails too! Let us see how Bootstrap vs Foundation stack up!

Just like Bootstrap at Twitter, Foundation started as an internal tool at the Zurb foundation, and then it was eventually released as a framework. The source code of Foundation is open source, with an emphasis on mobile-first responsive designs. Foundation has a similar grid system to Bootstrap with 12 columns to choose from. Additionally, JavaScript is optional, too!

The broad steps to use Foundation on your website are as follows:

Download the Foundation resources
Use the HTML5 doctype
Add the Foundation CSS file in the head tag
Include jQuery, what-input.js and Foundation’s scripts
Just before ending the body tag, call the foundation() function to attach the Foundation properties to various DOM elements

Here is a quick-start template:

<!doctype html>
<html class="no-js" lang="en">
  <head>
...
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/foundation.css" />
  </head>
  <body>
...
    <script src="https://www.codeinwp.com/js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>

You can download a custom build of the Foundation framework if that suits your needs.

When we try to compare Bootstrap vs Foundation, a couple of things come up. Bootstrap offers more support from the community, is a bit easier to work with, and gives you a wide range of themes to choose from when getting stared. Foundation, on the other hand, gives you more control and freedom over your components, without the need to add classes to DOM elements – as properties are associated with components. Also, since Foundation has been in development for a few years now, it provides many accessibility features.

? Pros:

Mobile first, responsive web design framework
Provides support for applications and emails

? Cons:

Large dependency size like Bootstrap
Huge number of features that may overwhelm beginners

The functionality between Bootstrap vs Foundation does not change significantly, and you won’t lose much when choosing either platform. That being said, you should probably go with Foundation if you want more control over your project.

Bulma (bulma.io)

Bulma is an open source, lightweight CSS framework based on Flexbox.

While not quite at the level of Bootstrap, Bulma is a fairly popular project on GitHub with over 35k stars.

Bulma is designed to a mobile-first, responsive framework, with an added focus on modularity.

In order to use Bulma in your project, you have to follow these steps:

Add the HTML5 doctype
Add a meta tag for a responsive viewport
Include the Bulma CSS file in your head tag
[Optional] Add the fontawesome script to use icons

Here’s a template:

<!DOCTYPE html>
<html>
  <head>
...
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </head>
  <body>
...
  </body>
</html>

Coming back to the debate on Bootstrap vs Foundation vs Bulma, Bulma has a more gentle learning curve. A significant difference of Bulma’s with respect to Bootstrap and Foundation is the sole focus on CSS, without any JavaScript elements in the framework. The exclusion of JavaScript makes the framework lightweight too. In terms of accessibility, Bulma is only partially accessible, though the community is adding support on a regular basis.

? Pros:

Lightweight, flexbox-based framework
Modular elements enable flexibility

? Cons:

No JavaScript elements
Limited support for accessibility

As a developer, you should opt for Bulma if you would like to use a lightweight framework that helps you create responsive elements for the web. There is considerable support for the framework to help you if you get stuck in the process.

Semantic (semantic-ui.com)

Semantic is a CSS framework with the aim of creating intuitive user interfaces.

This framework uses class names that are obvious to help ease the learning process. Classes in Semantic are inspired by the English language to link logical concepts to class names.

To use Semantic components in your project, you need to complete the following steps:

Include the HTML5 doctype
Load the Semantic CSS file
Include jQuery before calling any JavaScript elements
Include Semantic’s script

Here’s a template:

<!DOCTYPE html>
<html>
  <head>
...
    <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
  </head>
  <body>
...
    <script
      src="https://code.jquery.com/jquery-3.1.1.min.js"
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
      crossorigin="anonymous"></script>
    <script src="semantic/dist/semantic.min.js"></script>
  </body>
</html>

To compare Semantic with Bootstrap vs Foundation and the others, you would notice that in spite of intuitive naming conventions, Semantic falls short in terms of complexity to learn. The documentation is extensive, but it takes some time to get used to. Integration with JavaScript frameworks like Angular and React is good, which makes it ideal for use in an application that involves the use of these frameworks.

? Pros:

Intuitive class names
Integration with JavaScript frameworks

? Cons:

May not fulfill the need of large projects
Limited support from community

Semantic is the framework that has a relatively easier learning curve, and supports JavaScript frameworks too. If your requirements involve the use of JavaScript, you should definitely consider the use of this framework in your next project.

UIkit (getuikit.com)

UIkit is a modern, lightweight framework with a huge emphasis on modularity to create web interfaces.

It is a relatively new, open-souce framework with about 15k stars on GitHub. UIkit helps you create responsive designs, with automated continuous deployment on BrowserStack.

To use UIkit components in your project, you need to complete the following steps:

Include the HTML5 doctype
Load the UIkit CSS file
Include UIkit’s scripts for functionality and icons

Here’s a template:

<!DOCTYPE html>
<html>
  <head>
...
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/css/uikit.min.css" />
  </head>
  <body>
...
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit-icons.min.js"></script>
  </body>
</html>

UIkit has a significant number of features if we’re comparing it with Bootstrap vs Foundation vs Bulma. In spite of having JavaScript elements, UIkit has no dependency on jQuery, which makes the payload for the end user smaller. It definitely stands neck to neck with these frameworks in terms of quickly iterating versions of your web applications in an agile development environment.

? Pros:

Focus on modularity, making it easy to work with them
Elements are customizable, leading to flexibility

? Cons:

Limited documentation and community support

While UIkit gives you a lot of freedom in terms of control over structure and features, it is fairly new, which leads to limited support online if you face issues with the framework. Therefore, you should consider this framework in a project only if your front-end programming skills are advanced enough.