Almost 18... (teaser)

Post by **Pablo** » Thu Oct 27, 2022 9:33 am

It’s time for another major upgrade of WYSIWYG Web Builder with lots of great new features and tools to create amazing websites.
WYSIWYG Web Builder 18 will have more than 150 new features/improvements!

This post will give you a sneak peak at some of these new features.
This topic will be updated daily to reveal new features, so make sure you don't miss anything...

Note:
WYSIWYG Web Builder 18 is planned for later this year.
The exact release date is unknown at this time. But we tell you more as soon as we know it!

*** Special Offer ***
If you buy version 17 today you will get version the next version for free when it becomes available!
This offer is also valid for all licenses purchased within 60 days before the official release date (as usual).
https://www.wysiwygwebbuilder.com/purchase.html

Other registered users of WYSIWYG Web Builder will get a 50% discount when upgrading to the new version in the first few weeks after the release.

Stay tuned for more information!

Post by **Pablo** » Fri Oct 28, 2022 9:57 am

Styles Everywhere

Most built-in objects now have support for styles. This means that the colors and fonts of these objects can be controlled from one place (in the Style Manager).
Styles can be useful to quickly update the style of the entire website during design time, but it's also possible to make a style switcher for when the page it online.
Previously styles were only available for basic HTML elements like form elements (editbox, select, button etc.) layers, text.
But in WWB18, also advanced elements like menus, login forms, jQuery UI / Bootstrap widgets, shapes and images have style support!

It's also possible to use styles for the page background!

Examples:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_style_switcher.html
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_generic.html
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_widgets.html
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_layout.html
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_forms.html
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_drawing_tools.html

Post by **Pablo** » Fri Oct 28, 2022 10:00 am

Dark Color Scheme

One of the reasons why WWB18 has extended support for styles is to make it possible to introduce another cool new feature: CSS color schemes (dark / light).
Now you can create a different color scheme for web site visitors who prefer dark mode.
In the Style Manager, each color also has an (optional) dark color property, so you can set a different color for the background, text, border when the browser runs in dark mode.

There is a dedicated “Dark Color Scheme” button to switch between light and dark color scheme in the user interface.

Besides dark mode styles, WWB18 also has the possibility to invert the colors of an object for the dark color scheme. In that case, you do not have to use styles, but all colors will be inverted (negative).
This property can be set for each object individually, because for some objects (like images) using inverted colors may not look good.

The option 'invert all objects' inverts all objects in the page (excluding images). Objects which are part of a layer/layout grid will not be inverted because the layer itself is already inverted.
The option 'invert child elements' inverts all objects on the selected layer.

WWB18, supports 2 ways to activate the Dark Color Scheme:
• prefers-color-scheme, in this case the user preferences (in the browser) determine when the color scheme will be used.
• manual, in this case you can toggle the dark/light color scheme via events.

Demos:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_darkmode_invert.html
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_darkmode_styles.html

Post by **Pablo** » Fri Oct 28, 2022 10:12 am

Custom Scrollbars

Added the ability to customize the scrollbars of web pages. Now you can style scrollbars to match the rest of your design!
There are properties to set the colors, width, border and radius.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_custom_scrollbars.html

Note that this is an experimental feature because Custom Scrollbars are not fully supported by all browsers yet.
It works in Edge, Chrome, Safari and partially in FireFox. See also: https://caniuse.com/css-scrollbar

Post by **Pablo** » Fri Oct 28, 2022 5:12 pm

Responsive Text
Added "Responsive Text" object. This is a simplified text object. It only supports one type of font, color etc. per object.
This makes the object easier manageable in complex layout (for example when using style or dark mode). Unlike the standard text object, styles/classes apply to the entire object, not just the selected text.
Also, the object produces cleaner HTML output, because it does not use any inline styles.

Main differences between standard text and responsive text:

