ux: update for bootstrap figure classes

figure {

  margin: 2rem 0;

  margin: 0 0 1rem;

  display: inline-block;

}

figure img {

  margin-bottom: 0.5rem;

  line-height: 1;

  max-width: 100%;

  height: auto;

}

figure figcaption {

  margin: 0.25rem 0 0.75rem;

  font-size: 0.875em;

  color: #6c757d;

}

.figure-caption {

contributors: ["Henk Verlinde"]

---

![Image](security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg)

## Remote gif

```md

![Happy Dance by Neil Sanders](https://i.giphy.com/media/hIip12KtxrNU5GG0Ii/giphy.gif?cid=790b7611e72a6d08626c8c4ff1410056fbc51e0ed1f2daab&rid=giphy.gif&ct=s)

```

![Happy Dance by Neil Sanders](https://i.giphy.com/media/hIip12KtxrNU5GG0Ii/giphy.gif?cid=790b7611e72a6d08626c8c4ff1410056fbc51e0ed1f2daab&rid=giphy.gif&ct=s)

## Image in page bundle

```bash

![Image](security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg "Optional title")

```

![Image](security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg "Optional title")

## Screenshot in page bundle

```bash

![Screenshot](image003.png)

```

![Screenshot](image003.png)

## Image in assets directory

```bash

![Image](images/harley-davidson.jpg)

```

![Image](images/harley-davidson.jpg)

## Shortcode

### Image in page bundle

```md

{{</* figure src="security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg" alt="Describe your image" caption="For a figure caption can be different than alt text" */>}}

```

{{< figure src="security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg" alt="Describe your image" caption="For a figure caption can be different than alt text" >}}

### Image in assets directory

```md

{{</* figure src="images/harley-davidson.jpg" alt="Harley Davidson" caption="For a figure caption can be different than alt text" */>}}

```

{{< figure src="images/harley-davidson.jpg" alt="Harley Davidson" caption="For a figure caption can be different than alt text" >}}