Tailwind CSS vs Bootstrap

02 Nov, 2021
Tailwind CSS was initially developed by Adam Wathan, and the first version was released back on the 1st of November, 2017. Tailwind CSS is a utility-first CSS framework for building custom user interfaces rapidly and efficiently. It is an inline styling used to achieve a sleek interface without writing code for your own CSS. Tailwind CSS offers customizability and flexibility to transform the appearance and feel of the elements. Tailwind CSS is not the first utility-first CSS library, but it is one of the most popular and light ones. It is a highly customizable, low-level CSS framework, and it provides all the building blocks the developer needs to build a fantastic interface for any website.
CDN link:
<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=”stylesheet”>
Sample page made using Tailwind CSS:
HTML
<!DOCTYPE html><html>  <head>    <!-- Tailwind CSS -->    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"        rel="stylesheet">    <title>Tailwind CSS</title></head>  <body style="background-color: gray;">      <!--Card 1-->    <div class=" w-full lg:max-w-full lg:flex">        <div class="border-r border-b border-l             border-gray-400 lg:border-l-0             lg:border-t lg:border-gray-400 bg-white            \rounded-b lg:rounded-b-none lg:rounded-r            p-4 leading-normal">            <p class="text-gray-700 text-base">                This Card is made using Tailwind CSS.            </p>        </div>    </div></body>  </html>
Output:
Card made using Tailwind CSS
Bootstrap was developed by Mark Otto and Jacob Thorton during an internal competition at Twitter in August 2011. It is an open-source framework that is used to design responsive websites better, faster, and easier. It is a beginner-friendly and the most popular open-source framework that includes HTML, CSS, and JavaScript. Bootstrap can be used to create web applications with any server-side Technology like Java, PHP, etc., and its responsive design allows platforms like Mobile phones, tablets, and computers. Bootstrap contains CSS and JavaScript-based design templates for typography, forms, buttons, navigation, icons, and other interface components. It is based on object-oriented CSS. Bootstrap helps to design and develop website templates quickly.
CDN link:
<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”>
Sample page made using BOOTSTRAP:
HTML
<!DOCTYPE html><html>  <head>    <!-- BOOTSTRAP -->    <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">    <title>BOOTSTRAP</title></head>  <body style="background-color: gray;">    <div class="card">        <div class="card-body">            This Card is made using BOOTSTRAP.        </div>    </div></body>  </html>
Output:
Card made using BOOTSTRAP
Different versions of Bootstrap:  
Version 2.0 supports responsive web design.
Version 3.0 supports mobile-first design.
Version 4.0 introduces SASS and Flexbox support.
Tailwind CSS vs Bootstrap:
Bootstrap-Questions
CSS-Questions
Picked
Tailwind CSS
Bootstrap
CSS
Difference Between
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to set Bootstrap Timepicker using datetimepicker library ?
Difference between Bootstrap 4 and Bootstrap 5
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form