How to Create Responsive Card with a Video Background in Bootstrap? Last Updated : 30 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Cards are very useful things in web development. Cards can hold various types of content, such as text, images, and links, making them perfect for displaying information in a structured format. And the background video can enhance the style of the web page. In this tutorial, we will focus on how to create a responsive card with a video background in Bootstrap 5.PreviewApproach:At first, create a new HTML file and set up the basic HTML structure. Then include the Bootstrap 5 CSS link in the <head> section and add the Bootstrap 5 JavaScript link before the closing <body> tag.After that create a div for the background video and use the bootsrap class like "w-100" , "h-100" to provide it full width and height.And Insive the div you can add any video like if you want to add the youtube video the use the <iframe> page or if you want to use the online other video the use the <source> tag and set it's type like type="video/mp4".Inside this container, create a div for the card with Bootstrap's "card" class and add some content inside it. To give a color to the card use the "bg-dark" class and set it's opacity using "bg-opacity-75".Example: To demonstrate creating a responsive card with a video background in bootstrap 5. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Cards with Image and Video Background</title> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="bg-dark text-light"> <div class="container my-5"> <h1 class="text-center mb-5"> Responsive Cards with Image and Video Background </h1> <div class="row gy-5 justify-content-center"> <!-- Card with Image Background --> <div class="col-12 col-md-6 col-lg-5"> <div class="card text-white" style="height: 300px;"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20230416201559/DevOps-Roadmap.webp" class="card-img" alt="Background Image" style="height: 100%; object-fit: cover;"> <div class="card-img-overlay d-flex flex-column justify-content-center bg-dark bg-opacity-50"> <h5 class="card-title text-center"> Card with Image Background </h5> <p class="card-text text-center"> This is an example of a card with an image background. </p> </div> </div> </div> <!-- Card with Video Background --> <div class="col-12 col-md-6 col-lg-5"> <div class="card bg-dark text-white" style="height: 300px;"> <div class="position-relative w-100 h-100"> <iframe class="w-100 h-100 position-absolute top-0 start-0" style="object-fit: cover;" src= "https://www.youtube.com/embed/Pt2vYaJgGy8?autoplay=1&mute=1&loop=1&playlist=Pt2vYaJgGy8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <div class="card-img-overlay d-flex flex-column justify-content-center bg-dark bg-opacity-50"> <h5 class="card-title text-center"> Card with Video Background </h5> <p class="card-text text-center"> This is an example of a card with a video background. </p> </div> </div> </div> </div> </div> </div> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </body> </html> Output:Output Comment More infoAdvertise with us Next Article How to make a Full-width Background in Bootstrap 5 ? S skaftafh Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-Questions Similar Reads How to design Responsive card-deck with fixed width in Bootstrap? To design a responsive card deck with a fixed width in Bootstrap, utilize a grid layout of cards. Apply custom CSS to set a fixed width for each card, ensuring they maintain consistent dimensions across various screen sizes. Utilize Bootstrap's responsive utilities to adjust card spacing and layout 3 min read How to Create a Responsive Layout with React Bootstrap ? Creating a responsive layout with React Bootstrap means designing a web page that adapts and looks good on various screen sizes and devices. React Bootstrap provides responsive components and grid system classes that help in organizing and scaling content effectively, ensuring a seamless user experi 3 min read How to Create Responsive Divs in Bootstrap ? To create responsive divs in Bootstrap, utilize the grid system with container and row classes. Define columns using col classes and specify breakpoints for different screen sizes. This ensures divs adjust their layout and size responsively across devices. Below are the approaches to creating respon 2 min read How to make a Full-width Background in Bootstrap 5 ? Bootstrap 5 has various utility classes through which we can define the full-width background of the application to make the application more interactive. We can set the background to its full width by positioning and sizing the attributes. We will explore two different scenarios where we can make f 3 min read Design a Responsive Card with a Carousel inside it in Bootstrap A responsive carousel displays images or content in a rotating manner, adjusting seamlessly to different screen sizes for optimal viewing experience. In this article, we will create a responsive card with a carousel inside it with the help of Bootstrap5.Preview:ApproachHere we create a Bootstrap car 2 min read How to Create a Responsive Image Gallery in Bootstrap ? An image gallery is like a digital album where we can put our multiple images to attract user attention. We have used Bootstrap a CSS framework for Creating a Responsive Image Gallery where the layout adjusts automatically based on the screen size, ensuring that it looks good on both large desktop s 3 min read Like