Чтобы разместить картинку слева от текста с использованием Bootstrap, можно использовать классы для сетки и для изображений.
1. Создайте контейнер для содержимого страницы, используя класс .container
или .container-fluid
.
2. Внутри контейнера добавьте ряд (row) с помощью класса .row
.
3. В данном ряду создайте две колонки: одну для изображения и другую для текста. Для этого добавьте классы .col-*-*
к каждой колонке. Например, .col-md-4
для изображения и .col-md-8
для текста. Размеры колонок (md
, lg
, sm
, xs
) можно настроить в соответствии с вашими потребностями.
4. В первую колонку добавьте изображение, используя тег <img>
. Укажите путь к изображению в атрибуте src
, а также добавьте необходимые стили, если требуется.
5. Во вторую колонку добавьте текст, который должен быть размещен справа от изображения.
6. Закройте все теги, поставив </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-*-*
, можно изменять размеры и порядок колонок для достижения желаемого вида разметки.