Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/karolis-sh/tailwind-bootstrap-grid
Tailwind CSS plugin that generates Bootstrap's flexbox grid
https://github.com/karolis-sh/tailwind-bootstrap-grid
bootstrap4 css flexbox flexbox-grid postcss tailwindcss tailwindcss-plugin
Last synced: 5 days ago
JSON representation
Tailwind CSS plugin that generates Bootstrap's flexbox grid
- Host: GitHub
- URL: https://github.com/karolis-sh/tailwind-bootstrap-grid
- Owner: karolis-sh
- License: mit
- Created: 2019-01-25T15:14:07.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-10-19T12:20:07.000Z (3 months ago)
- Last Synced: 2025-01-12T17:42:25.648Z (11 days ago)
- Topics: bootstrap4, css, flexbox, flexbox-grid, postcss, tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage: https://tailwind-bootstrap-grid.netlify.app
- Size: 3.27 MB
- Stars: 181
- Watchers: 2
- Forks: 20
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-tailwindcss - Bootstrap Grid - Generates Bootstrap's style flexbox grid system. (Plugins)
README
# tailwind-bootstrap-grid
[![npm version][version-badge]][version]
[![License: MIT][license-badge]][license]
Bootstrap **v5** flexbox grid system as a Tailwind CSS plugin.
Check the [demo](https://tailwind-bootstrap-grid.netlify.app/).
## Installation
```shell
npm i -D tailwind-bootstrap-grid
```
In `tailwind.js` file:
```js
module.exports = {
plugins: [
require('tailwind-bootstrap-grid')({
containerMaxWidths: {
sm: '540px',
md: '720px',
lg: '960px',
xl: '1140px',
},
}),
],
};
```
And don't forget to include `components` and `utilities` in your tailwind base
css file:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
This will generate Bootstrap v5 flexbox grid.
\* **NOTE**: When using the `.container` class from this plugin you will need to
[disable](https://tailwindcss.com/docs/container#disabling-entirely) the core
[container plugin](https://tailwindcss.com/docs/container/) as both plugins
expose a `.container` class.
## Features & Tailwind CSS options support
- ✅ custom screens
- ✅ custom separator
- ✅ custom prefix
- ✅ important
- ✅ rtl support
## Options
- Original Bootstrap grid's options:
- `gridColumns` (default - `12`) - grid size
- `gridGutterWidth` (default - `"1.5rem"`) - container and rows gutter width
- `gridGutters` (default - `{ 0: 0 }`) - gutter variable class steps
(`--bs-gutter-x`, `--bs-gutter-y`)
- `containerMaxWidths` (default - `{}`) - the `max-width` container value for
each breakpoint
- Extra options:
- `generateContainer` (default - `true`) - whether to generate `.container` and
`.container-fluid` classes
- `rtl` (default - `false`) - rtl support (`.offset-x` classes will start
responding to `[dir=ltr]` / `[dir=rtl]`)
- `respectImportant` (default - `true`) - whether it should respect the `important`
root config option
## FAQ
1. _**Why my `.container` doesn't have padding?**_ This plugin will not work properly
with [core container plugin](https://tailwindcss.com/docs/container/) as both
plugins expose a `.container` class.
1. _**How to use rtl css?**_ Set the `ltr` or `rtl` [dir](https://www.w3schools.com/tags/att_global_dir.asp)
attribute on your container (usually the root `html`).
1. _**Is there a Bootstrap v4 grid implementation?**_ Yes, use `tailwind-bootstrap-grid@3`.
## Related
[postcss-bootstrap-4-grid](https://github.com/johnwatkins0/postcss-bootstrap-4-grid)
[version-badge]: https://badge.fury.io/js/tailwind-bootstrap-grid.svg
[version]: https://www.npmjs.com/package/tailwind-bootstrap-grid
[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg
[license]: https://opensource.org/licenses/MIT