# Bootstrap 6 Images
> Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.
## Responsive images
Images in CoreUI for Bootstrap are made responsive with `.img-fluid`. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent element. To pair an image with a caption, see [Figures](https://coreui.io/bootstrap/docs/content/figures/).
```html
```
## Image thumbnails
In addition to our [border-radius utilities](https://coreui.io/bootstrap/docs/utilities/border/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
```html
```
## Aligning images
Align images with the [helper float classes](https://coreui.io/bootstrap/docs/utilities/float/) or [text alignment classes](https://coreui.io/bootstrap/docs/utilities/text-alignment/). `block`-level images can be centered using [the `.mx-auto` margin utility class](https://coreui.io/bootstrap/docs/utilities/margin/#horizontal-centering).
```html
```
```html
```
```html
```
## Picture
If you are using the `` element to specify multiple `` elements for a specific ``, make sure to add the `.img-*` classes to the `` and not to the `` tag.
Give the `` an `alt` text that describes the image, or an empty `alt=""` when it's only decorative. The `alt="..."` in the example below is a placeholder for that text.
```html
```
## Customizing
### CSS variables
`.img-thumbnail` declares its frame on the element, so a single thumbnail can be reframed without a modifier class:
```scss
$thumbnail-tokens: defaults(
(
--cui-thumbnail-padding-y: .25rem,
--cui-thumbnail-padding-x: .25rem,
--cui-thumbnail-bg: var(--cui-bg-body),
--cui-thumbnail-border-width: var(--cui-border-width),
--cui-thumbnail-border-color: var(--cui-border-color),
--cui-thumbnail-border-radius: var(--cui-radius-5),
--cui-thumbnail-box-shadow: var(--cui-box-shadow-sm),
),
$thumbnail-tokens
);
```
```html
```