Text
• multiple styles, colors, font-family, font-size.
• optionally responsive (different font sizes in breakpoints)
• more output options (like output as image, font-size fine tuning)
• supports images and emojis.
• uses inline styles for formatting individual characters.

Responsive Text
• one style, color, font-family, font-size
• responsive by design (different font sizes in breakpoints)
• easier style setup, the style applies to the entire object
• no inline styles -> optimized HTML/CSS output.

Post by **Pablo** » Fri Oct 28, 2022 5:13 pm

Heading
Added support for line-height (for multi-line headings) and letter spacing.

Post by **Pablo** » Fri Oct 28, 2022 5:21 pm

SEO Assistant

- New feature: Added "Missing keyword" (SEO targeting) functionality. This option uses the keywords from the page properties (Meta tags) and checks whether these words are actually used in the page title, description and main heading (h1).
Years ago, the keywords in meta tags were used for search engines to indicate which keywords the page is aiming to rank for (targeting). However, most search engines no longer use keywords meta tags for the search results. Instead they use page title and the content of the page (headings). So, that is why it is important that the keywords also do appear in the page content to give search engines a better understanding of what the page is about.

Example, let's say the page is targeting visitors who are searching for: scuba diving philippines
In that case, the keywords may look like this:

Then we need to make sure the words also appear in the page title and main heading (h1) of the page!

- New feature: Added check for page title length. The recommended number of characters for the page title is between 30 and 60 characters. The SEO Assistant will display a warning if the title is too short or long.

- New feature: In addition to the message in the SEO assistant, the Page Properties also shows a 'warning' icon if the title length is less than 30 or more than 60 characters.

Post by **Pablo** » Sat Oct 29, 2022 12:44 pm

Section
Many users love Cards, because they are easy to create great looking content blocks. WWB18 has a new design element called 'Section'.

A section is a responsive, self-contained layout container. Sections work the same as Cards, but the main difference is that items can be freely positioned (layered).
Self-contained means that all items in the section are embedded in the object itself, they are not separate elements (unlike layers and layout grids). This makes a section lightweight and adds lots of powerful options which normally would be very difficult to implement with individually elements.

Sections can be useful for cases where you want to overlap multiple elements (for example images) which normally would not be possible in flexible layouts. The alignment (horizontal/vertical) of an element can be left, center, right, stretched or scaled. Just like a card, Sections support dividers, synchronized transitions, animations, events and much more!

In additional to the items you know from Cards, Sections also support shapes.
Shapes are built-in SVG images that can be used to create unique backgrounds!

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wwb18_section.html

Template (preview):
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_funny_faces.html

Post by **Pablo** » Sat Oct 29, 2022 12:50 pm

Card
- Added support for 'Motion Effects' (scroll effects, entrance animations) for individual card items.

- Added support for letter spacing in the Text item.

- Added the ability to set icon position and icon offset of the Button item.

- Added the ability to use scroll transitions on individual card items.

Demo: https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_card_motioneffects.html

- Added the ability to use 'onscrollreveal' events on individual card items.

- The 'Alignment' property of the card is now responsive, so it can have a different value in breakpoints.

- Added 'Select Stock Photo' button to Card image properties.

Post by **Pablo** » Sat Oct 29, 2022 12:53 pm

Card Container
- Added 4 new layout modes:
• coverflow
• stack
• cube
• flip.

All new modes support pagination and slideshow mode (auto start).

- Added an option to add navigation arrows to carousel, coverflow, stack, cube and flip mode.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_cardcontainer.html

Post by **Pablo** » Sat Oct 29, 2022 5:04 pm

Mouse Effects
Added 'Mouse Effects': Mouse Track and 3D tilt.

- "Mouse Track" creates a sense of depth by making objects move in relation to the visitor’s mouse movement. The speed property controls the level of the effect.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_mousetrack.html

- "3d tilt' tilts the object according to the movement of the mouse. The angle sets the maximum tilt rotation (degrees).

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_3dtilt.html

