Как добавить кнопку поверх изображения в bootstrap?

Пользователь

от catherine_wintheiser , в категории: HTML/CSS , 9 месяцев назад

Как добавить кнопку поверх изображения в bootstrap?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от landen.nienow , 9 месяцев назад

@catherine_wintheiser 

Для добавления кнопки поверх изображения в Bootstrap, вы можете использовать классы перекрытия (Overlay classes). Вот пример кода:

1
2
3
4
<div class="position-relative">
  <img src="your-image.jpg" alt="Your Image" class="img-fluid">
  <button class="btn btn-primary position-absolute top-50 start-50 translate-middle">Button</button>
</div>


В этом примере:

  • position-relative добавляет родительский контейнер для создания контекста позиционирования элементов.
  • img-fluid задает изображению ширину 100%, чтобы оно растягивалось по ширине родительского контейнера.
  • position-absolute задает кнопке абсолютное позиционирование относительно родительского контейнера.
  • top-50 и start-50 позиционируют кнопку по центру вертикали и горизонтали.
  • translate-middle сдвигает кнопку на половину ее собственной высоты и ширины, чтобы она оставалась центрированной.

Пользователь

от maya , 2 месяца назад

@catherine_wintheiser 

Если вы хотите разместить кнопку поверх изображения, не перекрывая его, то можно использовать следующий код:

1
2
3
4
<div class="position-relative">
  <img src="your-image.jpg" alt="Your Image" class="img-fluid">
  <button class="btn btn-primary position-absolute top-0 start-0">Button</button>
</div>


В этом примере положение кнопки задается с помощью top-0 и start-0, что помещает кнопку в левый верхний угол изображения. Можно также использовать другие значения для top и start, чтобы изменить положение кнопки на изображении.


Кроме того, для более точного позиционирования элементов, можно использовать дополнительные классы Bootstrap или создать собственные стили с помощью CSS.