How to resize image in bootstrap?

Question

How to adjust image width and height in bootstrap? I want image height smaller than it is appearing. How can I adjust its height? How I can write text on it? Here text is appearing under the image.

 <div class="container-fluid">
     <div class="row">
        <img src="https://image.shutterstock.com/image-photo/blue-morpho-peleides-big- 
         butterfly-600w-407651284.jpg" class="img-fluid" alt="butterfly">
          <figcaption class="figure=caption"> butterfly</figcaption>
      </div>
 </div>

Answer 1

In order to put text on your image you just need to create another div tag inside the col tag

You can set width and height for your image using html property width and height attribute with img tag

Here I have set width upto 80% for your image

<img src="https://image.shutterstock.com/image-photo/blue-morpho-peleides-big-butterfly-600w-407651284.jpg" class="img-fluid" alt="butterfly" width="80%">

Here is the code of how to put text on your image.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">



<! -- HTML -- >
<div class="container">
  <div class="row">
    <div class="col-6">
      <img src="https://image.shutterstock.com/image-photo/blue-morpho-peleides-big- 
        butterfly-600w-407651284.jpg" class="img-fluid" alt="butterfly">
      <div class="carousel-caption">
        <h1>Example headline.</h1>
      </div>
    </div>
    <div class="col-6">
      <img src="https://image.shutterstock.com/image-photo/blue-morpho-peleides-big- 
          butterfly-600w-407651284.jpg" class="img-fluid" alt="butterfly">
      <div class="carousel-caption">
        <h1>Example headline.</h1>
      </div>
    </div>
  </div>
</div>