Фигурес

Документација и примери за приказивање повезаних слика и текста са компонентом фигуре у Боотстрапу.

На овој страници

Сваки пут када треба да прикажете део садржаја—попут слике са опционалним натписом, размислите о коришћењу <figure>.

Користите укључене .figureи класе .figure-imgда .figure-captionбисте обезбедили неке основне стилове за ХТМЛ5 <figure>и <figcaption>елементе. Слике у сликама немају експлицитну величину, па обавезно додајте .img-fluidкласу у своју <img>да би она била прилагодљива.

Наслов за горњу слику.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Поравнавање натписа слике је лако помоћу наших текстуалних услужних програма .

Наслов за горњу слику.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

Сасс

Променљиве

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;