Bootstrap - 卡无法正常工作

Question

I am following the examole from the first example on this page https://mdbootstrap.com/components/cards/ (trying to get same output)

<!--Card-->
    <div class="card">
    
        <!--Card image-->
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
    
        <!--Card content-->
        <div class="card-body">
            <!--Title-->
            <h4 class="card-title">Card title</h4>
            <!--Text-->
            <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>
    <!--/.Card-->

However, all i get is this ? any suggestions

</div>

Answer 1

I have added a different bootstrap link, hope this matches with your requirement

Try this

.card-body{
  padding: 2rem;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

<div class="container">
<!--Card-->
    <div class="card">
    
        <!--Card image-->
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" width="550rem" alt="Card image cap">
    
        <!--Card content-->
        <div class="card-body">
            <!--Title-->
            <h4 class="card-title">Card title</h4>
            <!--Text-->
            <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>
    <!--/.Card-->
    </div>

</div>