이미지에 반응형과 스타일을 입히는 방법입니다. 아래 실행 이미지는 가로가 2000px인 이미지입니다. 3버전에서는 img-responsive를 사용했었습니다.

<div class="container">
	<div class="row">
		<div class="col-2">
			<img src="<https://picsum.photos/2000>" class="img-fluid" alt="img">
		</div>
		<div class="col-2">
			hello
		</div>
		<div class="col-2">
			hello
		</div>
	</div>
</div>

004.html

004.html

이미지 썸네일입니다. 작은이미지 보다는 큰 이미지에 활용됩니다.

<div class="container">
    <div class="row">
      <div class="col-2">
        <img src="<https://picsum.photos/200>" class="img-thumbnail" alt="img">
      </div>
    <div class="col-2">
      hello
    </div>
    <div class="col-2">
      hello
    </div>
  </div>
</div>

005.html

005.html

화면에는 보이지 않지만 이미지가 컬럼의 가장 오른쪽에 붙어있습니다. 또한 테두리가 미묘하게 깎여 있는 것을 볼 수 있습니다. 추가로 이미지를 둥그렇게 만드는 class는 rounded입니다. 3 이전의 버전에서는 img-circle을 사용했었습니다.

<div class="container">
      <div class="row">
        <div class="col-6">
          <img src="<https://picsum.photos/200>" class="rounded float-end" alt="img">
        </div>
        <div class="col-2">
          hello
        </div>
        <div class="col-2">
          hello
        </div>
      </div>
    </div>

006.html

006.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">
    <style>
        .b{
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 b">
                <img class="img-fluid" src="<https://picsum.photos/200>" alt="">
            </div>
            <div class="col-md-4 b">
                <img class="img-fluid rounded-circle" src="<https://picsum.photos/200>" alt="">
            </div>
            <div class="col-md-4 b">
                <img class="img-fluid img-thumbnail" src="<https://picsum.photos/200>" alt="">
            </div>
        </div>
    </div>
    <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>"></script>
</body>
</html>