What is the best way to eliminate the empty space at the bottom of my Bootstrap site?

Help needed with my Bootstrap webpage! I'm encountering an issue where there is a 5px gap at the bottom of my page that I can't seem to get rid of. I've tried adjusting the margins and padding to no avail. Any suggestions on how to fix this problem?

Edit: Here's the code snippet in question:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body style="width: 100%">
    <video style="width: 100%" id="player-video">
        <source src="intro.mp4" type="video/mp4">
    </video>

    <script src="jquery/jquery-3.4.1.slim.min.js"></script>
    <script src="popper/popper.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Adding the display:flex and height: 100% properties to your video tag can help fill any unallocated white space. In my demonstration, this solution worked perfectly.

If this does not resolve the issue, please inform me.

It is important to note that I utilized Bootstrap in the demo folder.

 <video style="width: 100%; display: flex; height: 100%;" id="player-video">
        <source src="3. create-react-app.mp4" autoplay type="video/mp4">
    </video>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize the appearance of a <label> tag when it is inside an <input> tag that is marked as invalid

In an ideal scenario, I wish for the text on a label to change color when the input value is considered invalid. For instance: <form> <label> Enter your name: <input type="text"> </label> </form> Ideall ...

htmlcsscss-selectors

Images added with JavaScript are not displaying on the webpage

On the website I'm working on, I am attempting to use Javascript to insert an image. My method involves using createElement and setAttribute to specify the image location in my file directory. Below is a snippet of the code I've been using: var l ...

javascripthtml

Try utilizing the adjacency selector in Less again

Is it feasible to repeat this pattern an unlimited number of times using Less with the provided CSS selectors? I've been looking into using loops, however, I haven't come across any examples that achieve a similar result. .page-section { ba ...

cssless

Using Bootstrap's collapse class with a smooth linear transition

I've been attempting to implement Bootstrap collapse with a linear effect, but have been encountering challenges. After trying different versions of Bootstrap, I found that the transitions were quite similar. I decided to go with the latest version av ...

htmlcssbootstrap-4

Issue with making Bootstrap 4 images responsive using the img-fluid class

My latest project involved creating a login page using a bootstrap grid. I designated the image to span col-lg-8 and the form col-lg-4. However, I encountered an issue when resizing the screen for smaller devices. Despite applying img-fluid to the image, i ...

htmlbootstrap-4

issue with selecting tabs in jquery

I need help with a problem that is connected to my previous article on CSS, button selection, and HTML tags. You can find the article here. I am not very proficient in JavaScript, so I would appreciate any insights or guidance on how to tackle this issue. ...

javascriptasp.nethtml

Creating a new project in ASP Net Core Angular using Bootstrap 4 for the SideMenu layout instead of Bootstrap 3

I am currently working on developing a website using Angular6, where I aim to have a vertical navbar for large screens and a top navbar with dropdown functionality for mobile devices. While searching online, I came across several examples that seemed overl ...

htmlcssangulartwitter-bootstrap

Execute the JavaScript [ window:print() ] function once the webpage has finished loading along with any

I am facing an issue with my web page that has around 10 Google Analytics charts. I want to trigger a print dialog box once the page is fully loaded, including all the charts and JavaScript. Currently, the problem is that the print dialog box opens after t ...

javascriptjqueryhtmlprintinggoogle-analytics

Is it possible to utilize a single router link to run two forms concurrently within one setup?

I am trying to achieve a specific functionality with my two Angular forms. One form has just two fields, and when I click on one field, it should redirect me to the other form. The second form contains detailed information related to the field from the f ...

htmlangularjs

What is the best way to align and adjust the position?

I'm attempting to attach a button to a page. I may not be an expert, but here's what I have so far: body { width:100%; height:100%; background:#181516; overflow:hidden; position:absolute; } .bg { background:url(../im ...

cssbuttoncenter

Activate Pop-up for a single instance on BigCommerce

After researching and adding my own code, I am still struggling to get this question answered correctly. Here are the key points I am trying to achieve: 1. Automatically open a popup when the homepage loads. 2. Ensure that the popup is centered on all brow ...

javascriptjqueryhtml

Bootstrap 5's gutter-x class is causing alignment issues with divs

My div alignment is getting thrown off due to the default .row class. The margin_left and right call it includes add gutters that cause borders to overlap my div. Although I have disabled gutters in this particular element, it leads to problems elsewhere o ...

htmltwitter-bootstrapbootstrap-5

Getting rid of background color in a tooltip using Material UI

I'm currently tackling an issue with Material UI's tooltip. I can't seem to find a way to make the background of the tooltip completely transparent. By default, it displays with a grey background and white text. Changing the background color ...

javascriptcssreactjsmaterial-ui

Adding dynamic content to CSS in Next.JS can be achieved by utilizing CSS-in-JS

Currently diving into the world of Next.JS, I've managed to grasp the concept of using getStaticProps to retrieve dynamic data from a headless CMS and integrate it into my JSX templates. However, I'm unsure about how to utilize this dynamic conte ...

cssnext.js

What is the best way to retrieve the value of the selected mat-option?

I've been struggling to extract the selected value of a mat-option using this specific HTML and TypeScript code. html <mat-form-field appearance="outline" floatLabel="always"> <mat-label>TRA Type</mat-label> ...

htmlangulartypescriptangular-materialfrontend

A three-argument function designed for generating a prepend element

Hey everyone, this is my first time asking a question on this platform, so bear with me if I sound a bit off. I'm currently diving into the world of Javascript and I recently attempted to create a function with 3 arguments: the parent element, the ele ...

javascripthtmldom

Repairing a CSS file for Internet Explorer versions 7, 8, and 9

Does anyone have experience with troubleshooting HTML5 CSS3 layouts across different browsers? I recently created a website layout from scratch that looks perfect in Firefox 5, Safari 5.1 and Chrome 12 on Mac. However, when using tools like Adobe BrowserL ...

internet-explorerhtmlcss

What is a way to leverage the array or object data within the method object in order to reference the specific link in VUEJS?

How do I utilize the "LINK" property in the methods object? You might be able to infer my intentions, but just in case, here's what I'm aiming for: In Vue.js, I am attempting to extract all the data from the Data method's object so that I ...

javascripthtmlvue.js

Problem encountered when trying to apply background opacity to custom colors using Tailwind CSS and shadcn/ui

While using Tailwind CSS along with the shadcn/ui library for styling buttons, I have encountered an unexpected behavior. The issue arises when trying to add background opacity to a custom color defined in globals.css using HSL values such as: --primary: 3 ...

javascriptcssreactjstailwind-csstailwind-ui

What is the best approach to reverse the selection of <li> elements by utilizing :not() and :contains

I am looking to implement a live search feature using jQuery. Below is the code snippet I have written: $("#searchInput").on("keyup", function () { var searchTerm = $("#searchInput").val(); $('li:contains("' + searchTerm + ' ...

javascriptjquerycss