The 'Direction" property can be used to reverse the track/tilt direction.
Mouse effects can be set for all objects via the 'Motion Effects' properties. These options are also available for individual card items!

The following demo implements a (scalable) ‘cosmos’ created with the new "Section" object with absolute positioned planets.
And … just for the fun of it, we’ve also added some mouse track effects to make the cosmos interactive

The planets move separately from each other.

https://wysiwygwebbuilder.com/support/wb18tryouts/wwb18_planets.html

Post by **Pablo** » Sun Oct 30, 2022 8:16 am

Protected Content

Added the ability to show/hide elements based on the login status of users.
Instead of creating a separate protected page, now it's also possible to protect specific content on a page.
Available options are:
• show for all users (default)
• show for logged in users only
• show for logged out users only
• show for specific user groups (user roles).

For example, you can show a login button for users who are not logged in and a logout button for logged in users.

If protected content for an object is enabled, then the workspace will render a 'lock' icon in the lower right corner (with customizable color).

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_protected_content.php

Post by **Pablo** » Sun Oct 30, 2022 8:18 am

Protected Menu Items

Added the ability to show/hide menus items based on the login status (logged in, logged out, group/user role).

This feature is available for: Breadcrumb, CSS Menu, Dropdown Menu, Go Menu, Mega Menu, Menubar, Overlay Menu, Pagination, Panel Menu, Responsive Menu, Slide Menu, Tab menu and Text menu.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_protected_content.php

Post by **Pablo** » Sun Oct 30, 2022 8:21 am

Login

- Added the ability to write login results to MySQL or CSV. For each login attempt a new record wil be added with username, date/time, IP, browser, referrer and status: SUCCESS or FAILED.

- Added support for user roles to 'embedded' database type. Previously this feature was only available for MySQL.
This makes the 'embedded' database is a good alternative if you do not want to set up a database on the server but still want user role (group) support.

Tutorial:
https://wysiwygwebbuilder.com/login_embedded_db.html

Post by **Pablo** » Sun Oct 30, 2022 10:44 am

Here is a preview of another template that uses Sections.

In this example, I have used Sections in combination with Motion Effects, where the movie posters all move with a different speed when the page is scrolled (parallax effect).
Initially, I did use original Movie posters, but unfortunately this violated copyrights. So, I decided to re-create the movie posters with help of AI (Artificial Intelligence).
This has resulted in some interesting creations...

Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_movies.html

Post by **Pablo** » Sun Oct 30, 2022 3:41 pm

PayPal Shopping Cart

- Added 'Use shipping based on weight' option. This option can be used instead of PayPal's default shipping options. The shipping fee is calculated locally and displayed in the cart instantly (instead of at checkout only).

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_paypalshoppingcart.html

- Added the ability to set the minimum order quantity. A (user definable) message can be displayed if the quantity is too low.

- Added 'transition' properties. This specifies the timing and duration for the hover transition.

- Added 'alignment' property to the PayPal Shopping Cart.
This can be used to display the shopping cart at the left or right side of the browser window, instead of centered.
The ‘maximum width’ property specifies the width of the panel.

Post by **Pablo** » Sun Oct 30, 2022 3:44 pm

PayPal Buttons

- Added 'Weight' property to shipping section. This option is meant to be used in combination with the 'PayPal Shopping Cart' widget to calculate the shipping costs, it overrides the default PayPal shipping settings (based shipping, extra shipping and handling). The reason why this was added is because if you use the standard PayPal shipping then it's not possible to display the complete costs until the customer checks out. The number represents the weight of the product. Do not include weight units like lb, oz or kg.

- Added 'Move Up' and 'Move Down' buttons to "Extra Variables' properties to re-arrange the values.

Post by **Pablo** » Mon Oct 31, 2022 8:38 am

Here is a preview of a template that uses the new PayPal shipping options.

Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_liquor.html

