brandv1.0
Utilities
Data Display
Data Entry
Feedback
Tables
Charts
Maps
Navigation
BEHAVIORAL
Layout

Explore Templates

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.

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
img
img
img
img
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.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Aligning images

Align images with the helper float classes or text alignment classes.

Preview
Jsx
imgimg
Align Center
img
import React from 'react';
import { Image } from 'react-bootstrap';
//Image
import ThumbImg from '../../../Assets/dist/img/img-thumb1.jpg';

const ImageAlignments = () => {
  return (
    <div className="w-100 bg-light clearfix">
        <Image src={ThumbImg} fluid className="float-start" alt="img" />
        <Image src={ThumbImg} fluid className="float-end" alt="img" />
    </div>
    <h6 className="my-5">Align Center</h6>
    <div className="w-100 bg-light">
        <Image src={ThumbImg} fluid className="mx-auto d-block" alt="img" />
    </div>
  );
}

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

Anytime you need to display a piece of content—like an image with an optional caption, consider using a Figure. Aligning the Figure’s caption is easy with text utilities.

Preview
Jsx
A generic square placeholder img with rounded corners in a figure.
Left Aligned Caption
A generic square placeholder img with rounded corners in a figure.
Right Aligned Caption
import React from 'react';
import { Figure } from 'react-bootstrap';
//Image
import ThumbImg from '../../../Assets/dist/img/img-thumb1.jpg';

const ImageAlignments = () => {
  return (
    <>
        <Figure>
            <Figure.Image
                src={ThumbImg}
                fluid
                rounded
                className="w-200p me-4"
                alt="A generic square placeholder img with rounded corners in a figure."
            />
            <Figure.Caption>Left Aligned Caption</Figure.Caption>
        </Figure>
        <Figure>
            <Figure.Image
                src={ThumbImg}
                fluid
                rounded
                className="w-200p"
                alt="A generic square placeholder img with rounded corners in a figure."
            />
            <Figure.Caption className="text-end">Right Aligned Caption</Figure.Caption>
        </Figure>
    </>
  );
}

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