CODEWITHSUNDEEP
cssangular-ui-bootstrap
Rexam
Rexam

Reputation: 913

Display input fields next to image

I have an image 300x300 px displayed on the left side of my webpage and just next to it I would like to display two rows of input fields. I'm using Bootstrap and this is causing problems with the column notation when I try to put my rows at the side of the image.

For example, I tried to use display:inline-block; and, even if it worked fine, the input fields were not expanding to the margin, up to the end of the row.

Is anybody able to help?

Here's my (clean) code:

<label for="profile-pic">
   <input type="file" id="profile-pic" ... />
   <img [src]="profilePic" class="pr-4 pb-4" height="300" width="300" style="cursor:pointer"/> 
</label>

<button
   type="button"
   class="btn btn-danger mb-3"
   style="width: 280px;"
   (click)="..."
>
Delete image
</button>

<div class="row">
   <div class="form-group col-12">
      <label for="email">E-mail</label>
      <input type="email" class="form-control" id="email" name="email">
   </div>
</div>

<div class="row">
   <div class="form-group col-12 col-md-4">
     <label for="name">Name</label>
     <input type="text" class="form-control" id="name" name="name">
   </div>

   <div class="form-group col-12 col-md-4">
    <label for="lastName">Last Name</label>
    <input type="text" class="form-control" id="lastName" name="lastName">
  </div>

  <div class="form-group col-12 col-md-4">
    <label for="surname">Surname</label>
    <input type="text" class="form-control" id="surname" name="surname">
  </div>
</div>

The layout I would like to have should look more or less like in the following image:

enter image description here

The button you see in my code should be placed on the left, directly down the image instead.

Upvotes: 1

Views: 614

Answers (2)

Sai Manoj
Sai Manoj

Reputation: 3859

You can achieve this by using bootstrap classes col-**

.form-group {
  margin-bottom: 0!important;
}

To set equal height column
/* .row {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      flex-wrap: wrap;
    }

    .row>[class*='col-'] {
      display: flex;
      flex-direction: column;
    } */
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-4 text-center">

        <img src="https://via.placeholder.com/300x300" class="img-fluid"><br>
        <button type="button" class="btn btn-danger mb-3" style="width: 100%;margin-top:5px" (click)="...">
          Delete image
        </button>

      </div>
      <div class="col-8">

        <div class="row">
          <div class="form-group col-12">
            <label for="email">E-mail</label>
            <input type="email" class="form-control" id="email" name="email">
          </div>
          <div class="form-group col-4 ">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" name="name">
          </div>

          <div class="form-group col-4 ">
            <label for="lastName">Last Name</label>
            <input type="text" class="form-control" id="lastName" name="lastName">
          </div>

          <div class="form-group col-4 ">
            <label for="surname">Surname</label>
            <input type="text" class="form-control" id="surname" name="surname">
          </div>

        </div>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 2

Stefan Joseph
Stefan Joseph

Reputation: 555

Try using display: flex;. It's much easier to handle alignment that way. Hope this test code helps you

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.email-container {
  border: 3px solid black;
  padding: 10px;
  margin-bottom: 20px;
  text-align: center;
}

.name-container {
  border: 3px solid black;
  padding: 10px;
}

.mr-2 {
  margin-right: 0.5rem;
}

.justify-content-center {
      justify-content: center;
}
<div class="d-flex flex-row justify-content-center">
  <div class="image-container mr-2">
    <img src="https://via.placeholder.com/300x300">
  </div>
  <div class="d-flex flex-column">
    <div class="email-container">
      Email
    </div>
    <div class="d-flex flex-row">
      <div class="name-container mr-2">
        Name
      </div>
      <div class="name-container mr-2">
        Last Name
      </div>
      <div class="name-container">
        Surname
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions