CODEWITHSUNDEEP
phphtmltwitter-bootstrap
joe m
joe m

Reputation: 85

Bootstrap - Cards not working properly

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

enter image description here

Upvotes: 2

Views: 2969

Answers (5)

Prateik Darji
Prateik Darji

Reputation: 2317

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>

Upvotes: 0

Md. Shahidul Islam
Md. Shahidul Islam

Reputation: 330

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

Upvotes: 1

Friday Ameh
Friday Ameh

Reputation: 1684

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

Upvotes: 0

Phil
Phil

Reputation: 1464

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.

Upvotes: 1

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4271

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>

Upvotes: 2

Related Questions