Semantic UI or Bootstrap? Discover the pros and cons of each framework

Bootstrap is the most popular framework for CSS, but Semantic UI is gaining popularity thanks to its simplicity. What are the advantages and disadvantages of each?

Among the multiple frameworks currently available to web developers, Boostrap remains the guild’s favorite. However, now, various frameworks compete for the love of front-end developers, and some, like Semantic-UI, have made their first steps and have more and more followers.

Let’s start by learning a little about the history and characteristics of Bootstrap and Semantic UI, and then review the pros and cons of each.

What is Bootstrap?

Bootstrap is the framework behind several of the popular websites such as Netflix, Espn.com, and CNN.com. This tool allows web developers to create projects that, without it, could take several days or weeks.

Developed by Mark Otto and Jacob Thornton at Twitter offices, Bootstrap sought to save time for web designers on the social network while ensuring that the website maintained a similar style across all sites.

The Bootstrap Community

Currently, this framework has one of the largest and most active communities. At the time of this writing, there are close to a hundred thousand questions on StackOverflow tagged as twitter-bootstrap, of which over 70% are resolved. About the latest version of Bootstrap (Bootstrap 4), there are 20 thousand questions, 85% of them fixed.

In addition to the essential help of the StackOverflow community, Bootstrap maintains communication with the developers through its official blog, Twitter account, and Slack and IRC chats on Freenode.

In short, Bootstrap is the most popular framework. But also Windows and the QWERTY keyboard are the most popular in their respective areas and, for that reason, they are not the best. Let’s see below some of its strengths.

Pros of Bootstrap as a framework

To retain the title of the most popular framework, you must do at least one or two things well. If not, the developer community will either quickly find other solutions or develop them themselves.

These are some of the advantages that the developers point out about Bootstrap:

  1. Fewer cross-platform errors. An advantage of having a large community is that it is easier to detect a mistake and correct it. The web design solutions offered by Bootstrap work in most browsers.
  2. A consistent framework that considers most compatibility issues. The design looks great in your latest version of Chrome, but not in your client’s Internet Explorer 7. With Bootstrap, it is possible to avoid most of these problems.
  3. Light and customizable. Whether you use it externally or within your project, Bootstrap optimizes resources and allows you to make your design changes.
  4. Responsive styles and structures. This feature is one of the favorites by developers, who must take it more seriously than they do web pages for multiple platforms. With Bootstrap, it is possible to make responsive sites from scratch.
  5. JavaScript plugins that use jQuery. Making dynamic sites is easier even for front-end developers with little JavaScript experience.
  6. Well documented support and an active community. We mentioned it before, but it’s worth mentioning again. If there is a problem with Bootstrap, someone probably already has a solution.
  7. Hundreds of free and professional templates, WordPress themes, and plugins. Another consequence of having an active community is the large number of free resources that exist made with the framework.
  8. A grid system easy to implement. This Bootstrap feature has now been improved in version 4 thanks to the incorporation of flexbox.

Cons of Bootstrap

But if Bootstrap were perfect, there would be no room for other frameworks like Foundation, Bulma, or Semantic UI, which will be discussed later.

These are some of the Bootstrap features that can cause a headache:

  1. Departing from Bootstrap’s predefined layout can be a pain. To make changes to the base design of the framework, you will probably have to overwrite styles or rewrite some files, which can take as long as having done the project from scratch.
  2. Departing from Bootstrap’s predefined layout can be a pain. To make changes to the base design of the framework, you will probably have to overwrite styles or rewrite some files, which can take as long as having done the project from scratch.
  3. You will need to take extra steps to customize a site. If not, you run the risk of all sites looking the same.
  4. Styles can be very bulky, causing a lot of unnecessary output for HTML.
  5. Since JavaScript is tied to JQuery, there may be many plugins that will not be used.
  6. Unpleasant HTML. The large number of classes that are sometimes necessary can make the HTML used not very pleasant to review later. Also, the name of the classes can be less intuitive than Semantic UI.

Where can I learn to use Bootstrap?

In English, you will find a lot of info and tutorials for using Bootstrap. One of my favorite sites is w3schools, which has tutorials for both Bootstrap 3 and Bootstrap 4. It is best to learn how to use version four as Bootstrap 3 will soon be discontinued.

What is Semantic UI?

Semantic UI is a framework for CSS, like Bootstrap. Full-stack developer Jack Lukic created this framework based on natural language principles, becoming one of the leading JavaScript projects on GitHub.

Semantic UI has a small but very loyal and enthusiastic community. In a short time, it managed to overgrow. In 2015, the community had already created more than 3,000 themes for the framework, in addition to more than 50 components for the user interface, and carried out 3,800 commits on GitHub.

Semantic UI Pros

  1. Very easy to use. This reason is one of the main ones for developers. Semantic UI is very intuitive. Do you want three columns? Type “three columns.” You want a dropdown. Type “dropdown”.
  2. Less time to design a page. Naming Semantic UI classes with meaningful names not only make the learning curve shorter but also makes developing projects more intuitive and faster.
  1. Wide variety of themes available. Layout variety is a weak point of Bootstrap and a strong point for Semantic UI. You can probably find a theme for the projects you are developing.

Cons of Semantic UI

  1. Less browser compatibility. Semantic UI does not support Internet Explorer 7, which Bootstrap does. Being an old version, this is probably not a significant problem.
  2. Less responsive design. Unlike the previous point, this can be a bigger problem, considering that web designers are increasingly forced to think about a wide variety of devices. We will have to wait for development to grow to find better solutions to these issues.
  3. Smaller community. On GitHub, Bootstrap has more than 50,000 followers, while Semantic UI does not reach 1,000. Meanwhile, on StackOverflow, there are only 2,500 questions about Semantic UI, with about 25% of the questions unsolved.
  4. Few recent updates. Perhaps this is the most worrying point about Semantic UI, and that caused concern among its followers just over a year ago. The development of Semantic UI seemed to be abandoned for a long time, more than a year passed without any commit between 2018 and 2019. This situation caused the same community to create some forks for Semantic UI, as in the case of Fomantic-UI. However, developers commented last year that the new version was taking longer, but was almost ready.

Part of the delay Semantic UI has shown was due to differences between Jack Lukic and Levi Thomason, one of the main collaborators in the project, about the necessary changes. Thomason considers CSS in JS to be the future of web development and insisted on leading the project in that direction.

Currently, Semantic UI is still in development and now with other forks as an alternative for those who do not fully agree with the changes of the main collaborators. On its website, the framework has detailed documentation, and there are already some materials to learn how to use it in English, like this video:

Which is better: Bootstrap or Semantic UI?

This cliche question merits a cliche answer: it depends on the project. If a unique design is not the main thing, you have time to spare, and you prefer to have a lot of resources available online to solve problems, Bootstrap may be the most reliable alternative. On the other hand, Semantic UI can be an alternative worth trying for a project that needs to be completed in a short time, and that requires unique design, but keep in mind that the fact that the community is still small can cause trouble if you get stuck somewhere.