Bootstrap vs Tailwind CSS
After my first blog, talking about the basic of Tailwind CSS, I’m going to talk about how Tailwind CSS is different from Bootstrap. The obvious one is that Bootstrap is older than Tailwind CSS. Bootstrap was released back in 2011, while Tailwind was just created and released in 2017. Want to know more about their differences? Let’s keep reading… or watch the demo videos 😊
OBJECT ORIENTED CSS
Bootstrap uses Object Oriented CSS methodology, while Tailwind CSS uses utility-first CSS framework. The method is called Object Oriented CSS (OOCSS) because it uses objects, or data structure, consist of data fields and methods to interact with design application and programs. In the front-end web development world, we can define the object as the HTML, while methods used are CSS. The methods are applied to HTML, to define the flow and interactions between items in HTML. There are two main principles of OOCSS, based on Nicole Sullivan, whose brainchild this:
1. Separate structure and skin
2. Separate container and content
Separating the structure from the skin means that you can separate your layout styling from design styling. Think of the skin as the visual features of a styled web that can be reusable on the component. In bootstrap, the layout styling is the components, which can use skin to complete the whole design.
One illustration to picture this will be the code below:
We have a tag in navigation bar and another a tag in header section. Let’s say I want to add a background color to the a tag, when user hover over to the link; but I want the effect only on the navbar, and not on the header. How do I style this in CSS? We add “nav” class in front of “a” and specify it on the hover, like below code:
Using OOCSS concept, we are given more forethought to what is common among different elements and separate them into the “objects” that can be reused anywhere. For the same reason, Bootstrap focuses on components, such as buttons, carousels, navbars, and so on, to be able to re-use them in different parts of codes.
On the opposite, being utility first class, Tailwind CSS does not have component. It is all just classes. In the other word, Tailwind is a CSS without JavaScript. For example, you can define the width of your page with different sizes, available from Tailwind CSS classes.
You can see the variety of width available in Tailwind CSS from this demo code: https://codepen.io/planetoftheweb/pen/LYRExRB?editors=1000
You can also see the width options of Tailwind in table below:
IMPORTING BOOTSTRAP OR TAILWIND CSS
Enough with the background intro. Now we are going to start coding and see the actual differences. But, before we get started, you need to have bootstrap and Tailwind CSS installed. You also need to include CDN in the head tag of HTML, to import the library directly.
As you can see below, the first link is the CDN for bootstrap, while the second link is the CDN for Tailwind CSS.
BUTTON FEATURE
We will start with the first topic: button. As a reminder, Bootstrap has specific theme that you can’t change (due to its components). For example, there are eight different types of button, with their specific color: blue, grey, green, red, yellow, light blue, white, and black. As you can see the snapshot below, each colored button corresponds to each line of code in order, from top to bottom, both in bootstrap and Tailwind CSS code.
Looking at the code, Bootstrap can only provides 8 different buttons, while Tailwind can provides as many as buttons with different color, shades, or sizes. The reason behind this is because in Tailwind CSS, we don’t depend on the template, therefore, we can change the background color any color and any shade we want. Below code shows how Tailwind works.
The interesting part of Tailwind CSS is that you can define the template in the tailwind.config.js file. For example, looking at the code above, you can see I have a button class with ‘bg-info’ (see the 6th button in Tailwind code). What color is info exactly? This is where the problem lies. I couldn’t find the exact aqua color in Tailwind, to match the bootstrap btn-info class. What I did instead was to go to tailwind.config.js file, define the backgroundColor under theme, in the module.exports, and name it exactly like bootstrap class: info.
CONTAINERS, PADDING, AND COLUMNS
Bootstrap, as was mentioned earlier, has a template, which can make your website looks like a cookie cutter website. Also, as previously mentioned in the last blog, by default, Bootstrap gives 15 px padding in container component. Bootstrap also has breakpoints. You can see the breakpoint sizes at the link here.
Combined the breakpoint with container, as we can see here, when we defined the class into <div class=”container-fluid”></div>, the paragraph is extended all the way to the edge, at any different window sizes. When we minimize into 628px width, container-fluid also will still be extended to the edge, with 15px padding on each side.
However, when we changed the class into <div class=”container”></div>, the paragraph is extended to meet the size of 540px, and will give automatic padding to fill up the rest of the window size.
In Tailwind, we need to specify padding. If we want to match the Bootstrap design to the Tailwind design, we need to add pt|pr|pb|pl for padding (top | right | bottom | left). The padding in Tailwind usually is specified using rem unit, where 1 rem = 16 px. You can check out different padding size in this Tailwind’s link. As you can see, p-1 doesn’t correspond to padding 1 rem, instead, it is padding 0.25 rem. To get the same padding as Bootstrap, we need to specify padding left and right to be pr-4 and pl-4 (equivalent to 1 rem or 16 px, not quite exactly 15 px). Let’s look at the code and the result below:
Now, we are going to add padding in Tailwind, to mimic the one I have in Bootstrap style. We get a code above that gives result like below:
Next, let’s try some columns property. We want to make a page with many columns. Bootstrap divides a row into 12 columns, by default. When you don’t specify the width of the column, bootstrap will divide the width of the column equally, depending on number of columns to fit in a row (up to 12 columns).
You can also write the code like below, to give the same result. The difference is that we do specify the width of the column of 4, for each column (width = 12 columns/3 columns = 4).
What if we want to change the width of each column? Similarly, we will specify the width as col-x, where x equals the number of columns wide you want it to be. For example, we have the code below:
It shows that the first column will have width equivalent to 2 columns, the second column will have width equivalent to 7 columns. Lastly, the third column will have width equivalent to 3 columns.
The result is below:
Another question popped is that what if we want to put the third column on the second row? We just need to add <div class=”w-100"></div> right before the third column. The code will tell the browser that the div will have width all the way to 100%, so push back the third column to the next line. It is like having a column break.
This is where Tailwind has a lot more flexibility than Bootstrap. By default, Tailwind is similar to Bootstrap, where a row is divided into 12 equals columns. However, we have a class called grid-cols, where we can change the number of equally sized columns we want, as well as the size of the gap between each column. We can make a column wider or smaller, and not just limited to 12 columns in a row. We can also specify how much padding we want for each div.
We can also create a responsive website with Tailwind, by specifying how many columns is wanted at which windows size. For example, the code below specifies at xl screen sizes, one row will be divided into 6 columns, equally.
If we want to stretch the width even more, Tailwind has a class called col-start-x, col-span-y, and col-end-z. Note that in CSS, the grid line starts at 1, unlike array that starts from index 0.
The code means that we will split a row into 6 columns (index starts from 1 to 7), with gap size of 4. Each div starts at different location. The first one starts at index 1 and has width of 4 columns wide. The second div starts at index 1 and ends at index 3 (2 columns wide). The third one starts at index 3 and has width equivalents to 2 columns wide. The last one ends at index 7 and has width of 2 columns wide.
CONCLUSION
In summary, bootstrap has advantages and disadvantages, when compared to basic CSS. The advantages of bootstrap include rapid development, follow best practices, and no CSS expert skill required. Bootstrap can help you to develop your site very fast; just add the CSS class on an element and it will work right away. All Bootstrap libraries have codes behind the scenes that follow best practices, which mean you can use it safely and still be complied to guideline. You don’t have to know a lot of CSS to include them in the bootstrap, to make it work. However, Bootstrap has disadvantages, such as: no or little control, unnecessary overhead code, and uncustomed website pages. With Bootstrap, you can’t customize the theme, change or override the default. Because of this “prototype” feature, most of your website built using Bootstrap would look alike. It is almost like a cookie cutter template. You will also have many unnecessary libraries, since you have to import the whole Bootstrap library, even though you only need to build buttons or install images.
Similarly, Tailwind CSS also will allow a rapid development. However, Tailwind CSS allows you to build the front-end even faster than Bootstrap, because you can just add adding classes. There are no components exist in Tailwind, but classes available to create “components” on your own. Tailwind also follows best practices as you need to install the Tailwind libraries. In comparison with Bootstrap, Tailwind also has the downside: you will have collection of unnecessary libraries, especially if you just build a simple stuff. Also, like Bootstrap, you don’t need to be super good at CSS to style your website with Tailwind CSS. However, Tailwind CSS requires some knowledge in basic CSS. This makes Tailwind CSS has more control than Bootstrap.
NEXT
There are many other features that differentiate Bootstrap to Tailwind, and what makes Tailwind better than Bootstrap. In the next blog, we can further deep dive into object metrics, animations, and many more.
REFERENCES
https://themesberg.com/blog/design/tailwind-css-vs-bootstrap
https://josephamaurer.medium.com/framework-showdown-tailwind-vs-bootstrap-4adb740df21
https://stackshare.io/stackups/bootstrap-vs-tailwind-css
https://www.hiboox.com/tailwind-css-bootstrap-which-better/
https://blog.yudiz.com/pros-and-cons-of-bootstrap-vs-tailwind/
https://code.tutsplus.com/tutorials/object-oriented-css-what-how-and-why--net-6986
https://vanseodesign.com/css/object-oriented-css/
http://www.stubbornella.org/content/2009/03/23/object-oriented-css-video-on-ydn/
https://github.com/academind/css-vanilla-vs-frameworks/blob/youtube-vanilla-vs-frameworks/index.html