The video keeps shifting out of the second column in the row within the bootstrap layout

I'm having trouble positioning a video within a row on my webpage. I want the video to display as the second column in the row, aligning to the right of the page. However, it keeps appearing below the first column as if it's in a separate row.

Here's the code snippet:

<section class="container-fluid aboutus">
  <div classs="row">
    <div class="col-sm-5">
        <h1>Our Mission</h1> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
        <div class="button">
            <a href="#"><button type="button" class="btn btn-outline-primary btn-lg">Read more</button></a>
        </div>
    </div>

    <div class="col-sm-7 video">
        <div>
            <video autoplay muted loop width="550">
            <source src="video/Markcard.m4v" type="video/mp4" />
        </video> 
        </div>

    </div>
  </div>

</section>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

One issue to address is changing <div classs="row"> to <div class="row">
Another concern is that using col-sm-* will only be effective for small devices, so it's advisable to consider other device sizes as well. In the provided example, col-* was used instead.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<section class="container-fluid aboutus">
  <div class="row">
    <div class="col-5">
        <h1>Our Mission</h1> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
        <div class="button">
            <a href="#"><button type="button" class="btn btn-outline-primary btn-lg">Read more</button></a>
        </div>
    </div>

    <div class="col-7 video">
        <div>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/xcJtL7QggTI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </video> 
        </div>

    </div>
  </div>

</section>

Answer №2

If you're looking to achieve this, utilizing the CSS Flex-Box layout would be the most straightforward method. For those unsure of where to begin, here is a tutorial link that may assist you.

https://www.w3schools.com/css/css3_flexbox.asp

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

Deactivate Date Field for Editing Orders in WooCommerce

Is there a way to deactivate the Date Created textbox on the Edit Orders page of Woocommerce? I attempted to use pointer-events: none; but unfortunately, it did not have any effect. I am seeking a method to disable the Date Created field. https://i.sstat ...

javascriptcsswordpresswoocommerce

What is the best way to keep a bootstrap navbar fixed at the top when scrolling? (It's a bit tricky)

Check out this image of my website header. HERE Is there a way to achieve a smooth scrolling effect for the blue navbar as I scroll down the page? (Specifically just the navbar, excluding the logo and social media elements). Using position:fixed; does ...

javascriptjqueryhtmlcsstwitter-bootstrap

Displaying JavaScript Countdown in PHP Table

I have a database table with multiple fields and I am looking to create a countdown using the integer value from one of the fields (in minutes). How can I loop through and display the countdown for each row in a PHP table utilizing these values, with the a ...

javascriptphphtmldatabase

Is there a way to perfectly align a left-aligned drawable with a hint in a TextInputEditText and position them closer to the bottom of the text input field?

Struggling to align the drawableLeft horizontally with the hint and bring them closer to the bottom of the TextInputEditText. I have experimented with various attributes but haven't been successful so far. Wondering if I might be overlooking something ...

androidcssxmlandroid-layoutmaterial-ui

Burger menu floating above container block element

I have set up a bootstrap container with the following styling: .container { margin-top: 12em; font-family: 'Amatic SC', cursive; border-bottom: 1px solid; border-color: #800000; } The purpose behind this is to have my navigatio ...

csscss-float

Resize a circle upon hovering while keeping the same thickness of the border

I'm working on creating a circle with just a border (no background) that scales on hover. Here's the code I have so far: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link type="text/css" rel="stylesh ...

csscss-transitionscss-transforms

Show using foreach, with a modification of the spacing between rows and columns

For my project, I need to display the same image 24 times with a 3x8 matrix on an A4 size page using a foreach method. The issue I'm encountering is that I have to manually add space between each row and column, but it cannot cause the page to break. ...

htmlcss

Creating a continuous loop in JQuery when clicking on a table row

I seem to be encountering an issue with what appears to be an infinite loop. My problem arises while trying to create a table dynamically using Ajax. Each row of the table contains a button alongside a thumbnail image and some text. I wish for the button ...

javascriptjqueryhtmlajax

Issues encountered with custom themes in ngx-chips (ng2) tag input component configuration

I have searched extensively for a question that has already been answered, but to no avail. I carefully reviewed the description page and followed all instructions provided. Within my Scss folder where custom bootstrap is defined, I proceeded to create a ...

angularbootstrap-4ng2-tag-input

Incorporate the AngularJS controller into your JavaScript code

I am facing an issue with my jQuery UI dialog that contains a dynamic <select> populated with Angular and AJAX. The problem is that the AngularJS script still runs even when the dialog is not visible. To solve this, I added a condition to stop the s ...

javascriptjqueryhtmlajaxangularjs

Is it possible to transfer the data from the previous row's input to the input of a new row?

Greetings to the StackOverflow community, I am currently utilizing a table form with a specific query: Here is an abridged version of my form structure: <script> $('#addrowbutton').click(function() { $('tr:hidden:first').show(); ...

jqueryhtmlforms

Problem with Ajax causing full-page reload

I currently have a webpage that utilizes JqueryUI-Mobile (specifically listview) in conjunction with PHP and some Ajax code. When the page loads initially, it displays a list generated from a MySQL DB. I want this list to refresh itself periodically witho ...

javascriptphpjqueryhtmlajax

Is there a way to make the hoverzoom effect only apply to a specific object instead of all objects?

I'm currently troubleshooting my code in order to implement a hover effect on Mui <cards> when a user hovers over the object. I have managed to make it work partially, but the issue is that the effect gets applied to all objects instead of just ...

javascriptcssreactjsmaterial-ui

Unique rephrased text: "Varied wrapping styles in both

Feeling frustrated with a seemingly commonplace issue. Despite the thousands of times it has been asked before, I can't seem to find an answer on Google. I wanted to neatly display my text within one of my cards, but so far I've only achieved th ...

javascriptcssreactjstextmaterial-ui

Cannot access mobile navigation due to expanded browser search bar

Greetings, all! Currently, as I am in the process of developing a website for my company, I have encountered an issue with the navigation menu, specifically on mobile devices, or more accurately, mobile browsers(most of them). The hamburger icon seems to ...

htmlcssbrowsernavigationbarhamburger-menu

Troubleshooting code: JavaScript not functioning properly with CSS

I am attempting to create a vertical header using JavaScript, CSS, and HTML. However, I am facing an issue with the header height not dynamically adjusting. I believe there might be an error in how I am calling JSS. Code : <style> table, tr, td, t ...

javascripthtmlcss

Printing to the screen with AJAX PHP

Struggling to create a simple ajax code that displays the word 'hello' on the screen. Need some guidance as nothing seems to be working. Any help or corrections are greatly appreciated. Thank you. test6.html <script src="https://ajax.goo ...

javascriptphpjqueryhtmlajax

Efficiently aligning divs within a container using Bootstrap 5 without altering the overall layout

I've been trying to figure out a solution to this issue, but so far nothing seems to work. I'm working on creating some general components for a system using Bootstrap 5. I've defined a button like this: <div class="col buttonDiv&quo ...

htmlcssbootstrap-5

Issues with rendering AngularJS onto an HTML page are currently being experienced

I was attempting to learn AngularJs in order to improve my front-end development skills, but unfortunately I ran into some issues. Despite following the video tutorials on their site step by step, I couldn't get it to render correctly. Here's the ...

javascripthtmlangularjs

Ways to specifically load a script for Firefox browsers

How can I load a script file specifically for FireFox? For example: <script src="js/script.js"></script> <script src="js/scriptFF.js"></script> - is this only for Firefox?? UPDATE This is how I did it: <script> if($. ...

javascriptjqueryhtml