https://github.com/devendrakanojiya/bootstrapandtailwindclassescomparision

This document provides a comprehensive comparison of utility classes between Tailwind CSS and Bootstrap.
https://github.com/devendrakanojiya/bootstrapandtailwindclassescomparision

bootstrap classes comparison css framework tailwindcss utility utility-library

Last synced: 25 days ago
JSON representation

This document provides a comprehensive comparison of utility classes between Tailwind CSS and Bootstrap.

• Host: GitHub
• URL: https://github.com/devendrakanojiya/bootstrapandtailwindclassescomparision
• Owner: devendrakanojiya
• Created: 2024-09-12T10:20:35.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-12T10:51:02.000Z (about 2 months ago)
• Last Synced: 2024-10-13T03:03:19.635Z (25 days ago)
• Topics: bootstrap, classes, comparison, css, framework, tailwindcss, utility, utility-library
• Language: HTML
• Homepage: https://devendrakanojiya.github.io/BootstrapAndTailwindClassesComparision/
• Size: 9.77 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Comparing Tailwind CSS and Bootstrap Utility Classes

This document provides a comprehensive comparison of utility classes between Tailwind CSS and Bootstrap.

## Distinguish Between Bootstrap and Tailwind Classes

| #   | Feature | Tailwind CSS | Bootstrap |

| --- | --- | --- | --- |

| 1   | Text Color | text-red-500 | text-danger |

| 2   | Background Color | bg-blue-500 | bg-primary |

| 3   | Margin | m-4 | m-4 |

| 4   | Padding | p-4 | p-4 |

| 5   | Font Size | text-xl | fs-4 |

| 6   | Font Weight | font-bold | fw-bold |

| 7   | Border Radius | rounded-lg | rounded |

| 8   | Display | block | d-block |

| 9   | Flexbox Container | flex | d-flex |

| 10  | Grid Container | grid | d-grid |

| 11  | Text Alignment | text-center | text-center |

| 12  | Width | w-1/2 | w-50 |

| 13  | Height | h-16 | h-100 |

| 14  | Shadow | shadow-lg | shadow-lg |

| 15  | Opacity | opacity-50 | opacity-50 |

| 16  | Position | absolute | position-absolute |

| 17  | Top/Bottom/Left/Right | top-0 | top-0 |

| 18  | Z-Index | z-10 | z-index-10 |

| 19  | Overflow | overflow-hidden | overflow-hidden |

| 20  | Cursor | cursor-pointer | cursor-pointer |

| 21  | Transition | transition-all | transition |

| 22  | Animation | animate-bounce | animate-bounce |

| 23  | Grid Column Span | col-span-2 | col-2 |

| 24  | Flex Direction | flex-row | flex-row |

| 25  | Justify Content | justify-center | justify-content-center |

| 26  | Align Items | items-center | align-items-center |

| 27  | Gap | gap-4 | gap-4 |

| 28  | Order | order-1 | order-1 |

| 29  | Visibility | visible | visible |

| 30  | Pointer Events | pointer-events-none | pointer-events-none |

| 31  | Background Gradient | bg-gradient-to-r | bg-gradient |

| 32  | Border Color | border-red-500 | border-danger |

| 33  | Border Width | border-2 | border-2 |

| 34  | Border Style | border-dashed | border-dashed |

| 35  | Border Opacity | border-opacity-50 | border-opacity-50 |

| 36  | Box Shadow | shadow-md | shadow-md |

| 37  | Font Family | font-sans | font-sans-serif |

| 38  | Font Style | italic | fst-italic |

| 39  | Letter Spacing | tracking-wide | letter-spacing-wide |

| 40  | Line Height | leading-loose | lh-loose |

| 41  | Max Width | max-w-full | mw-100 |

| 42  | Text Transform | uppercase | text-uppercase |

| 43  | Text Decoration | underline | text-decoration-underline |

| 44  | Text Overflow | truncate | text-truncate |

| 45  | Table Layout | table-fixed | table-fixed |

| 46  | List Style | list-disc | list-unstyled |

| 47  | Align Self | self-start | align-self-start |

| 48  | Flex Wrap | flex-wrap | flex-wrap |

| 49  | Grid Template Columns | grid-cols-3 | row-cols-3 |

| 50  | Content Alignment | items-baseline | align-items-baseline |