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

Responsive Jumbotron built with Bootstrap 5. Examples of classic hero component, with background image, with navbar and many other combinations.
https://github.com/mdbootstrap/bootstrap-jumbotron

background-image bootstrap bootstrap-template bootstrap5 cards fixed-navbar jumbotron navbar responsive responsive-design

Last synced: 9 months ago
JSON representation

Responsive Jumbotron built with Bootstrap 5. Examples of classic hero component, with background image, with navbar and many other combinations.

Host: GitHub
URL: https://github.com/mdbootstrap/bootstrap-jumbotron
Owner: mdbootstrap
License: other
Created: 2021-08-13T05:58:44.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2022-01-27T10:16:19.000Z (almost 4 years ago)
Last Synced: 2025-04-09T16:44:57.487Z (9 months ago)
Topics: background-image, bootstrap, bootstrap-template, bootstrap5, cards, fixed-navbar, jumbotron, navbar, responsive, responsive-design
Language: JavaScript
Homepage: https://mdbootstrap.com/docs/standard/extended/jumbotron/
Size: 954 KB
Stars: 4
Watchers: 4
Forks: 3
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: License.pdf

Awesome Lists containing this project

README

Responsive Jumbotron built with Bootstrap 5. Examples of classic hero component, with background image, with navbar and many other combinations.

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

## Basic example

![Bootstrap 5 Jumbotron](https://mdbootstrap.com/img/Marketing/github/jumbotron/basic.png)

```html

Hello world!

This is a simple hero unit, a simple jumbotron-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

```

## 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 Jumbotron Background image:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/jumbotron/background.png)](https://mdbootstrap.com/docs/standard/extended/jumbotron/#section-background-image)

[Bootstrap Jumbotron With navbar:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/jumbotron/navbar.png)](https://mdbootstrap.com/docs/standard/extended/jumbotron/#section-background-image)

[Bootstrap Jumbotron Background image with navbar:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/jumbotron/background-with-navbar.png)](https://mdbootstrap.com/docs/standard/extended/jumbotron/#section-with-navbar)

[Bootstrap Jumbotron Fixed navbar:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/jumbotron/fixed.png)](https://mdbootstrap.com/docs/standard/extended/jumbotron/#section-fixed-navbar)

[Bootstrap Jumbotron Animated navbar:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/jumbotron/animated.png)](https://mdbootstrap.com/docs/standard/extended/jumbotron/#section-animated-navbar)

___

## More extended Bootstrap documentation