Чтобы разместить картинку слева от текста с использованием Bootstrap, можно использовать классы для сетки и для изображений.
- Создайте контейнер для содержимого страницы, используя класс
.container
или.container-fluid
. - Внутри контейнера добавьте ряд (row) с помощью класса
.row
. - В данном ряду создайте две колонки: одну для изображения и другую для текста. Для этого добавьте классы
.col-*-*
к каждой колонке. Например,.col-md-4
для изображения и.col-md-8
для текста. Размеры колонок (md
,lg
,sm
,xs
) можно настроить в соответствии с вашими потребностями. - В первую колонку добавьте изображение, используя тег
<img>
. Укажите путь к изображению в атрибутеsrc
, а также добавьте необходимые стили, если требуется. - Во вторую колонку добавьте текст, который должен быть размещен справа от изображения.
- Закройте все теги, поставив
</div>
для ряда и контейнера.
Примерный код будет выглядеть следующим образом:
<div class="container"> <div class="row"> <div class="col-md-4"> <img src="path/to/image.jpg" alt="Изображение"> </div> <div class="col-md-8"> <p>Здесь должен быть ваш текст, который будет размещен справа от изображения.</p> </div> </div> </div>
Обратите внимание, что Bootstrap использует сетку на основе 12-ти колонок. В приведенном выше примере, изображение будет занимать 4 колонки, а текст - 8 колонок.
При помощи стилей и настройки классов .col-*-*
, можно изменять размеры и порядок колонок для достижения желаемого вида разметки.