https://github.com/mdbootstrap/bootstrap-overlay

Responsive overlay built with Bootstrap 5. Examples of overlay effect, overlay text on image, overlay image over image & more.
https://github.com/mdbootstrap/bootstrap-overlay

bootstrap bootstrap-mask bootstrap-overlay bootstrap-template bootstrap-theme bootstrap5 css html

Last synced: about 1 month ago
JSON representation

Responsive overlay built with Bootstrap 5. Examples of overlay effect, overlay text on image, overlay image over image & more.

• Host: GitHub
• URL: https://github.com/mdbootstrap/bootstrap-overlay
• Owner: mdbootstrap
• License: other
• Created: 2022-07-21T08:16:35.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-08-01T11:29:39.000Z (almost 4 years ago)
• Last Synced: 2026-04-03T04:29:53.243Z (2 months ago)
• Topics: bootstrap, bootstrap-mask, bootstrap-overlay, bootstrap-template, bootstrap-theme, bootstrap5, css, html
• Language: SCSS
• Homepage: https://mdbootstrap.com/docs/standard/extended/overlay/
• Size: 1.84 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: License.pdf

Awesome Lists containing this project

README

          
Responsive overlay built with Bootstrap 5. Examples of overlay effect, overlay text on image,

overlay image over image & more.

Check out [Bootstrap Overlay Documentation](https://mdbootstrap.com/docs/standard/extended/overlay/) for detailed instructions & even more examples.

## Basic example

![Bootstrap 5 Overlay](/assets/basic.png)

```html



  

  




```


## How to use?

1. Download MDB 5 - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More examples

[Bootstrap Overlay text on image:

![Bootstrap 5 Overlay](/assets/text-on-image.png)](https://mdbootstrap.com/docs/standard/extended/overlay/#section-overlay-text-on-image)

[Bootstrap Overlay effect:

![Bootstrap 5 Overlay](/assets/hover-effect.png)](https://mdbootstrap.com/docs/standard/extended/overlay/#section-overlay-effect)

[Bootstrap Overlay image over image:

![Bootstrap 5 Overlay](/assets/image-over-image.png)](https://mdbootstrap.com/docs/standard/extended/overlay/#section-overlay-image-over-image)

[Bootstrap Overlay caption:

![Bootstrap 5 Overlay](/assets/caption.png)](https://mdbootstrap.com/docs/standard/extended/overlay/#section-overlay-caption)

[Bootstrap card image overlay:

![Bootstrap 5 Overlay](/assets/card.png)](https://mdbootstrap.com/docs/standard/extended/overlay/#section-card-image-overlay)

[Bootstrap overlay modal:

![Bootstrap 5 Overlay](/assets/modal.png)](https://mdbootstrap.com/docs/standard/extended/overlay/#section-overlay-modal)

[Bootstrap overlay glyphicon on panel:

![Bootstrap 5 Overlay](/assets/glyphicon.png)](https://mdbootstrap.com/docs/standard/extended/overlay/#section-overlay-glyphicon-on-panel)

___

## More extended Bootstrap documentation



Bootstrap icons

Bootstrap hover effect

Bootstrap images

Bootstrap cards

Bootstrap buttons

Bootstrap masks