Post by **Pablo** » Mon Oct 31, 2022 10:47 am

Shape Dividers

- Added support for image background, texture, gradients and patterns. The background style can be set via 'more styles'.

- Added 7 new divider types: water-two-layers, water-three-layers, water-four-layers, water-five-waves, water-six-waves, water-seven-waves, water-eight-waves.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_shape_dividers.html

Post by **Pablo** » Mon Oct 31, 2022 1:55 pm

Site Summary

- Added Site Summary option. The summary contains statistics about the web site project for informational purposes.

Included information:
Created, the date the project was created.
Last Modified, the date the project was last modified
Total Editing Time, the total editing time in minutes (starting in version 18).
Project Size, the size of the project file (wbs)
Pages, the number of pages in the project
Images, the number of images in the project and total file size.
Video, the number of video files in the project and total file size.
Audio, the number of audio files in the project and total file size.
Downloads, the number of downloads (linked files) in the project and total file size.
Extensions, the number of extensions used in the project.
Fonts, the number of different fonts in the project.

Post by **Pablo** » Mon Oct 31, 2022 1:57 pm

Asset Manager

- Added filter type 'Linked files', displays a list of the downloads in the project.

- Added filter type 'Extensions', displays a list of all the extensions used in the project.

- Added the ability to copy the file list to the clipboard via the 'Copy' button.

Post by **Pablo** » Mon Oct 31, 2022 6:06 pm

Icons Libraries

- Added 'User Collection' functionality. This makes it possible to add icons to a custom collection so you have all your favorites icons in one place.
You can add any icon from any icon library. The icons from the user collection will be saved in SVG format, so you can even remove the icon library from your computer if you no longer need the other icons!

Post by **Pablo** » Mon Oct 31, 2022 6:09 pm

Icon object

- Added 'transition' properties. This specifies the timing and duration for the hover transition.

Post by **Pablo** » Mon Oct 31, 2022 6:16 pm

Lottie Animations

- Added the ability to add a preview image. This will be displayed in the workspace as a place holder, instead of the standard Lottie logo.

Workspace without preview image (like in WWB17):

Workspace with preview image:

Post by **Pablo** » Mon Oct 31, 2022 6:22 pm

Here is a preview of one of the new templates for WWB18: "Branding Concepts". This one is using Lottie Animations.

Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_brandingconcepts.html

Post by **Pablo** » Tue Nov 01, 2022 7:23 am

Editbox / Text Area

- Added support for 'floating labels'. With floating labels, you can insert the label inside the input field, and make it float/animate when you click on the input field.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_floatinglabel.html

Post by **Pablo** » Tue Nov 01, 2022 7:25 am

Select

- Combobox has been renamed to 'select' which is the official name for this HTML element.

- Added support for 'floating labels'. For the select element the <label> is always shown.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_floatinglabel.html

- Added 'Access key' property. Specifies a shortcut key to activate/focus the select element.

Post by **Pablo** » Tue Nov 01, 2022 7:27 am

Radio Button

- Added 'Bootstrap' inspired radio button style, as alternative for the jQuery UI style.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_radiobutton.html

Post by **Pablo** » Tue Nov 01, 2022 7:30 am

Checkbox

- Added 'Bootstrap' inspired checkbox style, as alternative for the jQuery UI style.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_checkbox.html

Post by **Pablo** » Tue Nov 01, 2022 7:32 am

Flip Switch

- The flipswitch can now be used to toggle between light and dark color scheme by using 'darktheme_switch' for the ID property. Not only does this change the color scheme but it also stores the current state and reloads it when you revisit the page (or another page that includes the flipswitch) later!

Post by **Pablo** » Tue Nov 01, 2022 7:33 am

CAPTCHA

- Added 'Full Width' property. Specifies whether the element is full width when used in a Layout Grid.

Post by **Pablo** » Tue Nov 01, 2022 6:11 pm

