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.

About Bootstrap CSS Framework

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.

Example:

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

result:   

    

                 

          

This is a card made with Bootstrap

        

      

    

  

Layouts

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 container, row, and col-*.

• Containers are what the Bootstrap CSS framework is built upon. Content is contained, padded, and aligned.
• Rows are referred to as gutters. Gutters are used to align and space out information and add padding between columns.
• Columns create the grid system for Bootstrap. Using the col-* classes, you can control how columns expand or contract.Col-12 in 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-3 allows us to execute this task quickly.

Components

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:

• Accordions vertically close and open the accordion content.
• Carousels cycle through elements such as images or text like a slideshow.
• Dropdowns are toggleable overlays for displaying content such as lists of links.
• Buttons component classes style buttons for actions in forms, dialogs, etc.
• Cards are flexible content containers.

Utilities

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 mt-3 and mb-3. Several practical Bootstrap utility classes include

• Display Utility classes can switch the appearance of components and more in a quick and responsive manner. When the screen is xs or smaller, a component can be hidden by using d-none, and it can be displayed by using d-md. d-md-block.
• Spacing HTML components may easily add padding or margin with utility classes. Similar to the last example, we added a top margin of $spacer. where $spacer = 1rem using mt-3.
• Text Text alignment, wrapping, weight, and other features can be easily controlled via utility classes. Use text-center to swiftly center text, fs-1 to raise font size to an H1 tag, or even fw-bold to boost text weight.

About Tailwind CSS Framework

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.

Example:

<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

    

  

Utilities

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 and flex-col utility classes can be used to create a flexbox container with a flex-direction going in the column direction.
• The utility class md:flex-row can be used to change the flex-direction from column to row when the screen size is medium (768px) or larger.
• The utility classes md:space-x-3 and md:space-y-0 can be used to increase or decrease the space between child elements.
• The utility classes border, border-gray-200, and rounded can be used together to add a rounded gray border around the element.

Components

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.

Comparing Bootstrap and Tailwind CSS

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.