Чтобы сделать текст на картинке в Bootstrap 4/5, можно использовать различные методы, включая использование классов Bootstrap и CSS стилей.
1. Используйте классы Bootstrap для размещения текста на изображении:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="position-relative">
<img src="image.jpg" class="img-fluid" alt="Картинка">
<div class="position-absolute top-50 start-50 translate-middle">
<h2>Текст на картинке</h2>
</div>
</div>
</div>
</div>
</div>
В данном примере используются классы position-relative, position-absolute, top-50, start-50, translate-middle, чтобы разместить текст по центру картинки. Класс top-50 размещает элемент на вертикальном центре, а класс start-50 и translate-middle размещают элемент на горизонтальном центре картинки.
2. Используйте CSS стили для настройки позиционирования текста на картинке:
<style>
.img-container {
position: relative;
}
.img-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="img-container">
<img src="image.jpg" class="img-fluid" alt="Картинка">
<div class="img-text">
<h2>Текст на картинке</h2>
</div>
</div>
</div>
</div>
</div>
В этом примере, создается собственный CSS класс .img-container, чтобы установить позицию относительно для контейнера с изображением, и CSS класс .img-text для настройки позиционирования и стилей текста на картинке. Конкретные значения top, left и transform в CSS классе .img-text могут быть изменены по вашему выбору для получения желаемого эффекта.
Оба этих подхода позволяют размещать текст на картинке в Bootstrap 4 и Bootstrap 5. Вы можете изменять стили и классы по своему усмотрению, чтобы получить желаемый внешний вид и расположение текста на картинке.