Bootstrap изображение слева от целого div

Question

Итак, я хотел бы получить что-то вроде этого (где изображение слева от текста):

Обратите внимание, что при запуске примера откройте его с «полной страницей»

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <div class="container">
    <div class="row">
      <div class="col-1">
        <img src="https://via.placeholder.com/50">
       </div>
      <div class="col-11">
       <h1>some title</h1><p>Some Paragrah</p><p>Other Paragraph</p>
      </div>
    </div>
    </div>

Если вы откроете полную страницу этого примера, вы заметите, что между изображением и остальным содержимым есть некоторый запас. Я бы хотел, чтобы у не было поля между изображением и текстом справа.

Как я могу это сделать?

Я пытался использовать float-left, но с плавающий текст, который переполняет высоту, идет под изображением, и я хочу, чтобы весь текст был справа.

Желаемый вывод

Answer 1

Поскольку вы используете Bootstrap -4, как насчет использования flex классов для вашего случая использования ...

рабочий фрагмент ниже:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="d-flex mb-3">
    <div class="p-2 ">
      <img src="https://via.placeholder.com/50">
    </div>
    <div class="p-2 flex-grow-1 ">
      <h1>some title</h1>
      <p>Some Paragrah</p>
      <p>Other Paragraph</p>
    </div>
  </div>
</div>

Answer 2

Я отвечу сам, так как думаю, что нашел более простое решение: просто используйте .no-gutters, чтобы убрать любое поле между столбцами:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <div class="container">
    <div class="row no-gutters">
      <div class="col-1">
        <img src="https://via.placeholder.com/50">
       </div>
      <div class="col-11">
       <h1>some title</h1><p>Some Paragrah</p><p>Other Paragraph</p>
      </div>
    </div>
    </div>