# Tips and Tricks **URL:** https://forum.bootstrapstudio.io/c/tips-and-tricks/11.md [Latest](https://forum.bootstrapstudio.io/latest.md) · [Categories](https://forum.bootstrapstudio.io/categories.md) --- ## [About the Tips and Tricks category](https://forum.bootstrapstudio.io/t/about-the-tips-and-tricks-category/6453)
**Author:** [@bootstrapstudio](https://forum.bootstrapstudio.io/u/bootstrapstudio)\ **Replies:** 0\ **Last updated:** [November 24, 2020, 10:03am UTC](https://forum.bootstrapstudio.io/t/about-the-tips-and-tricks-category/6453 "2020-11-24T10:03:51Z")
Have a tip for other users? Share it here. --- ## [My build process for creating full sites from Bootstrap Studio](https://forum.bootstrapstudio.io/t/my-build-process-for-creating-full-sites-from-bootstrap-studio/12713)
**Author:** [@catkin](https://forum.bootstrapstudio.io/u/catkin)\ **Replies:** 3\ **Last updated:** [April 24, 2026, 4:46pm UTC](https://forum.bootstrapstudio.io/t/my-build-process-for-creating-full-sites-from-bootstrap-studio/12713 "2026-04-24T16:46:56Z")
Ok, been meaning to write a post on this for a long time. So finally getting round to it. I thought I would show off how I build sites, integrate them with a full CMS and build features. Several of the tools I use do hav… --- ## [Centering a Dropdown menu with Bootstrap utility classes](https://forum.bootstrapstudio.io/t/centering-a-dropdown-menu-with-bootstrap-utility-classes/12706)
**Author:** [@printninja](https://forum.bootstrapstudio.io/u/printninja)\ **Replies:** 0\ **Last updated:** [March 29, 2026, 10:08am UTC](https://forum.bootstrapstudio.io/t/centering-a-dropdown-menu-with-bootstrap-utility-classes/12706 "2026-03-29T10:08:27Z")
By default, Dropdown menus are aligned to the start edge of a Dropdown. You can easily center the menu by selecting it and adding the following two Bootstrap utility classes in the Attributes Panel \> Class Names start-5… --- ## [Keep your footer at the bottom](https://forum.bootstrapstudio.io/t/keep-your-footer-at-the-bottom/12705)
**Author:** [@rocket77](https://forum.bootstrapstudio.io/u/rocket77)\ **Replies:** 2\ **Last updated:** [March 27, 2026, 7:51pm UTC](https://forum.bootstrapstudio.io/t/keep-your-footer-at-the-bottom/12705 "2026-03-27T19:51:22Z")
Ever wondered how you can keep your footer at the bottom of a page that doesn’t have a lot of content? Well, you don’t need to write custom CSS, just use bootstrap tags: Add these 3 tags to the BODY tag using the attri… --- ## [Tips to avoid spam getting sent from your contact form](https://forum.bootstrapstudio.io/t/tips-to-avoid-spam-getting-sent-from-your-contact-form/12627)
**Author:** [@Sune](https://forum.bootstrapstudio.io/u/Sune)\ **Replies:** 5\ **Last updated:** [January 24, 2026, 2:25am UTC](https://forum.bootstrapstudio.io/t/tips-to-avoid-spam-getting-sent-from-your-contact-form/12627 "2026-01-24T02:25:25Z")
Hello everyone. This is just a small tip I discovered the other day and through to share it. I have recently been receiving some spam emails from the contact form on my web page. Email address are usually something dull… --- ## [Free Utility html2php : Renaming files to php & fixing links](https://forum.bootstrapstudio.io/t/free-utility-html2php-renaming-files-to-php-fixing-links/7762)
**Author:** [@wallabri](https://forum.bootstrapstudio.io/u/wallabri)\ **Replies:** 9\ **Last updated:** [January 21, 2026, 2:09pm UTC](https://forum.bootstrapstudio.io/t/free-utility-html2php-renaming-files-to-php-fixing-links/7762 "2026-01-21T14:09:27Z")
I have written a freeware command line utility, that can be used in a batch file called by the advanced export section, that renames (copies) the exported files to .php extensions and renames all internal .html reference… --- ## [Installing on Apple M1 with Linux Asahi Debian](https://forum.bootstrapstudio.io/t/installing-on-apple-m1-with-linux-asahi-debian/12446)
**Author:** [@tukhalele](https://forum.bootstrapstudio.io/u/tukhalele)\ **Replies:** 0\ **Last updated:** [August 29, 2025, 7:12pm UTC](https://forum.bootstrapstudio.io/t/installing-on-apple-m1-with-linux-asahi-debian/12446 "2025-08-29T19:12:58Z")
Anyone get BootstrapStudio to work on Debian Trixie installed on Apple Macbook pro M1? And if yes - how? --- ## [How to change the background color of Bootstrap Tooltips](https://forum.bootstrapstudio.io/t/how-to-change-the-background-color-of-bootstrap-tooltips/7064)
**Author:** [@printninja](https://forum.bootstrapstudio.io/u/printninja)\ **Replies:** 1\ **Last updated:** [July 17, 2025, 12:44am UTC](https://forum.bootstrapstudio.io/t/how-to-change-the-background-color-of-bootstrap-tooltips/7064 "2025-07-17T00:44:39Z")
For some reason, I found this rather difficult to accomplish. The main problem I kept running into was the arrow (which as you can see is done with a pseudo class.) I tried at least five stack overflow “solutions” but th… --- ## [Avoid Accessibility Warnings in Bootstrap Modals](https://forum.bootstrapstudio.io/t/avoid-accessibility-warnings-in-bootstrap-modals/12333)
**Author:** [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\ **Replies:** 1\ **Last updated:** [July 3, 2025, 9:08am UTC](https://forum.bootstrapstudio.io/t/avoid-accessibility-warnings-in-bootstrap-modals/12333 "2025-07-03T09:08:30Z")
Avoid Accessibility Warnings in Bootstrap Modals with a Simple blur() Fix you may have seen a browser warning like this: :red\_exclamation\_mark: “Blocked aria-hidden on an element because its descendant retained focus.” … --- ## [Using External Libraries](https://forum.bootstrapstudio.io/t/using-external-libraries/12148)
**Author:** [@ben1](https://forum.bootstrapstudio.io/u/ben1)\ **Replies:** 0\ **Last updated:** [March 25, 2025, 3:24am UTC](https://forum.bootstrapstudio.io/t/using-external-libraries/12148 "2025-03-25T03:24:01Z")
Hi, new BSS user here. I can see that people have asked on this forum previously regarding linking an external javascript file or folder and that it isn’t supported by the product. I use Tabulator a lot and code the tab… --- ## [Automatically generate custom opengraph images for each page! (PHP)](https://forum.bootstrapstudio.io/t/automatically-generate-custom-opengraph-images-for-each-page-php/10445)
**Author:** [@catkin](https://forum.bootstrapstudio.io/u/catkin)\ **Replies:** 6\ **Last updated:** [October 25, 2024, 8:14pm UTC](https://forum.bootstrapstudio.io/t/automatically-generate-custom-opengraph-images-for-each-page-php/10445 "2024-10-25T20:14:04Z")
OpenGraph, or social media embeds are how your site appears when someone links to it. You normally have an image you want to show as part of this, but wouldn’t it be awesome to have a unique image with the tile of the pa… --- ## [Carousel Slide Vertically](https://forum.bootstrapstudio.io/t/carousel-slide-vertically/11552)
**Author:** [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\ **Replies:** 1\ **Last updated:** [August 1, 2024, 4:37am UTC](https://forum.bootstrapstudio.io/t/carousel-slide-vertically/11552 "2024-08-01T04:37:56Z")
--- ## [Toggle Show/Hide Password #OnlineComponent](https://forum.bootstrapstudio.io/t/toggle-show-hide-password-onlinecomponent/11454)
**Author:** [@raniaamina](https://forum.bootstrapstudio.io/u/raniaamina)\ **Replies:** 0\ **Last updated:** [June 20, 2024, 3:20am UTC](https://forum.bootstrapstudio.io/t/toggle-show-hide-password-onlinecomponent/11454 "2024-06-20T03:20:26Z")
You need to make toggleable password input? I’ve shared online component to help you. Just find and use it. Since this element use pure bootstrap studio component, you can modify the style as you need; --- ## [Install Bootstrap Studio on ChromeOS](https://forum.bootstrapstudio.io/t/install-bootstrap-studio-on-chromeos/10163)
**Author:** [@GregoryAM](https://forum.bootstrapstudio.io/u/GregoryAM)\ **Replies:** 21\ **Last updated:** [May 4, 2024, 8:37pm UTC](https://forum.bootstrapstudio.io/t/install-bootstrap-studio-on-chromeos/10163 "2024-05-04T20:37:52Z")
As someone who has recently transitioned from Windows 10 to a Chromebook. I had no clue exactly what I was getting myself into. I only moved operating systems due to my main desktop taking its last breath a few months a… --- ## [Build a datalist with validation in Bootstrap Studio](https://forum.bootstrapstudio.io/t/build-a-datalist-with-validation-in-bootstrap-studio/11216)
**Author:** [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\ **Replies:** 0\ **Last updated:** [April 5, 2024, 1:13pm UTC](https://forum.bootstrapstudio.io/t/build-a-datalist-with-validation-in-bootstrap-studio/11216 "2024-04-05T13:13:38Z")
How to use and build a datalist with validation in Bootstrap Studio Add an input type text to your form Set the needed attributes data-countries list=“countries” important that the list has the same value as the data- … --- ## [A simple back to top button using built-in BSS features](https://forum.bootstrapstudio.io/t/a-simple-back-to-top-button-using-built-in-bss-features/11201)
**Author:** [@printninja](https://forum.bootstrapstudio.io/u/printninja)\ **Replies:** 1\ **Last updated:** [April 3, 2024, 10:01am UTC](https://forum.bootstrapstudio.io/t/a-simple-back-to-top-button-using-built-in-bss-features/11201 "2024-04-03T10:01:23Z")
I often see people looking for or asking about back-to-top buttons. I’m talking about the little button that often appears on websites either in the lower right or lower left when you scroll down the page a certain dista… --- ## [Hero parallax link](https://forum.bootstrapstudio.io/t/hero-parallax-link/11055)
**Author:** [@oscarmedinasgroup](https://forum.bootstrapstudio.io/u/oscarmedinasgroup)\ **Replies:** 0\ **Last updated:** [February 19, 2024, 6:13pm UTC](https://forum.bootstrapstudio.io/t/hero-parallax-link/11055 "2024-02-19T18:13:53Z")
Hello, I am utilizing the hero parallax; it works great, Just that I will like to place a link to the image; I have try to no avail. Can someone help, thanks in advance! --- ## [Host html, css and js website for free on cloudflare](https://forum.bootstrapstudio.io/t/host-html-css-and-js-website-for-free-on-cloudflare/9028)
**Author:** [@gilmar](https://forum.bootstrapstudio.io/u/gilmar)\ **Replies:** 15\ **Last updated:** [November 29, 2023, 8:48am UTC](https://forum.bootstrapstudio.io/t/host-html-css-and-js-website-for-free-on-cloudflare/9028 "2023-11-29T08:48:15Z")
I’m hosting my website for free on cloudflare, https://gilmarwebdesign.com.br. As the free space is limited to sending compressed files up to 25mb, I decided to split the project, send the html files to cloudflare and i… --- ## [Useful links for website evaluation](https://forum.bootstrapstudio.io/t/useful-links-for-website-evaluation/10676)
**Author:** [@gilmar](https://forum.bootstrapstudio.io/u/gilmar)\ **Replies:** 0\ **Last updated:** [October 6, 2023, 10:28pm UTC](https://forum.bootstrapstudio.io/t/useful-links-for-website-evaluation/10676 "2023-10-06T22:28:25Z")
I found this website that does a great job evaluating image sizes for the website. It tells you exactly what maximum image size we need to add to the website and configure the width and height of the images in the fields… --- ## [Saving time and optimizing work!](https://forum.bootstrapstudio.io/t/saving-time-and-optimizing-work/10669)
**Author:** [@gilmar](https://forum.bootstrapstudio.io/u/gilmar)\ **Replies:** 2\ **Last updated:** [October 4, 2023, 11:41pm UTC](https://forum.bootstrapstudio.io/t/saving-time-and-optimizing-work/10669 "2023-10-04T23:41:19Z")
I wasted days and had a lot of work trying to make an Offcanvas navbar by building it from scratch. That’s when I remembered the bootstrap website, Get Bootstrap, I did a search, got exactly what I needed, copied the co… --- ## [BSS Works great on MacOS Ventura!](https://forum.bootstrapstudio.io/t/bss-works-great-on-macos-ventura/10536)
**Author:** [@jo-r](https://forum.bootstrapstudio.io/u/jo-r)\ **Replies:** 0\ **Last updated:** [August 24, 2023, 3:18pm UTC](https://forum.bootstrapstudio.io/t/bss-works-great-on-macos-ventura/10536 "2023-08-24T15:18:23Z")
Just thought I’d let people know that I just updated my MacOS from Monterey to Ventura (ya I know, I’m a late bloomer, “never trust it till the next one is about to come out” is my motto lol). Not only did the upgrade h… --- ## [Adding a search function to a bss site](https://forum.bootstrapstudio.io/t/adding-a-search-function-to-a-bss-site/8652)
**Author:** [@richards](https://forum.bootstrapstudio.io/u/richards)\ **Replies:** 6\ **Last updated:** [July 4, 2023, 6:05pm UTC](https://forum.bootstrapstudio.io/t/adding-a-search-function-to-a-bss-site/8652 "2023-07-04T18:05:04Z")
@migoel585 recently asked how to add a search function to his site, he had been trying to get lunajs working without any luck. Here is the solution: Full instructions included --- ## [Add follow on facebook button](https://forum.bootstrapstudio.io/t/add-follow-on-facebook-button/9838)
**Author:** [@cent](https://forum.bootstrapstudio.io/u/cent)\ **Replies:** 2\ **Last updated:** [January 17, 2023, 10:04am UTC](https://forum.bootstrapstudio.io/t/add-follow-on-facebook-button/9838 "2023-01-17T10:04:09Z")
Hi, Does anyone have used a “Follow us on Facebook” button? Any Meta Help links? That’s a rough idea --- ## [Send message to Messenger](https://forum.bootstrapstudio.io/t/send-message-to-messenger/9836)
**Author:** [@cent](https://forum.bootstrapstudio.io/u/cent)\ **Replies:** 0\ **Last updated:** [January 17, 2023, 8:55am UTC](https://forum.bootstrapstudio.io/t/send-message-to-messenger/9836 "2023-01-17T08:55:50Z")
Hi there, Does anyone know how to send a message to messenger when a user clicks our form. That’s the idea from this guy If you pay attention you’ll see a checkbox “Send to Messenger” so when user clicks the form b… --- ## [Change color of modal close button from dark to light in Bootstrap 5](https://forum.bootstrapstudio.io/t/change-color-of-modal-close-button-from-dark-to-light-in-bootstrap-5/9156)
**Author:** [@printninja](https://forum.bootstrapstudio.io/u/printninja)\ **Replies:** 7\ **Last updated:** [December 23, 2022, 8:46am UTC](https://forum.bootstrapstudio.io/t/change-color-of-modal-close-button-from-dark-to-light-in-bootstrap-5/9156 "2022-12-23T08:46:12Z")
I recently created a Bootstrap 5 modal and gave it a dark background, which resulted in a problem… the default close button is black. The Bootstrap 5 modal uses an SVG background image for the “X” close button (unlike B… --- ## [Globally changes for button component](https://forum.bootstrapstudio.io/t/globally-changes-for-button-component/9700)
**Author:** [@rumede](https://forum.bootstrapstudio.io/u/rumede)\ **Replies:** 15\ **Last updated:** [December 14, 2022, 9:49pm UTC](https://forum.bootstrapstudio.io/t/globally-changes-for-button-component/9700 "2022-12-14T21:49:34Z")
I would like to make a customization to the “Buttons” component, generally across all classes. Where do I need to do this? I would like to do the following: Background color of buttons all (primary, success etc.) to 1… --- ## [Change default toggler icon](https://forum.bootstrapstudio.io/t/change-default-toggler-icon/9639)
**Author:** [@rumede](https://forum.bootstrapstudio.io/u/rumede)\ **Replies:** 2\ **Last updated:** [November 21, 2022, 2:32am UTC](https://forum.bootstrapstudio.io/t/change-default-toggler-icon/9639 "2022-11-21T02:32:02Z")
I would like to replace the BS default toggler-icon, unfortunately I haven’t figured out how to do that. I have drawn an icon in illustrator which I can export as svg. How can I display this SVG (as an image or embedde… --- ## [How To: Hover on Link-Navigation](https://forum.bootstrapstudio.io/t/how-to-hover-on-link-navigation/9415)
**Author:** [@rumede](https://forum.bootstrapstudio.io/u/rumede)\ **Replies:** 1\ **Last updated:** [September 16, 2022, 8:03pm UTC](https://forum.bootstrapstudio.io/t/how-to-hover-on-link-navigation/9415 "2022-09-16T20:03:36Z")
In the Footer of these Website is a list with textlinks (Aktuell, Jobs,…): how can i do the same in my own Page? what is the correct css-defintion to do this? --- ## [Text/image combination - how to](https://forum.bootstrapstudio.io/t/text-image-combination-how-to/9356)
**Author:** [@rumede](https://forum.bootstrapstudio.io/u/rumede)\ **Replies:** 2\ **Last updated:** [September 9, 2022, 9:53am UTC](https://forum.bootstrapstudio.io/t/text-image-combination-how-to/9356 "2022-09-09T09:53:27Z")
I saw this design on a page on the net: The image column and text column overlap horizontally. The text column starts vertically lower than the image column. Can I somehow achieve this layout with the Bootstrap too… --- ## [Post Processing with Parcel](https://forum.bootstrapstudio.io/t/post-processing-with-parcel/9380)
**Author:** [@vasfvitor](https://forum.bootstrapstudio.io/u/vasfvitor)\ **Replies:** 0\ **Last updated:** [September 13, 2022, 3:07am UTC](https://forum.bootstrapstudio.io/t/post-processing-with-parcel/9380 "2022-09-13T03:07:31Z")
Parcel is a build tool for web, in simple word it process html, css, js and other assets I’m experimenting with it and the results so far are really good. Requeriments some cli knowledge to use pnpm and setup node.js… [Next page](https://forum.bootstrapstudio.io/c/tips-and-tricks/11.md?page=1)