Source

Фигури

Документация и примери за показване на свързани изображения и текст с фигурния компонент в Bootstrap.

Всеки път, когато трябва да покажете част от съдържанието - като изображение с незадължителен надпис, помислете за използването на <figure>.

Използвайте включените .figureи класове, .figure-imgза .figure-captionда предоставите някои основни стилове за HTML5 <figure>и <figcaption>елементи. Изображенията във фигурите нямат явен размер, така че не забравяйте да добавите .img-fluidкласа към вашия <img>, за да го направите отзивчив.

Placeholder 400x300
Надпис за горното изображение. 
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Подравняването на надписа на фигурата е лесно с нашите текстови помощни програми .

Placeholder 400x300
Надпис за горното изображение. 
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>