CSS not applied

web
mobile

Topic: CSS not applied

talentanainc pro asked 5 months ago

Expected behavior CSS should be applied

Actual behavior CSS is not applied, no colors, no alignment

Resources (screenshots, code snippets etc.) Used the sample for the card

        <!-- Background color -->
        <div class="card-up indigo lighten-1"></div>

        <!-- Avatar -->
        <div class="avatar mx-auto white">
            <img width="110" height="110" src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg" class="rounded-circle"
                 alt="woman avatar">
        </div>

        <!-- Content -->
        <div class="card-body">
            <!-- Name -->
            <h4 class="card-title">Anna Doe</h4>
            <hr>
            <!-- Quotation -->
            <p><i class="fas fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci
            </p>
        </div>

    </div>
    <!-- Card -->

enter image description here


Nicolas Hug pro premium commented 5 months ago

Ay,

Ah ! I'm not alone ! I got same problem with sample navbar : https://nimb.ws/NqLxnW

Did you add MDB module in your app.module ?


talentanainc pro commented 5 months ago

Yes, I did, it works when I use bootstrap card but not when I use MDB one


Konrad Stępień staff answered 5 months ago

Hi @talentanainc,

Please use <mdb-card> component in your code.

 <!--Grid row-->
<div class="row">

  <!--Grid column-->
  <div class="col-md-6">

    <mdb-card class="testimonial-card">
      <!--Bacground color-->
      <div class="card-up indigo lighten-1">
      </div>

      <!--Avatar-->
      <div class="avatar mx-auto">
        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg" class="rounded-circle">
      </div>

      <mdb-card-body>
        <!--Name-->
        <mdb-card-title>
          <h4>Anna Doe</h4>
        </mdb-card-title>
        <hr>
        <!--Quotation-->
        <p>
          <mdb-icon fas icon="quote-left"></mdb-icon> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos,
          adipisci</p>
      </mdb-card-body>
    </mdb-card>

  </div>
  <!--Grid column-->

  <!--Grid column-->
  <div class="col-md-6">

    <!--Card-->
    <mdb-card class="testimonial-card">
      <!--Bacground color-->
      <div class="card-up aqua-gradient">
      </div>

      <!--Avatar-->
      <div class="avatar mx-auto">
        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2831%29.jpg" class="rounded-circle">
      </div>

      <mdb-card-body>
        <!--Name-->
        <mdb-card-title>
          <h4>Martha Smith</h4>
        </mdb-card-title>
        <hr>
        <!--Quotation-->
        <p>
          <mdb-icon fas icon="quote-left"></mdb-icon> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos,
          adipisci</p>
      </mdb-card-body>
    </mdb-card>
    <!--/.Card-->

  </div>
  <!--Grid column-->

</div>
<!--Grid row-->

Best, Konrad.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.10.0
  • Device: Desktop
  • Browser: Chrome, Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags