Michael Janea

 

 

BOOTSTRAP BUILDER

Create your front-end with Bootstrap using Drag & Drop Interface Builder.

  • Manage your grid's layout for Large Desktop, Desktop, Tablet, and Moble
  • Offset Feature
  • Resizable Feature (mouse interaction)
  • Compatible with Bootstrap 3.* (Bootstrap 4 soon)
  • Available in 66 languages
  • 19 CKEditor plugins in one
  • No dependencies (CKEditor plugins)
  • Drag & Drop
  • Bootstrap Features
    • CSS
      • Grid System
      • Tables
      • Buttons
    • Components
      • Button Groups
      • Button Dropdowns
      • Navs
      • Navbar
      • Breadcrumbs
      • Jumbotron
      • Page Header
      • Alerts
      • List Group
      • Panels
      • Well
    • JavaScript
      • Tab
      • Checkbox
      • Radio Buttons
      • Collapse
      • Carousel

 

Demo

 

Dependencies

No dependencies

 

How to Install

  1. Extract the downloaded file (bootstrapBuilder.zip)
  2. Copy the "bootstrapBuilder" folder to "ckeditor/plugins/" folder
  3. Open the file "ckeditor/config.js"
  4. Add these lines:
    config.extraPlugins = 'bootstrapBuilder';
    config.contentsCss = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css';
    config.mj_variables_bootstrap_css_path = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
    config.mj_variables_bootstrap_js_path = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js';
    config.allowedContent = true;
    config.bootstrapBuilder_container_large_desktop = 1170;
    config.bootstrapBuilder_container_desktop = 970;
    config.bootstrapBuilder_container_tablet = 750;
    config.bootstrapBuilder_grid_columns = 12;
    config.bootstrapBuilder_ckfinder_version = 3;
    config.bootstrapBuilder_ckfinder_path = '/ckeditor/ckfinder3/ckfinder.js';
  5. Use the toolbargroupname: "BootstrapBuilder" in your toolbar (see the example below)
    config.toolbar = [
        { name: 'insert', items: [ 'BootstrapBuilder', 'Source' ] }
    ];
  6. Add Bootstrap CSS and JS to the page where your CKEditor is at
  7. Make sure to clear your browser's cache
  8. Done
Not yet supported
Not yet supported
Not yet supported

 

More Set-up Information

Option Description
config.mj_variables_bootstrap_css_path

path to your own bootstrap.css

config.bootstrapBuilder_container_large_desktop

Define the maximum width of .container for different screen sizes (see Bootstrap Container Sizes)

config.bootstrapBuilder_container_desktop

Define the maximum width of .container for different screen sizes (see Bootstrap Container Sizes)

config.bootstrapBuilder_container_tablet

Define the maximum width of .container for different screen sizes (see Bootstrap Container Sizes)

config.bootstrapBuilder_grid_columns

Number of columns in the grid (see Bootstrap Grid System)

config.bootstrapBuilder_ckfinder_version

Version of your CKFinder

config.bootstrapBuilder_ckfinder_path

path to your own ckfinder.js

 

Logs

  • 1.0
    • Initial release

 

Package Details

INDIVIDUAL 

$50.00

$65.00

  • Free updates for 6 months
  • Full functionality
  • Install on any number of web sites
  • Sell with your product
  • Free support
  • One time payment only
  • Plugins included:
    1. Bootstrap Builder

INDIVIDUAL
+ UPDATES

$80.00

$130.00

  • Free updates for 6 months
  • Full functionality
  • Install on any number of web sites
  • Sell with your product
  • Free support
  • One time payment only
  • Plugins included:
    1. Bootstrap Builder

CONTACT ME

Your opinion is important to me. Take part on my goal to continuously improve my work by giving your suggestions and comments. You may also send your concerns or inquiries here.