Resize image in Login page - Bootstrap

Hi coders,
thanks for your help yesterday with login page, now I have another problem with resize my image inside container.
This is my HTML -Bootstrap:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--CSS CDN-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!--Fontawesome-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./style.css"> 
    <title> Check2Check </title>
  </head>
  <body>
     <!-- Start form --> 
    <form>
    <div class="container">
      
      <h2 class="text-center">Login</h2>
      
 <div class="form-group">
   <div class="row">
     <div class="col-6">
<!--Email-->
<label for="email1">Email andress</label>
   <input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="Enter email">
          
               <!--   <small id="emailHelp" class="form-text text-muted">Your information is safe with us.</small>-->           </div>
   </div>
      </div>
 <!--Password-->        
 <div class="form-group">
   <div class="row">
     <div class="col-6">
 <label for="password1">Password</label>
             <input type="password" class="form-control" id="password1" placeholder="Password">
             </div>
           </div>
      </div>
       <div class="form-group">
         <div class="row">
           <div class="col-6 d-flex justify-content-center">
         
            <button type="submit" class="btn btn-outline-primary btn-lg">Log in</button>
           </div>
           </div>
        </div>
      <div class="row">
       <div class="col d-flex flex-row justify-content-end">
         <img src="C:\Users\camilla.arena\Downloads\micah-williams-lmFJOx7hPc4-unsplash.jpg" alt="Login img"/></div>
      </div>
      </div>
    </form>
      <!--Footer-->
      <br>
         <p class="text-center">Made with <i class="fa fa-heart-o text-danger"></i></p>
   
  </body>
</html>


and my CSS file:

 h2{
   margin: 0 0 15px;
}

.container{
  margin: 6rem 6rem;
  box-sizing: content-box;
  background-color:#F5F7FA;
  padding: 4rem 4rem;
}

.centered{
  display:flex;
  align-items:center;
  justify-content: center;
}



img{
  top: 0px; 
  right: 4em;
  width: 50px;
  height: 50px;
	
}

I have try to insert different size in img selector in my CSS file but doesn’t work.
You can find a capture login and link to Codepen if you need to modify:

https://codepen.io/camilco/pen/vYEdQrw

Thanks,
CamCode

Hello I dont know,if this help but i make a change to your Login Page:
HTML =

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--CSS CDN-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!--Fontawesome-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./style.css"> 
    <title> Check2Check </title>
  </head>
  <body>
     <!-- Start form --> 
    <form>
    <div class="container">
      <div class="col-md-12 centered">
        <img src="C:\Users\camilla.arena\Downloads\micah-williams-lmFJOx7hPc4-unsplash.jpg" alt="Login img"/>
 </div>
 <div class="form-group">
   <div class="row centered">
     <div class="col-6">
<!--Email-->
<label for="email1">Email andress</label>
   <input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="Enter email">
          
               <!--   <small id="emailHelp" class="form-text text-muted">Your information is safe with us.</small>-->           </div>
   </div>
      </div>
 <!--Password-->        
 <div class="form-group">
   <div class="row centered">
     <div class="col-6">
 <label for="password1">Password</label>
             <input type="password" class="form-control" id="password1" placeholder="Password">
             </div>
           </div>
      </div>
       <div class="form-group centered">
         <div class="row ">
           <div class="col-12 ">
         
            <button type="submit" class="btn btn-outline-primary btn-lg">Log in</button>
           </div>
           </div>
        </div>
      <div class="row">
       <div class="col-md-12 centered">
       </div>
      </div>
      </div>
    </form>
      <!--Footer-->
      <br>
         <p class="text-center">Made with <i class="fa fa-heart-o text-danger"></i></p>
   
  </body>
</html>

And The CSS is still same.Tell me If this is not you want.
Keep Trying :slight_smile:

1 Like

Thanks for your help!!!
is there a way to better position the image in bootstrap?

yes,you can use “text-center” properties.Just like this

<div class="text-center">
        <img src="C:\Users\camilla.arena\Downloads\micah-williams-lmFJOx7hPc4-unsplash.jpg" alt="Login img"/>
</div>