CODEWITHSUNDEEP
twitter-bootstrapcssresponsive-design
Lion
Lion

Reputation: 313

how to responsive design using bootstrap background image

I need to get the following background image responsive using bootstrap.

<div class="col-md-6">
    <img src="images\4.jpg">
</div>

How could I get the image responsive?

Upvotes: 0

Views: 1420

Answers (3)

Shiladitya
Shiladitya

Reputation: 12161

Here you go with responsive background-image solution https://jsfiddle.net/tekx21t9/1/

.bg {
  background-image: url("http://via.placeholder.com/350x15");
  height: 100px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  
  <div class="row">
    
    <div class="col-md-6 bg">
       <!--<img src="http://via.placeholder.com/350x150" class="img-responsive" />-->
     </div>
    
  </div>
  
</div>

If you want the image tag to be there rather than background-image then below is the solution

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  
  <div class="row">
    
    <div class="col-md-6">
       <img src="http://via.placeholder.com/350x150" class="img-responsive" />
     </div>
    
  </div>
  
</div>

Upvotes: 0

Rohit Verma
Rohit Verma

Reputation: 3783

You can use class="img-responsive" to make any image responsive

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="col-md-6">
 <img src="http://theworldly.co.uk/wp-content/uploads/2017/01/tech-wowcity.jpg" class="img-responsive">
 </div>

Upvotes: 0

Huy Le
Huy Le

Reputation: 389

There is a responsive class for image in Bootstrap: 'img-fluid'. It will take up all the width of its container.

<div class="col-md-6">
 <img class="img-fluid" src="images\4.jpg">
</div>

Reference: Bootstrap-4 responsive image

Upvotes: 1

Related Questions