Shapes

Change the shape using rounded-* classes

Image Shapes

Use the rounded, roundedCircle and thumbnail props to customise the image and use the fluid to scale image nicely to the parent element.

Preview

<div class="row">
	<div class="col-sm-6 col-md-3">
		<img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
	</div>
	<div class="col-sm-6 col-md-3">
		<img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
	</div>
	<div class="col-sm-6 col-md-3">
		<img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
	</div>
	<div class="col-sm-6 col-md-3">
		<img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
	</div>
</div>

import React from 'react';
import { Col, Image, Row } from 'react-bootstrap';
const ImageShapes = () => {
  return (
      <Row>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid />
          </Col>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid rounded />
          </Col>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid roundedCircle />
          </Col>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid thumbnail />
          </Col>
      </Row>
  );
}
export default ImageShapes;

import React from 'react';
import { Col, Image, Row } from 'react-bootstrap';
const ImageShapes = () => {
  return (
      <Row>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid />
          </Col>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid rounded />
          </Col>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid roundedCircle />
          </Col>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid thumbnail />
          </Col>
      </Row>
  );
}
export default ImageShapes;

<template>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
        </div>
    </div>
</template>

<template>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
        </div>
    </div>
</template>

<div class="row">
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
        </div>
    </div>

Shapes

Change the shape of an image using .rounded or .circle .rounded-1,2,3

<div class="row">
	<div class="col-sm-6 col-md-3">
		<img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
	</div>
	<div class="col-sm-6 col-md-3">
		<img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
	</div>
	<div class="col-sm-6 col-md-3">
		<img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
	</div>
	<div class="col-sm-6 col-md-3">
		<img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
	</div>
</div>

import React from 'react';
import { Col, Image, Row } from 'react-bootstrap';
const ImageShapes = () => {
  return (
      <Row>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid />
          </Col>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid rounded />
          </Col>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid roundedCircle />
          </Col>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid thumbnail />
          </Col>
      </Row>
  );
}
export default ImageShapes;

import React from 'react';
import { Col, Image, Row } from 'react-bootstrap';
const ImageShapes = () => {
  return (
      <Row>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid />
          </Col>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid rounded />
          </Col>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid roundedCircle />
          </Col>
          <Col sm={6} md={3} >
              <Image src={ThumbImg} alt="img" fluid thumbnail />
          </Col>
      </Row>
  );
}
export default ImageShapes;

<template>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
        </div>
    </div>
</template>

<template>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
        </div>
    </div>
</template>

<div class="row">
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
        </div>
    </div>

Image Shapes
Shapes