Bootstrap - Cards not working properly

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

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> 

Answer 2

First of all, it's not pure bootstrap, you need add reference to mdb.min.css (you can download it from here ). Second, you need to limit the width of the div. like 300 px as an example (you could change it to whatever you like):

.card{
 width:300px;
}

I tried it and can see the card is same as the website.

Answer 3

You didn't set any width in your parent div . that's why div automatically shows full width. First you need to add width like below code or use col-md-*

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css"> <!--Card--> <div class="card" style="width: 23rem;"> <!--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--> 

Answer 4

You have to follow the tutorial from getting started they are other css class that comes after content. Eg container-fluid etc. Ensure you follow the tutorial from beginning and ensure your have the library link properly to your page or download it and try it locally. They are classes missing and card class is supposed to have the box-shadow property while container-fluid or content-fluid give the section the appropriate padding. Hope this help

Answer 5

Check the order of files including first of all jquery is required then bootstrap and after that mdb file should be include

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/js/mdb.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css" rel="stylesheet"/> <div class='container-fluid'> <div class='section'> <!--Card--> <div class="card" style='width:23rem;'> <!--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--> </div> </div>