Michael Janea

 

 

BOOTSTRAP GRID

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

  • 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

 

Demo

 

Dependencies

It requires the following plugins to work: Panel Button and Float Panel.

 

How to Install

  1. Extract the downloaded file (bootstrapGrid.zip)
  2. Copy the "bootstrapGrid" folder to "ckeditor/plugins/" folder
  3. Open the file "ckeditor/config.js"
  4. Add these lines:
    config.extraPlugins = 'panelbutton,floatpanel,bootstrapGrid';
    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.6/css/bootstrap.min.css';
    config.allowedContent = true;
    config.bootstrapGrid_container_large_desktop = 1170;
    config.bootstrapGrid_container_desktop = 970;
    config.bootstrapGrid_container_tablet = 750;
    config.bootstrapGrid_grid_columns = 12;
  5. Use the toolbargroupname: "BootstrapGrid" in your toolbar (see the example below)
    config.toolbar = [
        { name: 'insert', items: [ 'BootstrapGrid', 'BootstrapGridAdd', 'BootstrapGridDelete', 'BootstrapGridSettings', '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
  1. Extract the downloaded file (bootstrapGrid.zip)
  2. Copy the "bootstrapGrid" folder to "sites/all/modules/ckeditor/plugins/" folder
  3. Open the file "sites/all/modules/ckeditor/ckeditor.config.js"
  4. Add this line:
    config.allowedContent = true;
    config.mj_variables_bootstrap_css_path = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css';
    config.bootstrapGrid_container_large_desktop = 1170;
    config.bootstrapGrid_container_desktop = 970;
    config.bootstrapGrid_container_tablet = 750;
    config.bootstrapGrid_grid_columns = 12;
  5. Open the file "sites/all/modules/ckeditor/css/ckeditor.css"
  6. Add this line at the top:
    @import  url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
  7. Make sure to clear your browser's cache
  8. Go to your Drupal's admin side -> Configuration -> Content Authoring -> CKEditor -> Profile -> Choose any profile you want and click "Edit" link -> Editor Appearance -> Available buttons -> Drag & drop bootstrapGrid, bootstrapGridAdd, bootstrapGridDelete, bootstrapGridSettings icon to "Current Toolbar" -> click "Save"
  9. Add Bootstrap CSS and JS to the page where your CKEditor is at
  10. Done
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.bootstrapGrid_container_large_desktop

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

config.bootstrapGrid_container_desktop

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

config.bootstrapGrid_container_tablet

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

config.bootstrapGrid_grid_columns

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

 

Logs

  • 1.2
    • ADDED: e.target and e.relatedTarget as an alternative for e.toElement for FireFox and IE
  • 1.1
    • ADDED: config for container sizes
    • ADDED: config for grid columns
    • ADDED: CKEditor toolbar buttons for add, delete, and manage grid
    • REMOVED: buttons for bootstrap grids inside CKEditor
    • CHANGED: overlay to iframe to avoid jquery conflicts
    • FIXED: improved draggable resizing feature
    • FIXED: width for each device
  • 1.0
    • Initial release

 

Package Details

INDIVIDUAL 

$10.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 Grid

BOOTSTRAP BUNDLE

$41.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 Breadcrumbs
    2. Bootstrap Buttons
    3. Bootstrap Carousel
    4. Bootstrap Collapse
    5. Bootstrap List Group
    6. Bootstrap Panel
    7. Bootstrap Tab
    8. Bootstrap Alert
    9. Bootstrap Grid
    10. Bootstrap Dropdown Buttons

ULTIMATE BUNDLE

$99.00 (?)

$437.00

  • Free updates for 1 year (?)
  • Full functionality
  • Install on any number of web sites
  • Sell with your product
  • Free support
  • One time payment only
  • Plugins included:
    1. MJ Bundle
      • MJ Accordion
      • MJ Breadcrumbs
      • MJ Buttons
      • MJ Carousel
      • MJ Tab
      • MJ Ribbons
      • MJ Word Art
      • MJ Accordion Banner
    2. Bootstrap Bundle
      • Bootstrap Breadcrumbs
      • Bootstrap Buttons
      • Bootstrap Carousel
      • Bootstrap Collapse
      • Bootstrap List Group
      • Bootstrap Panel
      • Bootstrap Tab
      • Bootstrap Alert
      • Bootstrap Grid
      • Bootstrap Dropdown Buttons
    3. Foundation Bundle
      • Foundation Accordion
      • Foundation Alert
      • Foundation Breadcrumbs
      • Foundation Buttons
      • Foundation Panel
      • Foundation Tab
    4. Social Media Bundle
      • Facebook Like
      • Facebook Share
      • Twitter Share
      • Google +1
      • Google+ Share
    5. jQuery UI Bundle
      • jQuery UI Accordion
      • jQuery UI Tabs
    6. Semantic UI Bundle
      • Semantic UI Accordion
      • Semantic UI Tab
      • Semantic UI Icons
    7. Text Shadow
    8. Box Shadow
    9. FontAwesome Premium
    10. Nivo Slider
    11. BlueImp Gallery
    12. YouTube Search

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.