Cascading style sheets (CSS) is a tool used in web development to style HTML. To style your website, you can either use plain vanilla CSS, a CSS framework, a preprocessor like Sass, or a combination of all three.
CSS can be used in a wide variety of ways, and there are numerous tools available. As you searched for a framework or tool to employ in your project, you may have come across references to Bootstrap or Tailwind CSS. Which of these two CSS frameworks should you use? They are both able to reduce production time.
Bootstrap first became available on August 19, 2011. It was formerly referred to as "Twitter Blueprint" and was initially developed by designers and developers at Twitter. The project took off after Twitter hosted their own hackathon and announced it as an open-sourced framework, with other developers contributing to its growth. Under the MIT license, Bootstrap continues to be open-source and free.
The best way to define the Bootstrap framework is as a component-based framework. The creation of responsive websites is quicker and simpler using component-based CSS frameworks because they are made up of predefined components, or sections, that can be used to style HTML.
<section class="container"> <div class="row"> <div class="col-12 col-md-3"> <div class="card mt-3 mb-3"> <img class="card-img-top" src="https://via.placeholder.com/300x200.png" /> <div class="card-body"> <p class="card-text">This is a card made with Bootstrap</p> </div> </div> </div> </div> </section>
This is a card made with Bootstrap
The overall design of the webpage is structured with the aid of layout classes. Bootstrap is based on a twelve-column framework that creates layouts using the flexbox grid. As you may have observed in the sample above, some of Bootstrap's layout classes include
col-*classes, you can control how columns expand or contract.
Col-12in the aforementioned example refers to filling the container's whole width or all twelve column slots with content. The material should only occupy three column spaces on medium-sized screens and bigger. The class
col-md-3allows us to execute this task quickly.
Predefined Bootstrap classes known as component classes are used to style HTML components. As a component-based framework, Bootstrap comes with a ton of preset components that you may utilize, like the
card component shown in the example above. It substantially speeds up the process of UI or user interface styling. You might use the following elements quite frequently:
Small and simple classes called utility classes are used to quickly style HTML. There are plenty of them in Bootstrap, so you may skip writing your own. In the last example, we added margins to the card using the utility classes
mb-3. Several practical Bootstrap utility classes include
xsor smaller, a component can be hidden by using
d-none, and it can be displayed by using
$spacer= 1rem using
text-centerto swiftly center text,
fs-1to raise font size to an H1 tag, or even fw-bold to boost text weight.
According to the GitHub release history of Tailwind CSS, the first alpha version was released on November 1st, 2017. The first stable release, Tailwind CSS v1.0, was made on May 13, 2019, with 43 more releases and more than 2,200 commits from 88 contributors. Similar to Bootstrap, Tailwind is an MIT-licensed free and open-source project.
The easiest way to describe Tailwind CSS is as a "utility-first" framework. Small, straightforward classes that can be applied to elements to build a user interface, or UI, make up utility-first frameworks. On the surface, writing inline styles and using Tailwind don't seem all that dissimilar. This framework does, however, allow for customization. You can essentially construct your own UI with Tailwind to match your needs rather than being constrained by the preset components from Bootstrap.
<section class="flex flex-col"> <div class="flex flex-col md:flex-row md:space-x-3 items-center space-y-3 md:space-y-0"> <div class="border border-gray-200 rounded"> <img src="https://via.placeholder.com/300x200.png" /> <p class="p-5">This is a card made with Tailwind</p> </div> </div> </section>
This is a card made with Tailwind
Only utility classes are available in the core Tailwind CSS framework. When styling an HTML component, we must only use the utility classes and apply them to the various HTML elements. It looks a lot like inline styling at first glance.
flex-colutility classes can be used to create a flexbox container with a
flex-directiongoing in the column direction.
md:flex-rowcan be used to change the
flex-directionfrom column to row when the screen size is medium (768px) or larger.
md:space-y-0can be used to increase or decrease the space between child elements.
roundedcan be used together to add a rounded gray border around the element.
Component classes are not included in the base Tailwind CSS framework. However, you can pay to purchase authorized UI components straight from Tailwind or locate cost-free community- or open-source-made components. By extracting recurring utility patterns into individual CSS classes with Tailwind's @apply directive, you can also make your own component classes.
The two frameworks are very different from one another, as you can see from the samples above. You just need to add your content and personalization to Bootstrap because it already has UI components built in. The utility and layout classes in Bootstrap provide you all the tools you need to design a responsive website. However, with Tailwind, you end up needing to develop your own components utilizing the framework's utility classes, which means that you are much more active in styling the homepage.
Don't be deceived by Tailwind's lack of components. Tailwind is still a component-driven framework even though it prioritizes utilities. You can create a component by separating the utilities into components or template partials, using the @apply directive, etc. Both frameworks are designed to be responsive and to speed up development compared to doing it without a framework.