Image Comparison

- Added 'compare' mode to Rollover Image.
This mode adds a comparison slider to the images for comparing before and after images. For example, it could be used to compare images before and after compression or editing or to demonstrate the effect of a product or service etc.

The Image Comparison option has its own icon in the toolbox for easy access.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_rolloverimage.html

Post by **Pablo** » Tue Nov 01, 2022 6:12 pm

Rollover Text

- Added 'show always' option (to animation list). When this option is selected, then the text will always be displayed.

- Added 'hide on hover' option (to animation list). When this option is selected, then the text will initially be displayed, but hides when the mouse hover over the image (inverse rollover).

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_rollovertext.html

Post by **Pablo** » Tue Nov 01, 2022 6:16 pm

Banner

- Added the ability to control text animation of a Banners with Events.
• "Media Play" will start the animation from the beginning.
• "Media Stop" will stop the animation. Characters will be hidden.
• "Media Pause" will stop the animation. Characters will remain visible (depending on the current state). Pressing "pause' again will continue the animation where it left off.

This feature can be useful for use in a carousel, to make sure the text animation always starts from the beginning when the slide becomes active.

Or you can control the animation via the click of a button:

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_banner.html

Post by **Pablo** » Tue Nov 01, 2022 6:19 pm

Stock Photo

- Added integration with 'Pexels'.
WWB already supported Unsplash and Pixabay, and now you can also easily use free stock photos, royalty free images & videos shared by creators on Pexels.com

Post by **Pablo** » Tue Nov 01, 2022 6:40 pm

This is a preview of a new template for WWB18: "Photography".

This is a basic template created with Layout Grids.
What makes this template special is that it uses transparent PNG images to force the aspect ratio of the grid cells.
This trick makes it relative easy to create flexible layouts with images, without the need for breakpoints.
Another fun fact is that the images were specially created for WYSIWYG Web Builder by Ukrainian photo model 'Irena'.

Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_photography.html

Post by **Pablo** » Wed Nov 02, 2022 7:29 am

Image

- Added the ability add a text-stroke (outline) to watermark text (like sub-titles in movies).

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_image_watermark.html

Post by **Pablo** » Wed Nov 02, 2022 7:31 am

Image Hotspot

- Added 'auto' placement option to Tooltip properties. When auto is specified, it will dynamically reorient the tooltip.

- Added the ability add a border (width / color) to the tooltip.

- The tooltip arrow is now relatively sized based on the tooltip font-size.

Post by **Pablo** » Wed Nov 02, 2022 7:34 am

Picture

- Added the ability to apply a shape to the picture. This works just like the shape feature of a standard image, however in this case CSS's clip-path will be used, instead of a modifying the image. Which means that the quality of the original image will not be affected. Also, it looks much better because the edges will not be blurred.

- Added the ability to apply a stencil/mask to the picture. This works just like the stencil feature of a standard image, however in this case CSS's mask-image will be used, instead of a modifying the image. Which means that the quality of the original image will not be affected.

- The 'Add/Remove frame' menu can now also be used on Pictures.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_picture.html

Post by **Pablo** » Wed Nov 02, 2022 7:52 am

Photo Gallery / Slideshow

