---
title: React Bootstrap Image Component
name: Image with Bootstrap Styling
description: Learn how to use the React Bootstrap Image component from CoreUI to create responsive, aligned, and styled images using Bootstrap-friendly utilities and props.
route: /components/image/
bootstrap_component: true
---

## Responsive React Bootstrap Images

The React Bootstrap Image component supports responsive behavior using the `fluid` prop. This applies `max-width: 100%` and `height: auto` to ensure images scale with their parent container.

<ExampleSnippet className="theme-bootstrap" component="ImageResponsiveExample" componentName="React Bootstrap Image" />

## React Bootstrap Image thumbnails

Use the `thumbnail` prop to give an image a subtle border and padding, resulting in a thumbnail-style appearance. You can combine it with [border-radius utilities](https://coreui.io/bootstrap/docs/utilities/borders) for rounded corners.

<ExampleSnippet className="theme-bootstrap" component="ImageThumbnailExample" componentName="React Bootstrap Image" />

## Aligning React Bootstrap Images

Use the `align` prop to control image alignment within the container. This allows you to float images left, right, or center them using Bootstrap-aligned values.

<ExampleSnippet className="theme-bootstrap" component="ImageAligningExample" componentName="React Bootstrap Image" />

<ExampleSnippet className="theme-bootstrap" component="ImageAligning2Example" componentName="React Bootstrap Image" />

<ExampleSnippet className="theme-bootstrap" component="ImageAligning3Example" componentName="React Bootstrap Image" />

## API reference

Explore all available props and customization options for the React Bootstrap Image component below:

- [&lt;CImage /&gt;](../api/#cimage)
