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

Jsx

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;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Shapes

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

Preview

Jsx

Classes

import React from 'react';
const Shapes = () => {
  return (
      <>
        <div className="d-17 bg-grey-light-4" />
        <div className="d-17 bg-grey-light-4 circle" />
        <div className="d-17 bg-grey-light-4 rounded-15" />
        <div className="d-17 bg-grey-light-4 rounded-10" />
        <div className="d-17 bg-grey-light-4 rounded-5" />
      <>
  );
}

export default Shapes;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="rounded-[value]"`	1 / 2 / 3 / 4 / 5 ... / 34 (step of 1)

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Image Shapes
Shapes