- Added support for third party GLightbox script. GLightbox (https://github.com/biati-digital/glightbox/) is a pure javascript lightbox (no jQuery!).
It can display images and videos with optional autoplay for YouTube, Vimeo and self hosted videos.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_glightbox.html

Post by **Pablo** » Wed Nov 02, 2022 5:07 pm

Shapes

- Shapes with output format 'CSS' now use clip-path, so CSS shapes are no longer limited to rectangles and ellipses only!

- Background patterns of SVG shapes are now exported in vector format (instead of an image), so they take up less space and look nicer.

- Most gradients styles now have a decent fallback for SVG , so they look the same (or better) as image based shapes.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_shapes.html

Post by **Pablo** » Wed Nov 02, 2022 5:08 pm

Clip Art / Text Art

- Added output format 'CSS'. This will output the element with clip-path and SVG. When using CSS as output, the border and background can be styled with Styles.

Post by **Pablo** » Wed Nov 02, 2022 5:09 pm

Polygon / Curve/ Line / Scribble

- Added output format 'CSS'. Basically, this generates the same output as SVG, but when using CSS it is possible to use styles. In this case, the 'text color' controls the fill of the shape.

Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_drawing_tools.html

Post by **Pablo** » Wed Nov 02, 2022 5:10 pm

Shape / Clip Art / Text Art / Polygon / Curve

- Added new background size option ‘cover' (in addition to ‘tile’ and ‘stretch’). Unlike stretching, ‘cover’ scales the image to be as large as possible so that the background area is completely covered by the image without affecting the aspect ratio.

Post by **Pablo** » Wed Nov 02, 2022 5:10 pm

Polygon / Curve

- The Polygon / Curve object can now be part of a layout grid. When the output is set to SVG or CSS, the polygon/curve is also responsive and scalable!

Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_polygons.html

Post by **Pablo** » Wed Nov 02, 2022 6:37 pm

YouTube

- Added 'Mute' property. Specifies whether to mute the audio of the video.
This can be useful if you want to automatically play without user interaction, because most browsers will block autoplay if the video has audio.

- Added 'Trigger' functionality. This can be used to start the video based on a 'trigger'. For example, then the video is scrolled into the viewport.
This also supports scroll continuously which plays the video frame by frame based on the scroll position of the scrollbar.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_youtube.html

Post by **Pablo** » Wed Nov 02, 2022 6:38 pm

Vimeo

- Added 'Mute' property. Specifies whether to mute the audio of the video. This can be useful if you want to automatically play without user interaction, because most browsers will block auto play if the video has audio.

- Added 'Show controls' property. Specifies whether to show/hide all elements in the player (play bar, sharing buttons, etc.).

- Added 'Trigger' functionality.

Post by **Pablo** » Wed Nov 02, 2022 6:39 pm

HTML Video

- Added integration with 'Pexels' via the 'Select stock video' button.

- Added 'Trigger' functionality. This can be used to start the video based on a 'trigger'. For example, then the video is scrolled into the viewport.
This support, scroll continuously this plays the video frame by frame based on the scroll position of the scrollbar.

Post by **Pablo** » Wed Nov 02, 2022 6:45 pm

This is a preview of a new template for WWB18: "Purple Fantasy".

A basic template created with Layout grids and Sections. It also uses floating labels and custom scrollbar colors.
The art work in the template was created with the help of Artificial Intelligence (Stable Diffusion).

Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_purplefantasy.html

Post by **Pablo** » Thu Nov 03, 2022 7:47 am

Upgraded to Bootstrap 5

All built-in Bootstrap widgets have been rewritten to use Bootstrap 5. Bootstrap 5 no longer uses jQuery and has many other improvements.
Also, many jQuery UI objects now have a Bootstrap alternative. For example, tooltips, progress bar, checkbox, radio button etc. More details will be available later in this post.

What is the difference between Bootstrap and jQuery UI?
Bootstrap is a modern UI framework based on modern browser functionality.
jQuery UI is an older UI framework based on JavaScript, uses themes. jQuery UI relies on jQuery, and jQuery UI themes and uses JavaScript for animation so it has more impact on the performance of the page. Bootstrap is lightweight and only uses JavaScript when necessary, it uses CSS styling and for animation.

jQuery UI size: approx. 424 KB (jQuery, jQuery UI and theme files)
Bootstrap size: approx. 77 KB (bootstrap.min.js, popper.min.js)

Also, Bootstrap is actively maintained, jQuery UI is no longer under development.

jQuery UI website: https://jqueryui.com/
Bootstrap website: https://getbootstrap.com/