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

Responsive Hero built with Bootstrap 5. Examples include hero image, hero banner, hero slider, hero section & more.
https://github.com/mdbootstrap/bootstrap-hero

bootstrap bootstrap-cards bootstrap5 bootstrap5-template cards hero responsive responsive-design

Last synced: 6 months ago
JSON representation

Responsive Hero built with Bootstrap 5. Examples include hero image, hero banner, hero slider, hero section & more.

Host: GitHub
URL: https://github.com/mdbootstrap/bootstrap-hero
Owner: mdbootstrap
License: mit
Created: 2022-06-13T13:48:34.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2022-11-02T21:34:49.000Z (almost 3 years ago)
Last Synced: 2025-04-21T09:06:24.743Z (6 months ago)
Topics: bootstrap, bootstrap-cards, bootstrap5, bootstrap5-template, cards, hero, responsive, responsive-design
Language: SCSS
Homepage: https://mdbootstrap.com/docs/standard/extended/hero/
Size: 938 KB
Stars: 1
Watchers: 4
Forks: 3
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

Responsive Hero built with Bootstrap 5. Examples include hero image, hero banner, hero slider, hero section & more.

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

## Hero banner

Hero banner is a full width card located at the beginning of a page.

![Bootstrap Dark Mode](https://mdbootstrap.com/img/Marketing/github/hero/basic.png)

```html

Hello world!

This is a simple hero unit, a simple Hero-style component for calling extra
attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the
larger container.

Learn more

```

## More Examples

[Bootstrap Hero Image:
![Bootstrap Hero](https://mdbootstrap.com/img/Marketing/github/hero/basic1.png)](https://mdbootstrap.com/docs/standard/extended/hero/#section-background-image)

[Bootstrap Hero section with navbar:
![Bootstrap Hero](https://mdbootstrap.com/img/Marketing/github/hero/basic2.png)](https://mdbootstrap.com/docs/standard/extended/hero/#section-with-navbar)

[Bootstrap Background image with navbar:
![Bootstrap Hero](https://mdbootstrap.com/img/Marketing/github/hero/basic3.png)](https://mdbootstrap.com/docs/standard/extended/hero/#section-background-image-with-navbar)

## 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 extended Bootstrap documentation