Login form in Bootstrap - Get img in right position

1

Hi coders,

Today I started to create a login form with Bootstrap and I have a problem with my form.
I can’t put the image on the right side of the container and in modifying the container with flex, the input boxes have shrunk.
The image is not there because Codepen does not allow me to put the images.
how can i have the login form on the left and the image on the right inside the container?

autodraw%201_8_2020
autodraw%201_8_20201309×1143 48.1 KB

Link below:
https://codepen.io/camilco/pen/vYEdQrw?editors=1010

(Sorry for my bad sketch :sweat_smile:)

2

Hello,

If you’re using Bootstrap, why not use columns to layout the form?

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<form>
  <div class="container">
    <div class="row">
      <h3 class="title">
        Login
      </h3>
    </div>
    <div class="row">
      <div class="col">
        <div class="form-group">
          <label>User</label>
          <input type="text" class="form-control" placeholder="User" />
        </div>
        <div class="form-group">
          <label>Password</label>
          <input type="password" class="form-control" placeholder="Password" />
        </div>
      </div>
      <div class="col d-flex justify-content-center">
        <img class="img-fluid mx-auto d-block" src="https:/uploads/default/original/3X/4/c/4c06248fcb7353707abcde9f10fc43a5fb6748db.svg" style="background-color: black" />
      </div>
    </div>
  </div>
</form>

See the result here.

3

Thanks @skaparate, It is just what I was looking for

1 Like
4

Hey camcode,
I noticed you are using col-sm-8 so excessively that is preventing width to proper form. `
Replace your HTML with this :

`<!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">
    <title> Check2Check </title>
  </head>
  <body>
    <div class="container">
      <h1 class= "text-center">Login</h1>
      <div class="d-flex c-container">
        <div class="row">
          <div class="col">
        <!-- Start form --> 
         <form>
           <div class="form-group centered">
             
               <!--Email-->
             <label for="email1">Email Address</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>
             <!--Password-->        
           <div class="form-group centered">
             
             <label for="password1">Password</label>
             <input type="password" class="form-control" id="password1" placeholder="Password">
             
           
             
             </div>
           <button type="submit" class="btn btn-info">Submit</button>
           </div>
           
         </form>
      </div>
    </div> 
      
        <div class="col-sm-4">         
          <img src="#" class="img-fluid" alt="login-image">
        </div>
      </div>
      </div>
      <!--Footer-->
      <br>
         <p class="text-center">Made with <i class="fa fa-heart-o text-danger"></i></p>
    
   
  </body>
</html>`

I hope that helps :slight_smile:

1 Like
5

Hey @camcode, love the sketch, definitely helpful and much better than anything I could have drawn :sweat_smile:

There are three things you need to change here:

  1. Most importantly, the Bootstrap grid system (containers, row, columns) have 12 columns. You currently have your two column elements set to .col-8, so they can never fit on the same line. Try .col-6 instead.

  2. You should put the .col-6 elements in the same .row element. Currently they are in two separate ones. Again, without this change, they will always end up on different lines.

  3. Remove .d-flex the .d-flex.c-container div. By setting that inner container to flex, you’re also setting the default properties justify-content and align-items to “justify-content: flex-start; align-items: stretch”, which is really what is making your layout behave so unexpectedly.

2 Likes