https://github.com/mdbootstrap/bootstrap-video-carousel

Example of responsive bootstrap carousel with videos instead of images built with the Bootstrap 5.
https://github.com/mdbootstrap/bootstrap-video-carousel

bootstrap bootstrap-5 bootstrap-5-template bootstrap-carousel bootstrap5 full-page-video-background responsive responsive-design video-carousel

Last synced: about 1 month ago
JSON representation

Example of responsive bootstrap carousel with videos instead of images built with the Bootstrap 5.

• Host: GitHub
• URL: https://github.com/mdbootstrap/bootstrap-video-carousel
• Owner: mdbootstrap
• License: other
• Created: 2022-01-25T15:21:49.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-01-28T09:04:57.000Z (almost 3 years ago)
• Last Synced: 2024-08-12T09:26:43.932Z (3 months ago)
• Topics: bootstrap, bootstrap-5, bootstrap-5-template, bootstrap-carousel, bootstrap5, full-page-video-background, responsive, responsive-design, video-carousel
• Language: JavaScript
• Homepage:
• Size: 948 KB
• Stars: 5
• Watchers: 5
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: License.pdf

Awesome Lists containing this project

README

        

An example of responsive bootstrap carousel with videos instead of images.

Check out [Bootstrap Video Carousel Documentation](https://mdbootstrap.com/docs/standard/extended/video-carousel/) for detailed instructions & even more examples.

## Basic example

![Bootstrap 5 Video Carousel](https://mdbootstrap.com/img/Marketing/github/video-carousel/basic.png)

```html



  

  


    

    

    

  


  

  


    

    


      

        

      

      


        
First slide label

        


          Nulla vitae elit libero, a pharetra augue mollis interdum.

        

      

    


    

    


      

        

      

      


        
Second slide label

        


          Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        

      

    


    

    


      

        

      

      


        
Third slide label

        


          Praesent commodo cursus magna, vel scelerisque nisl consectetur.

        

      

    

  

  


  

  

    

    Previous

  

  

    

    Next

  



```

## 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 Full page video carousel:

![Bootstrap 5 Video Carousel](https://mdbootstrap.com/img/Marketing/github/video-carousel/section-2.png)](https://mdbootstrap.com/docs/standard/extended/video-carousel/#section-full-page-video-carousel)

___

## More extended Bootstrap documentation



Bootstrap Address Form

Bootstrap Avatar

Bootstrap Back To Top Button

Bootstrap Carousel Slider with Thumbnails

Bootstrap Chat

Bootstrap Code Blocks

Bootstrap Comments

Bootstrap Comparison Table

Bootstrap Credit Card Form

Bootstrap Drawer

Bootstrap Nested Dropdown

Bootstrap FAQ component / section

Bootstrap Gallery

Bootstrap Hamburger Menu

Bootstrap Invoice

Bootstrap Jumbotron

Bootstrap Login Form

Bootstrap Maps

Bootstrap Media Object

Bootstrap Mega Menu
 

Bootstrap Multiselect
 

Bootstrap News Feed
 

Bootstrap Offcanvas
 

Bootstrap Order Details
 

Bootstrap Page Transitions
 

Bootstrap Payment Forms
 

Bootstrap Product Cards
 

Bootstrap Profiles
  

Bootstrap Quotes
 

Bootstrap Registration Form
 

Bootstrap Expanding Search Bar
 

Bootstrap Shopping Carts
 

Bootstrap Side Navbar
  

Bootstrap Sidebar
  

Bootstrap Social Media Icons & Buttons
  

Bootstrap Square Buttons
  

Bootstrap Survey Form
  

Bootstrap Testimonial Slider
  

Bootstrap Testimonials
  

Bootstrap Textarea
  

Bootstrap Timeline
  

Bootstrap To Do List
  

Bootstrap Video Carousel / Gallery
  

Bootstrap Weather