Align the video element to the top left corner using Bootstrap 4

Just getting started with bootstrap and css. I'm trying to insert a video element into a row class and want it to be positioned at the top left of the row without any margins. Currently, the video is centered vertically with space above it.

Ideally, I would like the row's height to match that of the video element. Any suggestions or tips would be appreciated.

<div class="container">
    <div class="row" style="height: 100%;">
        <video id="video1" autoplay muted style="width:70%;border:2px;position: relative;top: 0%;"></video>
    </div>
</div>
cssbootstrap-4

Answer №1

Check out this HTML code snippet

#video1{background:green;}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row p-0" style="height: 100%;">
        <video id="video1" autoplay muted style="width:70%;border:2px;position: relative;top: 0%;"></video>
    </div>
</div>

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

The :first selector examines the parent's parent as a reference point, rather than the immediate

I am facing a challenge with shuffling large elements within my layout because of floating them and attempting to display them. Specifically, the elements with the class .gallery-large always need to be the first child inside the .item container. There are ...

javascriptjqueryhtmlcss

The :empty selector is failing to function properly in @media print queries

Currently, I am working in Twig on Symphony and have encountered an issue with an empty div that needs to be hidden in print mode. <div class="form-fields__list"> </div> Surprisingly, the :empty selector works perfectly fine on the screen, bu ...

cssprintingmedia-queriesselector

IE8 experiencing issues with colgroup tag

Having trouble styling a data table with alternating row colors. 1) Need help applying alternating row style without having to add classes to each individual TD? 2) Colgroup works in IE8 but having alignment issues for specific columns (cols=A&SI Cap ...

htmlcsscross-browsercolgroup

Implement a full-width dropdown menu with Bootstrap 4

Hey guys, I'm having a real head-scratcher here. I've created a dropdown menu using Bootstrap 4, but I'm having trouble making it responsive for mobile screens. I've tried using media queries to make the dropdown menu occupy 100% width ...

htmlcssbootstrap-4angular9

What is the best way to arrange <div> elements with text inside without moving the text?

I need help figuring out how to stack one or more <div> elements on top of another <div> element while maintaining the text content within each. My issue is illustrated in this fiddle: https://jsfiddle.net/rd268ucy/1/. When attempting to drag o ...

javascripthtmlcss

Is it possible to specify at what point the bootstrap dropdown should convert to a dropup instead?

I have noticed that the bootstrap 4 dropdown transitions to a dropup when there is not enough space at the bottom of the browser window. Is there a way to modify this behavior so that it changes to a dropup when it's, for example, 150px away from the ...

bootstrap-4dropdown

Trouble with CSS loading due to div in Visual Studio MVC

Currently, I am working with Visual Studio 2013 MVC and have a situation regarding the styling of my navbar in _Layout. The navbar includes a messages dropdown menu that utilizes CSS and JS extensively. Interestingly, when I load the messages as a partial ...

javascriptjquerycssrazormodel-view-controller

Issues with absolutely positioned slideshows

Currently, I am attempting to design a slideshow using absolute positioning to layer images on top of each other. However, I am encountering a problem where the text below the slideshow is also being stacked on top of the pictures. I have tried enclosing t ...

htmlcsscss-position

Creating a custom design for a dropdown menu in the Bootstrap navbar

My Bootstrap navbar has a unique color scheme for the navbar itself and the letters, as indicated in the following CSS: .jumbotron { background-color:#2d4c60 !important; } nav.navbar { background-color: #2d4c60; } .nav.navbar-nav.navbar-ri ...

htmlcsstwitter-bootstrapbootstrap-4

Responsive design with Bootstrap grids

In the current 3 column layout, as the browser window size decreases, the columns stack in the order of first, second, and third. However, I want the behavior to change so that when the columns get smaller, they stack in a different order. First - This ...

htmlbootstrap-4

Correcting the 1 pixel spacing issue in 3 containers each with a width of 33.333%

It is difficult to articulate, but I am noticing a 1 pixel line with 3 containers each having a width of 33.3333%. Unfortunately, this is not something I can change as it is part of the material-ui framework. <div class="container"> <div clas ...

cssmaterial-ui

Guide on changing the CSS of MUI parent components to set the display of buttons to 'block' in React

I'm facing a challenge with my modal design for mobile view. I need the buttons to display in a stacked format, one above the other, taking up the full width of the modal. I've been exploring ways to override the existing CSS within the component ...

javascriptcssreactjsmaterial-ui

Type content in HTML5

Can you help me with a simple question? I am currently working on building my portfolio using html https://i.stack.imgur.com/rxYRS.png I want to be able to click on an image and add the description of my choice. Right now, it is showing something else: ...

csshtmlproject

Adding a box shadow around the entire div in Internet Explorer 11 with CSS

I am having difficulty applying box-shadow to create a shadow around the entire perimeter of a div. While it works in FireFox, it does not work in IE 11. So far, I have attempted solutions from this StackOverflow thread. For reference, here is a JSFiddle ...

htmlcssinternet-explorer

"What is the significance of the .default property in scss modules when used with typescript

When dealing with scss modules in a TypeScript environment, my modules are saved within a property named default. Button-styles.scss .button { background-color: black; } index.tsx import * as React from 'react'; import * as styles from ' ...

cssreactjstypescriptsassstorybook

The integration of jQuery in PHP is experiencing some technical challenges

There's one issue driving me crazy: I created a left-floating file tree view and included it in my website. However, when I include my website in the file treeview, it becomes unclickable in Chrome, and in IE 9, the thumbnail part for viewing PDF docu ...

phpjquerycss

Placing a small image on top of multiple images using CSS

I am facing a CSS issue and I need help with positioning a small image (using position absolute) like a warranty badge on top of larger images. The challenge is to ensure that the badge is fixed at the bottom left corner of each image, despite variations ...

javascriptcss

Modification of window size using jQuery animations

Currently, I am working on creating a sidebar that slides in from the left side of the screen. To achieve this effect, I have set the menu element to float left with a width of 40% and a margin-left of -40%. However, when I try to reveal the sidebar by sw ...

javascriptjqueryhtmlcss

The Angular formGroup isn't activating the radio button as expected

Hey there! I'm currently working on react forms within Angular. My goal is to have two radio buttons selected based on the true/false status in the database. When the variable viernesOk is set to true, everything works perfectly (the "SI" radio butto ...

angularformsbootstrap-4angular-materialradio-button

Ensuring the input field and button are positioned in a horizontal line

Currently, I am developing a to-do list application using React and Chakra UI. I am trying to align the input field and the button on the same line for a more organized layout. This is the current layout: image I aim to achieve a design similar to this: ...

javascriptcssreactjschakra-uireact-icons