Фигури

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

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

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

<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

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

<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>