Bootstrap, Image on half screen text on the right-CodePudding

I'm busy working on a login view and have loaded a background image which fills up half of the screen. I'm now trying to add some labels and input boxes but I want them on the right hand side of the screen. So basically I have a pic on the left of the screen and then the login detail on the right side of the screen. Everyting I add now comes below my background image and not to the right of it and cant quite figure out what I'm doing wrong. Any help with this will be much appreciated.

Here is the code I'm testing and practacing with

<form id="account" method="post">
    <div >
        <div  
                style="background-image: url('/images/LoginLogoNew.jpg');
                    height: 100vh; width: 120vh; margin-left:-350px; margin-top:-100px; background-repeat:no-repeat; margin-bottom:44px">
        </div>
    </div>
    <div >
        <input asp-for="Input.Email"  autocomplete="username" aria-required="true" />
        <label asp-for="Input.Email" ></label>
        <span asp-validation-for="Input.Email" ></span>
    </div>
</form>

many thanks

CodePudding user response：

Your .col-6's won't work if their parent is does not have a class of .row

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <img  style="object-fit: cover" src="https://picsum.photos/500" alt="random image">
      </div>
    </div>
    <div >
      <form  id="account" method="post">
        <h1>This is a form</h1>
        <label asp-for="Input.Email" >Email address</label>
        <input asp-for="Input.Email"  autocomplete="username" aria-required="true" />
        <span asp-validation-for="Input.Email" ></span>
        <input type="submit"  value="submit">
      </form>
    </div>
  </div>
</div>