Skip to content

Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit

In this comparison, we take a look at some of the best CSS frameworks out there and see which is best.

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.

Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit

Each CSS framework is tested. I cover the origins of each framework and the top features of it. I will 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 (getbootstrap.com)

Bootstrap vs

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 vs

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 and 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="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 and 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 and 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.

You may also be interested in:

Bulma (bulma.io)

bulma vs

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>

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 vs

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 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)

ulkit vs

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

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, Foundation or 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.

Final thoughts

To summarize what we’ve talked about in this comparison of the top CSS frameworks:

  • If you want a hassle-free solution that has a lot of support, go for Bootstrap
  • To get more freedom on your components, try out Foundation
  • In order to ensure a lightweight addition to your project, give Bulma or UIkit a try
  • If your web application uses heavy JavaScript frameworks, you should opt for Semantic

Which CSS framework do you use in 2023? Do let us know in the comments below!

Don’t forget to join our crash course on speeding up your WordPress site. Learn more below:

 

Layout, presentation, and editing by Karol K.

Yay! 🎉 You made it to the end of the article!
Shaumik Daityari
Share:

0 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!