Twitter Bootstrap Question posted in

Twitter bootstrap data-src in card not working

Going by the example given on twitter bootstrap’s website, the following code 

<div class="card">
  <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

should produce a nice card, but it produces

enter image description here

Can anyone tell what the problem could be?
Seems like the data attributes are not working for me.

Tags:

2

Answers


  1. 0

    The example you grabbed the code from is using holder.js but the Bootstrap distribution does not actually come with holder.js. Your data-src attribute is referencing a file that doesn’t exist.

    If you need a placeholder image you can:

    If you use a regular image, remember that you have to use the normal source attribute:

    <img class="card-img-top" src="http://placehold.it/350x150" alt="Card image cap">
    Login or Signup to reply.
  2. 0

    I think @bsmp is right in his answer.

    Holder will then process all images with a specific src attribute, like src="holder.js/318x180", and generates an image source in to data-src attribute automatically.

    1. Include holder in your page by using the following code:

      <script src="https://cdn.jsdelivr.net/holder/2.9.0/holder.min.js">
      </script>

      You can also download holder.js at https://github.com/imsky/holder

    2. Use the src attribute of the img element to define your holder images:

      <img class="card-img-top" src="holder.js/318x180" alt="Card image cap">
      <div class="card-block">

    Notice that you do not have to escape the holder syntax in the src attribte for the latest version of holder.js

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

<div class="card" style="width:318px;">
  <img class="card-img-top" src="holder.js/318x180" alt="Card image cap">
  <div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

 <script src="https://cdn.jsdelivr.net/holder/2.9.0/holder.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search