New

Powerful Svelte-Bootstrap SaaS App Template

Admin CRM Application Template

Robust Next.js SaaS App Template

Powerful React-Bootstrap SaaS App Template

Modern Remix SaaS App Template

VueJS-Bootstrap SaaS App Template

Intuitive Nuxt-Bootstrap SaaS App Template

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.

<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>

Aligning images

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

Align Center

<div class="w-100 bg-light clearfix">
	<img src="dist/img/img-thumb1.jpg" class="img-fluid float-start" alt="img">
	<img src="dist/img/img-thumb1.jpg" class="img-fluid float-end" alt="img">
</div>
<h6 class="my-5">Align Center</h6>
<div class="w-100 bg-light">
	<img src="dist/img/img-thumb1.jpg" class="img-fluid mx-auto d-block" alt="img">
</div>

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;

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;

<script setup>
import imgThumb from '@/img_src/img-thumb.jpg'
</script>
<template>
    <div class="w-100 bg-light clearfix">
        <img :src="imgThumg" class="img-fluid float-start" alt="img">
        <img :src="imgThumg" class="img-fluid float-end" alt="img">
    </div>
    <h6 class="my-5">Align Center</h6>
    <div class="w-100 bg-light">
        <img :src="imgThumg" class="img-fluid mx-auto d-block" alt="img">
    </div>
</template>

<script setup>
import imgThumb from '@/img_src/img-thumb.jpg'
</script>
<template>
    <div class="w-100 bg-light clearfix">
        <img :src="imgThumg" class="img-fluid float-start" alt="img">
        <img :src="imgThumg" class="img-fluid float-end" alt="img">
    </div>
    <h6 class="my-5">Align Center</h6>
    <div class="w-100 bg-light">
        <img :src="imgThumg" class="img-fluid mx-auto d-block" alt="img">
    </div>
</template>

<script>
import imgThumb from '../img_src/img-thumb.jpg'
</script>
<div>
    <div class="w-100 bg-light clearfix">
        <img :src="imgThumg" class="img-fluid float-start" alt="img">
        <img :src="imgThumg" class="img-fluid float-end" alt="img">
    </div>
    <h6 class="my-5">Align Center</h6>
    <div class="w-100 bg-light">
        <img :src="imgThumg" class="img-fluid mx-auto d-block" alt="img">
    </div>
</div>

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.

<div class="w-100 bg-light clearfix">
	<img src="dist/img/img-thumb1.jpg" class="img-fluid float-start" alt="img">
	<img src="dist/img/img-thumb1.jpg" class="img-fluid float-end" alt="img">
</div>
<h6 class="my-5">Align Center</h6>
<div class="w-100 bg-light">
	<img src="dist/img/img-thumb1.jpg" class="img-fluid mx-auto d-block" alt="img">
</div>

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;

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;

<script setup>
import imgThumb from '@/img_src/img-thumb.jpg'
</script>
<template>
    <div class="w-100 bg-light clearfix">
        <img :src="imgThumg" class="img-fluid float-start" alt="img">
        <img :src="imgThumg" class="img-fluid float-end" alt="img">
    </div>
    <h6 class="my-5">Align Center</h6>
    <div class="w-100 bg-light">
        <img :src="imgThumg" class="img-fluid mx-auto d-block" alt="img">
    </div>
</template>

<script setup>
import imgThumb from '@/img_src/img-thumb.jpg'
</script>
<template>
    <div class="w-100 bg-light clearfix">
        <img :src="imgThumg" class="img-fluid float-start" alt="img">
        <img :src="imgThumg" class="img-fluid float-end" alt="img">
    </div>
    <h6 class="my-5">Align Center</h6>
    <div class="w-100 bg-light">
        <img :src="imgThumg" class="img-fluid mx-auto d-block" alt="img">
    </div>
</template>

<script>
import imgThumb from '../img_src/img-thumb.jpg'
</script>
<div>
    <div class="w-100 bg-light clearfix">
        <img :src="imgThumg" class="img-fluid float-start" alt="img">
        <img :src="imgThumg" class="img-fluid float-end" alt="img">
    </div>
    <h6 class="my-5">Align Center</h6>
    <div class="w-100 bg-light">
        <img :src="imgThumg" class="img-fluid mx-auto d-block" alt="img">
    </div>
</div>

Image Shapes
Aligning images
Figures