bootstrap5-p1
v1.0.22
Published
A custom GrapesJS plugin for Bootstrap 5.1.3.
Downloads
96
Readme
bootstrap5-p1
Bootstrap5-p1 is a GrapesJS plugin that provides a set of custom blocks based on Bootstrap 5.1.3. The plugin includes a variety of blocks for creating responsive layouts, including rows, columns, and more.
Installation
Install the package via npm:
npm install bootstrap5-p1
Usage
To use the Bootstrap5-p1 plugin in your GrapesJS project, you can import it as a module and pass it to the plugins option when initializing the editor. Here's an example:
import grapesjs from "grapesjs";
import bootstrap5P1 from "bootstrap5-p1";
const editor = grapesjs.init({
// ...your GrapesJS configuration
plugins: [bootstrap5P1],
pluginsOpts: {
[bootstrap5P1]: {
// ...your plugin options
},
},
canvas: {
styles: [
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css", // bootstrap styles
],
},
});
In your css file, you can import the Bootstrap5-p1 CSS file to add the default styles for the blocks:
@import "bootstrap5-p1/src/blocks/css/style.css";
Once the plugin is installed and added to your GrapesJS project, you can start using the custom blocks provided by the plugin.
Components
| Block | Description | | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | Section | A container that can have the bootstrap class container or container fluid | | column1 | A bootstrap row with one column | | column2 | A bootstrap row with two columns | | column3 | A bootstrap row with three columns | | column4 | A bootstrap row with four columns | | column5 | A bootstrap row with five columns | | column6 | A bootstrap row with six columns | | column2-10 | A bootstrap row with two columns, the first column is 2/12 and the second column is 10/12 from the bootstrap grid system | | column3-9 | A bootstrap row with two columns, the first column is 3/12 and the second column is 9/12 from the bootstrap grid system | | column4-8 | A bootstrap row with two columns, the first column is 4/12 and the second column is 8/12 from the bootstrap grid system | | column5-7 | A bootstrap row with two columns, the first column is 5/12 and the second column is 7/12 from the bootstrap grid system | | column7-5 | A bootstrap row with two columns, the first column is 7/12 and the second column is 5/12 from the bootstrap grid system | | column8-4 | A bootstrap row with two columns, the first column is 8/12 and the second column is 4/12 from the bootstrap grid system | | column9-3 | A bootstrap row with two columns, the first column is 9/12 and the second column is 3/12 from the bootstrap grid system | | column10-2 | A bootstrap row with two columns, the first column is 10/12 and the second column is 2/12 from the bootstrap grid system | | column2-8-2 | A bootstrap row with three columns, the first column is 2/12, the second column is 8/12, and the third column is 2/12 from the bootstrap grid system | | column8-2-2 | A bootstrap row with three columns, the first column is 8/12, the second column is 2/12, and the third column is 2/12 from the bootstrap grid system | | column2-2-8 | A bootstrap row with three columns, the first column is 2/12, the second column is 2/12, and the third column is 8/12 from the bootstrap grid system | | column3-6-3 | A bootstrap row with three columns, the first column is 3/12, the second column is 6/12, and the third column is 3/12 from the bootstrap grid system | | column6-3-3 | A bootstrap row with three columns, the first column is 6/12, the second column is 3/12, and the third column is 3/12 from the bootstrap grid system | | column3-3-6 | A bootstrap row with three columns, the first column is 3/12, the second column is 3/12, and the third column is 6/12 from the bootstrap grid system |
Customization
You can customize the appearance of the Bootstrap5-p1 blocks by modifying the CSS and SCSS files included with the plugin. The SCSS files can be found in the src/scss directory, and the compiled CSS files can be found in the dist/css directory. You can modify these files to change the colors, fonts, and other visual properties of the blocks.
License
Bootstrap5-p1 is licensed under the ISC license. See the LICENSE file for more information.