How to make this form in bootstrap?

Question

css

Hello, I can’t implement such a layout in any way, does anyone know how?

Answer 1

Hello! Here you go (with bootstrap connected)

<div class="container">
  <div class="row">
    <div class="col-12 col-md-3">
      <div class="avatarBlock">
        <form>
          <input type="checkbox" name="absolute" value=""/>
        </form>
      </div>
    </div>
    <div class="col-12 col-md-8">
      <span>ф.и.о</span>
      <input type="text" name="" value=""/>
      <span>Предмет</span>
      <input type="text" name="" value="" placeholder="Русский и язык литература"/>
      <input type="checkbox" name="" value=""/>
      <span class="teacher">Классный руководитель</span>
    </div>
  </div>
</div>

.avatarBlock {
  width: 150px;
  height: 200px;
  background: #ccc;
  border-radius: 5px;
  position: relative;
}

input[name="absolute"] {
  position: absolute;
  bottom: 5px;
}

input[type="checkbox"] {
  display: block;
}

span {
  display: block;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

input[type="text"] {
  width: 350px;
  border-radius: 3px;
  border: solid 1px #bbb;
  outline: none;
  padding: 10px;
}

.teacher {
  text-transform: none;
  font-weight: 100;
}

Answer 2

Make the format two columns. It's not entirely clear what the problem is