Bootstrap React Image

Bootstrap React Image component with responsive behavior (so it's never become larger than their parent element) and special styles.

On this page

Responsive images#

Images in Bootstrap React are made responsive with fluid property. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.

1<CImage fluid src="/images/react.jpg" />

Image thumbnails#

In addition to our border-radius utilities, you can use propthumbnail to give an image a rounded 1px border appearance.

1<CImage rounded thumbnail src="/images/react400.jpg" width={200} height={200} />

Aligning images#

Align images with the align property.

1<div className="clearfix">
2  <CImage align="start" rounded src="/images/react400.jpg" width={200} height={200} />
3  <CImage align="end" rounded src="/images/react400.jpg" width={200} height={200} />
4</div>

1<div className="clearfix">
2  <CImage align="center" rounded src="/images/react400.jpg" width={200} height={200} />
3</div>

1<div className="text-center">
2  <CImage rounded src="/images/react400.jpg" width={200} height={200} />
3</div>

API#

CImage#

1import { CImage } from '@coreui/bootstrap-react'
2// or
3import CImage from '@coreui/bootstrap-react/src/components/image/CImage'

Property	Description	Type	Default
align	Set the horizontal aligment.	`'start'` \| `'center'` \| `'end'`	-
className	A string of all className you want applied to the component.	`string`	-
fluid	Make image responsive.	`boolean`	-
rounded	Make image rounded.	`boolean`	-
thumbnail	Give an image a rounded 1px border appearance.	`boolean`	-