With visibility utilities you have control the visibility, without modifying the display, of elements.
Bootstrap 4 image replacement is used to replace an element text content with a background image.
<h1 class="text-hide">Text declare </h1>
<h1 class="text-hide" style="background-image: url('image link'); background-repeat: no-repeat; width: 500px; height: 500px; "> google </h1>
A modal window creates a mode that disables the main window but keeps it visible, with the modal window as a child window in front of it. … Users must interact with the modal window before they can return to the parent application. This avoids interrupting the workflow on the main window.
Simply define the Modal component as a dialog box/popup window that is displayed on top of the current page.
- .fade class for add animation.
- Model Size like model-sm, model-lg, model-xl.
- Centered Model .model-dialog-centered class.
- Scrolling Model use by adding .model-dialog-scrollable to .model-dialog in class.