CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Timuçin Çiçek
Timuçin Çiçek

Reputation: 1616

How to keep image and text side by side by and very close changing image size?

I have image and text side by side with bootstrap row and cols like below enter image description here

<div class="container-fluid"> 
  <div class="row">
      <div class="col-md-6">
        <img src="https://www.irishtimes.com/polopoly_fs/1.3170107.1501253408!/image/image.jpg_gen/derivatives/ratio_1x1_w1200/image.jpg" width="100%" alt="">
      </div>
      <div class="col-md-6">
        <h1 style="font-size: 96px;" class="mr-4">Hello<br>I'm Harry</h1>
      </div>
  </div>

</div>

Image looks very big when I set width 100%.I want it to be much less like 50%.

enter image description here

When I set it to 50%, spacing between text and image gets bigger.I could set image to float-right but it doesnt make image and text centered.How can I keep resonsivity with this smaller image and centered like the first one?

Upvotes: 1

Views: 82

Answers (2)

Temani Afif
Temani Afif

Reputation: 272608

You can simply do like below. Adjust the col-* sizes

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<div class="container-fluid"> 
  <div class="row justify-content-center">
      <div class="col-3">
        <img src="https://www.irishtimes.com/polopoly_fs/1.3170107.1501253408!/image/image.jpg_gen/derivatives/ratio_1x1_w1200/image.jpg" class="w-100" alt="">
      </div>
      <div class="col-4">
        <h1 style="font-size: 80px;" class="mr-4">Hello<br>I'm Harry</h1>
      </div>
  </div>

</div>

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Check Now

<div class="container-fluid"> 
  <div class="row">
      <div class="col-md-6 text-center text-md-right">
        <img src="https://www.irishtimes.com/polopoly_fs/1.3170107.1501253408!/image/image.jpg_gen/derivatives/ratio_1x1_w1200/image.jpg" width="50%" alt="">
      </div>
      <div class="col-md-6">
        <h1 style="font-size: 96px;" class="mr-4">Hello<br>I'm Harry</h1>
      </div>
  </div>

</div>

https://jsfiddle.net/lalji1051/kfc98L2q/2/

Upvotes: 0

Related Questions