Bootstrap Tools
for CKEditor & TinyMCE
17 in 1
Includes products:
Bootstrap Tools logo
Get Bootstrap Tools inside
32 in 1
Bootstrap Bundle
Bootstrap Tools logo
Get Bootstrap Tools inside
33 in 1
Bootstrap Full Bundle

Bootstrap Image Gallery

Bootstrap Image Gallery logo

The plugin will upload selected images to the server and show them as a gallery with using Bootstrap responsive columns.

ckeditor iconCKEditor add-on
tinymce iconTinyMCE add-on

The template of your gallery can be customized via setting its HTML code. This feature allows you to set any style of insered galleries.

Supports PHP and .NET web sites.

Plugin name: jsplus_bootstrap_gallery
Button name: jsplus_bootstrap_gallery


jsplus_bootstrap_gallery_uploader_url: URL
Default value: auto detection
Set this URL to specify location of images uploader manually. This option affects to all JS+ uploader add-ons.
jsplus_bootstrap_gallery_template: HTML (String)
Template for every image inserted with using of this plugin. Read more in styling notice below.
jsplus_bootstrap_gallery_template_wrap: HTML (String)
Template wrapping all images in a gallery. Read more in styling notice.
jsplus_bootstrap_gallery_col_count_show: Boolean
Default value: true
Available values: true, false
If set to false panel with column count option will be hidden.
jsplus_bootstrap_gallery_default_col_count: Integer
Default value: 3
Available values: 1, 2, 3, 4, 6, 12
The default number of columns in the gallery. Due to Bootstrap has 12 columns scaffold structure the option is limited with 6 availible values.
jsplus_bootstrap_gallery_img_resize_show: Boolean
Default value: true
Available values: true, false
Defines visibility of image resize panel in the plugin's dialog. All image options described below applies regardless of value of this option (it affects for visibility only).
jsplus_bootstrap_gallery_default_img_resize: Boolean
Default value: true
Available values: true, false
Default state of "Resize image" checkbox in the dialog.
jsplus_bootstrap_gallery_default_img_resize_width: Integer
Default value: 800
Defalt value of "Resize width" text field.
jsplus_bootstrap_gallery_default_img_resize_height: Integer
Default value: 600
Defalt value of "Resize height" text field.
jsplus_bootstrap_gallery_default_img_enlarge: Boolean
Default value: false
Available values: true, false
If this option is set to true, the plugin applies image resize even target resolution is more than source.
jsplus_bootstrap_gallery_thumb_resize_show: Boolean
Default value: true
Available values: true, false
Defines visibility of thumbails resize panel. If the panel is hidden thumbnail will be resized with default width/height values (see styling notice below).
jsplus_bootstrap_gallery_default_thumb_width: Integer
Default value: 300
Target width for thumnail in pixels.
jsplus_bootstrap_gallery_default_thumb_height: Integer
Default value: 200
Target heigth for thumnail in pixels.
jsplus_bootstrap_gallery_default_thumb_enlarge: Boolean
Default value: true
Available values: true, false
By default even when source image has lower resolution than target resolution of thumbnail, the resize (upper) will be applied. Set this option to false to override this behavior.
jsplus_bootstrap_gallery_allowed_ext: String
Default value: "jpg,jpeg,gif,png,bmp,tif,tiff"
Available values: Comma separated extensions list
Allowed image extentions which are allowed to upload. This option must be in syncronius state with server configuration (make changes also to config.php for PHP version or into IIS configuration for .NET). Some browsers can ignore this paramter.


The styling of this plugin is fully equal to JS+ CKEditor & TinyMCE Image Gallery plugin (without Bootstrap support). You can use its styling manual as example of this plugin galleries styling.

In addition to substituted parameters in Image Gallery plugin, this plugin has also this parameter:

{COL_WIDTH} - will be substituted with column's width (equals to 12/jsplus_bootstrap_gallery_default_col_count)


CKEditor Bootstrap Gallery plugin uploading screenshotTinyMCE Bootstrap Gallery plugin uploading screenshot
The result of CKEditor Bootstrap Gallery dialog  screenshotTinyMCE Bootstrap Gallery dialog screenshot