Как сверстать такую форму?

Помогите сверстать такую форму
Изображения:

Комментарии: 1

Александр Мальцев
Александр Мальцев
С помощью Bootstrap это можно сверстать так:
<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <title>Example</title>
</head>
<body>

  <header class="bg-secondary mb-5">
    <div class="container-fluid d-flex align-items-center">
      <img src="https://via.placeholder.com/150X50" alt="Маленькая картинка">
      <h1 class="h4 text-light font-weight-light ml-3 mb-0">Название</h1>
    </div>
  </header>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-4 col-lg-3">
        <form>
          <div class="form-group row">
            <label for="length" class="col-sm-5 col-md-4 col-lg-3 col-form-label">Длина</label>
            <div class="col-sm-7 col-md-8 col-lg-9">
              <input type="type" class="form-control" name="length" id="length">
            </div>
          </div>
          <div class="form-group row">
            <label for="length" class="col-sm-5 col-md-4 col-lg-3 col-form-label">Ширина</label>
            <div class="col-sm-7 col-md-8 col-lg-9">
              <input type="type" class="form-control" name="length" id="length">
            </div>
          </div>
          <div class="form-group row">
            <label for="length" class="col-sm-5 col-md-4 col-lg-3 col-form-label">Высота</label>
            <div class="col-sm-7 col-md-8 col-lg-9">
              <input type="type" class="form-control" name="length" id="length">
            </div>
          </div>
          <div class="form-group mt-5">
            <button type="button" class="btn btn-primary">Кнопка</button>
          </div>
          <div class="form-group">
            <button type="button" class="btn btn-primary">Кнопка</button>
          </div>
        </form>
      </div>
      <div class="col-sm-6 col-lg-7">
        <div class="bg-light" style="height: 500px;"></div>
      </div>
      <div class="col-sm-2">
        <div class="form-group form-check">
          <input type="checkbox" class="form-check-input" id="check-box-2" checked>
          <label class="form-check-label" for="check-box-2"></label>
        </div>
        <div class="form-group form-check">
          <input type="checkbox" class="form-check-input" id="check-box-2">
          <label class="form-check-label" for="check-box-2"></label>
        </div>
        <div class="form-group form-check">
          <input type="checkbox" class="form-check-input" id="check-box-3">
          <label class="form-check-label" for="check-box-3"></label>
        </div>
        <div class="form-group form-check">
          <input type="checkbox" class="form-check-input" id="check-box-4">
          <label class="form-check-label" for="check-box-4"></label>
        </div>
        <div class="form-group form-check">
          <input type="checkbox" class="form-check-input" id="check-box-5" checked>
          <label class="form-check-label" for="check-box-5"></label>
        </div>
      </div>
    </div>
  </div>

</body>
</html>