Bootstrap card put img on full size width of the page

0
votes

I am using bootstrap card https://getbootstrap.com/docs/4.0/components/card/ to show a image,the problem is on bootstrap templete it just add a margin , I would like to make only the image to stay o full width of the div, if somebody have a solution it would be appreciated, thanks in advance.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<!-- card documentation https://getbootstrap.com/docs/4.0/components/card/ -->

<section >
	
	<div class="card text-center">
  <div class="card-header" style="background-color:white">
  
   
     Card Header
     
  <div class="card-body">
  <center>
  
  <!-- img I need full page size on card body -->
<div class="view overlay zoom">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" class="img-fluid " alt="smaple image">
    </div>  </center>
  
    <p class="card-text">card description</p>
    <div class="card-footer text-muted" style="background-color: white">card footer</div>
   
</section>
2
htmlcsstwitter-bootstrapbootstrap-4
"To stay full width of the div". which div are you referring to? <div class="view overlay zoom" /> or <div class="card" />? By the way, in your HTML layout, you have .card-body nested inside .card-header. – David Liang
the div is the '<div class="card-body">' – Otávio Barreto
<div class="card-body" /> has default 1.25 rem padding there (not margin). Do you not care about the padding and just want the image to be absolute 100% width of that, or you do want to accommodate the padding? – David Liang
yes how to to accommodate the padding? – Otávio Barreto

2 Answers

2
votes

You can use bootstarp class p-0 to remove the padding from the card and w-100 on the image to take full width of 100%

See code snippet:

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

<section>

  <div class="card text-center p-0">
    <div class="card-header" style="background-color:white">
      Card Header
    </div>
    <div class="card-body p-0">
      <div class="view overlay zoom">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" class="img-fluid w-100" alt="smaple image">
      </div>
    </div>
    <p class="card-text">card description</p>
    <div class="card-footer text-muted" style="background-color: white">card footer</div>
  </div>
</section>
1
votes

To make the image 100% width of the .card-body, it's as simple as adding .w-100 class to the image to make it 100% width all the time.

<div class="card text-center">
    <div class="card-header" style="background-color:white">
        Card Header
    </div>
    <div class="card-body">
        <center>
            <div class="view overlay zoom">
                <img src="" class="img-fluid w-100" alt="smaple image">
            </div>
        </center>
        <p class="card-text">card description</p>
        <div class="card-footer text-muted" style="background-color: white">card footer</div>
    </div>
</div>

demo: https://jsfiddle.net/davidliang2008/qh6o2gyz/3/