Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Images & figures

Image styles and figure component for displaying images and text.

Bootstrap docs

## Image shapes

    <!-- Square image (default) -->
    <img src="assets/img/team/01.jpg" alt="Square image">

    <!-- Rounded image -->
    <img src="assets/img/team/02.jpg" class="rounded-3" alt="Rounded image">

    <!-- Circle image -->
    <img src="assets/img/team/03.jpg" class="rounded-circle" alt="Circle image">

## Thumbnails

    <!-- Square thumbnail -->
    <img src="assets/img/team/08.jpg" class="img-thumbnail rounded-0" alt="Square thumbnail">

    <!-- Rounded thumbnail -->
    <img src="assets/img/team/06.jpg" class="img-thumbnail" alt="Rounded thumbnail">

    <!-- Circle thumbnail -->
    <img src="assets/img/team/07.jpg" class="img-thumbnail rounded-circle" alt="Circle thumbnail">

## Figures with caption

Caption on the left
Caption in the center
Caption on the right

    <!-- Caption on the left -->
    <figure class="figure">
      <img src="assets/img/team/01.jpg" class="figure-img" alt="...">
      <figcaption class="figure-caption">Caption on the left</figcaption>
    </figure>

    <!-- Caption in the center -->
    <figure class="figure">
      <img src="assets/img/team/02.jpg" class="figure-img" alt="...">
      <figcaption class="figure-caption text-center">Caption in the center</figcaption>
    </figure>

    <!-- Caption on the right -->
    <figure class="figure">
      <img src="assets/img/team/03.jpg" class="figure-img" alt="...">
      <figcaption class="figure-caption text-end">Caption on the right</figcaption>
    </figure>

Top