Tailwind CSS plugin to generate Bootstrap flexbox grid system.
npm install tailwind-bootstrap-grid
!license
Bootstrap v5 flexbox grid system as a Tailwind CSS plugin.
Check the demo playground.
``shell`
npm i -D tailwind-bootstrap-grid
In your index.css file:
`css
@import 'tailwindcss';
@plugin 'tailwind-bootstrap-grid' {
container_max_widths:
'sm', '540px', 'md', '720px', 'lg', '960px', 'xl', '1140px', '2xl', '1320px';
}
`
Or via tailwind.config.js file:
`js`
module.exports = {
plugins: [
require('tailwind-bootstrap-grid')({
container_max_widths: [
'sm',
'540px',
'md',
'720px',
'lg',
'960px',
'xl',
'1140px',
'2xl',
'1320px',
],
}),
],
};
This will generate the Bootstrap v5 flexbox grid.
- Original Bootstrap grid's options:
- grid_columns (default - 12) - grid sizegrid_gutter_width
- (default - "1.5rem") - container and rows gutter widthgrid_gutters
- (default - [0, 0]) - gutter variable class steps--bs-gutter-x
(, --bs-gutter-y)container_max_widths
- (default - []) - the max-width container value for
each breakpoint
- Extra options:
- generate_container (default - true) - whether to generate .container and.container-fluid
classesrtl
- (default - false) - rtl support (.offset-x classes will start[dir=ltr]
responding to dir
/ [dir=rtl])debug
- (default - false`) - enable debug mode
| TailwindCSS | Bootstrap | tailwind-bootstrap-grid |
| ----------- | --------- | ----------------------- |
| 3 | 4 | 3 |
| 3 | 5 | 5 |
| 4 | 5 | 6+ |