I noticed that the <noscript> element is not actually one of the HTML elements in Bootstrap Studio, and when I added this using the custom code element it is not shown.
Please could this be considered to be added in a future update along with being able to enable it or disable it in the design?
Thank you for the suggestion! We will investigate adding with the ability to toggle its visibility in the program in one of our next releases.
Woo! I’m glad someone else also mentioned this 
It would be a huge help for accessibility!
Hello @martin, is this feature still being considered?
We have it on our list, but we keep adding higher priority items before it. If others would like to see it added do write here so we can give it more attention.
It really would be great addition!
I think it would also be nice if you had a “show / hide” option similar to modals, dropdowns and accordions so the user can make quick edits to it then hide it again. Small pain to disable JavaScript just to see it then accidentally forget you’ve turned it off 
I also think some web devs forget / don’t know that it exists and don’t think about it when developing their sites.
There are alternatives to the <noscript> tag.
Using remove() to Enhance Noscript Fallbacks in JavaScript
When building modern websites, JavaScript plays a crucial role in interactivity and dynamic content. However, not all users have JavaScript enabled, and some search engines or browsers may not fully execute it. That’s where <noscript> and JavaScript fallbacks come into play.
In this post, we’ll explore how to use remove() to efficiently manage fallback elements that appear when JavaScript is disabled, ensuring a seamless user experience.
If a website heavily relies on JavaScript to load content, users with JavaScript disabled may see an incomplete or broken page. To address this, we can include fallback elements that provide alternative content. Once JavaScript runs, we can remove these elements to prevent duplication or unnecessary clutter.
Traditional approaches hide fallback elements using CSS (display: none), but a cleaner and more efficient method is to remove them from the DOM entirely using JavaScript’s .remove() method.
remove() to Eliminate Fallback Elements<iframe> FallbackSuppose your website embeds an iframe to display important content when JavaScript is disabled. We can ensure that this iframe is removed when JavaScript is enabled:
<iframe id="noscript-iframe" src="fallback.html" width="600" height="400">
Your browser does not support iframes.
</iframe>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById('noscript-iframe')?.remove();
});
</script>
<iframe> is removed from the DOM, preventing unnecessary content duplication.Using the optional chaining operator (?.) ensures that the script doesn’t throw an error if the element doesn’t exist.
<div> Fallback MessageA common practice is to display a warning message when JavaScript is disabled. Instead of just hiding it with CSS, we can completely remove it when JavaScript runs:
<div id="noscript-message">
<p>JavaScript is disabled. Some features may not work properly.</p>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById('noscript-message')?.remove();
});
</script>
remove() Instead of display: none?remove()Ensure the Element Exists Before Removing
Always check if the element is present to prevent JavaScript errors:
let element = document.getElementById('noscript-message');
if (element) element.remove();
Use DOMContentLoaded to Wait for DOM Readiness
Since the script may run before the elements are loaded, use DOMContentLoaded to wait until the page is fully parsed.
Consider Alternative Fallbacks
If your site requires JavaScript for key functionality, consider providing an HTML-only alternative.
Using remove() is a simple yet powerful way to clean up fallback elements after JavaScript is confirmed to be running. By removing unnecessary elements, we improve both performance and usability, ensuring a better experience for all users.
You will see the “noscript-elements” inside bss
So, use JavaScript to remove elements from the DOM if JavaScript is enabled.
If JavaScript is not enabled, the content will remain on the DOM.
I’ll have to try this. At least the content created will be visible on Bootstrap Studio until I hit preview or export.
It can lead to issues since web spiders don’t know how to handle that so could index your site showing that element, especially if they don’t run your sites JS. <noscript> is the standard for a reason.
Googlebot does execute JavaScript, Google hold nearly 80% of the global market share for search engines. This means they process around 3.5 billion searches per day!
Bingbot and Yandex also have limited JavaScript execution capabilities but are not as powerful as Googlebot.
Some SEO crawlers like Screaming Frog (with JavaScript rendering enabled) can also execute JavaScript to analyze dynamic content
Crawlers that DO NOT execute JavaScript (basic search engines, old bots, some SEO tools) will index the site by showing the content inside <noscript>. To prevent unwanted indexing, here is an effective setup.
<head>
<meta property="og:title" content="My Page Title">
<meta property="og:description" content="Description for social media previews">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
<noscript>
<meta name="robots" content="noindex">
</noscript>
</head>
<body>
<div id="noscript-message">
<p>JavaScript is disabled. Please enable it for the best experience.</p>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById('noscript-message').remove();
});
</script>
</body>
Crawlers that DO NOT execute JavaScript (basic search engines, old bots, some SEO tools)
Will respect <noscript><meta name="robots" content="noindex"></noscript> and NOT index the page.
They will NOT index <div id="noscript-message">, because they won’t index the page at all. Facebook, Twitter, LinkedIn, etc., will generate a preview because Open Graph (og:) metadata is in <head>.Crawlers that DO execute JavaScript (Googlebot, Bingbot with JavaScript enabled)
Will index the page, ignoring <noscript> since JavaScript is running. Will NOT index the #noscript-message, because JavaScript removes it before indexing.| Crawler Type | Executes JS? | Indexes Page? | Indexes <noscript-message>? |
Creates Social Media Preview? |
|---|---|---|---|---|
| Googlebot, Bingbot (with JS) | Yes |
Yes |
No (JS removes it) |
No |
| Basic search crawlers (no JS) | No |
No (due to <noscript><meta name="robots" content="noindex"></noscript>) |
No (because the page is not indexed) |
No |
| Facebook, Twitter, LinkedIn | No |
No (but they don’t rely on search indexing) |
No |
Yes (thanks to Open Graph <meta> tags) |
Facebook, Twitter, and LinkedIn will generate a preview using Open Graph (og:) tags.
Search engines that execute JavaScript (like Googlebot) will index the page but won’t see the noscript-message.
Search engines that do not execute JavaScript (like some SEO crawlers) won’t index the page at all.
This setup effectively prevents unwanted indexing while allowing proper social media previews!
I accept the fact that there are “alternatives” to the <noscript> tag, however you are missing the point that this is a feature request - I am asking for it to be added.
The current work around is to just use the Custom Code block in Bootstrap Studio, which is what I do for my sites that rely on some JS.
While your solution here would work, it’s still not best practice.
<noscript> is the standard, and some accessibility tools rely on finding it.I’ve also noticed while testing the JavaScript version to hide elements on the DOM will cause Layout Shifting. While it’s not 100% noticeable, it can still happen. It’s recommended to use <noscript> for best practices. But you can mix them together.
.noscript-message {
display: none; /* Hide by default */
}
<noscript>
<style>
.noscript-message {
display:block !important; /* Override default to show if no JS */
}
</style>
</noscript>
<p class="noscript-message">
JavaScript is required for this Form to work properly.
</p>
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.noscript-message')?.classList.add('hidden');
});
.hidden {
display: none;
}
I also agree that it should be an element within Bootstrap Studio though.
It would make it easier to work with instead of using Custom Code.
I know kuligaposten is just trying to help.
@catkin
I did a little more testing and more research on the topic of mixing <noscript> and JavaScript.
<!--
This will allow the message to display when JavaScript is Disabled.
-->
<noscript>
<style>
.noscript-message {
display: block;
}
</style>
</noscript>
/* Hides the message - styles.css */
.noscript-message {
display: none;
}
<!-- The "noscript" message, hidden using the CSS -->
<div class="mt-2 noscript-message">
<div class="alert alert-danger small" role="alert">
<span>
<strong>
JavaScript is required to use the navigation.
</strong>
</span>
</div>
</div>
// Since JavaScript loads, we remove the element.
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.noscript-message')?.remove();
});
@kuligaposten was right on the way to use the JavaScript.
Tweaking it to be a querySelector is better since IDs are meant to be unique and a website might have more than one “noscript-message” on different pages.
In this case, Googlebot and other crawlers will likely not index the .noscript-message content because:
when would Google index it?
This also should not cause Layout Shift because the content is hidden by default.
Could this cause Layout Shift?
Yes, if the .noscript-message was initially visible and then hidden / removed later.
@GregoryAM
have a look at the source code
<script>
// this runs before the page is visible to the user
document.querySelectorAll('.noscript-message').forEach(message => message.remove())
</script>
Include the JavaScript into the body and within <noscript> add:
<meta name="robots" content="noindex">
.noscript-message classes and remove them on page load before it’s visible to the user (as per your comment).If I understood this, is that what you wanted me to see?