Issues while editing websites on Bootstrap

While editing sites on Bootstrap, sometimes the changes created on the visual editor are not reflected on the live previews or the editor, even though the code has been saved.

The problem arises with bootstrap formatting classes. This classes change dynamically as the screen size changes are not good for creating the selectors needed by Convert to deploy experiments across all type of devices.

The solution is to configure the visual editor to ignore this classes, and create them based on the more semantic part of the document.

Doing this is simple. Just access the "Element Selection Settings" on the visual editor. 

So copy the following words below and paste them on the "Element Selection Settings" modal.

alert
badges
breadcrumb
btn
active
disabled
checkbox
radio
card
carousel
collapse
accordion
dropdown
dropup
dropright
dropleft
form
input
segmented
custom
container
row
col
no-gutters
offset
order
nested
img
jumbotron
list
media
d-flex
aligned
right
modal
ul
nav
navbar
pagination
page
popover
progress
multiple
data
spinner
table
thead
toast
lead
display
blockquote
list
dl
border
rounded
bg-
text-
flex-
justify-
align
close
embed
shadow
invisible
visible
sticky
w-
h-
mw-
mh-
m-
mt-
mr-
ml-
mx-
my-
p-
pt-
pr-
pb-
pl-
px-
py-
font-
text-



Save it, and now you can create the changes on the visual editor, and the changes should be reflected on the live previews and force variation url's.