mdb-card-text font size

Topic: mdb-card-text font size

mdb2 pro asked a year ago

How can I change the text size of text inside a specific card in its mdb-card-text element, for that specific card (component), not globally.

e.g., I have an info card where I need the text size to be 36px

More specifically, how can I override:

.card .card-body .card-text {
    color: #747373;
    font-size: .9rem;
    font-weight: 400;

And in a similar case, how can I remove this margin, at the end of the card's text:

.card-text:last-child {
    margin-bottom: 1rem!important;


Damian Gemza staff answered a year ago

Dear [@mdb2](/profile/?id=22796)

If you want to change the styles only for one card element, please add a custom class to it, and then target this element in css by this class.

Please take a look at the below code:


<div class="row">
    <div class="col-md-6 mx-auto my-5">
      <mdb-card class="custom-class">
          <mdb-card-text>Sample text</mdb-card-text>
          <mdb-card-text>Sample text 2</mdb-card-text>


mdb-card.custom-class mdb-card-text .card-text {
  font-size: 36px !important;
  margin-bottom: 0 !important;

Best Regards,


mdb2 pro answered a year ago

The problem with a global "custom-class" is that styles that are only for specific components are placed in a global scss file, containing all the global styles.

Placing specific styles in the component's own scss file is a much better approach, yet I fail to see how to implement it with all the new directives.

Pleas advise

Damian Gemza staff answered a year ago

Dear @mdb2

If you want to modify the font size of mdb-card-text component within the component styles you would have to use the ::ng-deep pseudoselector.

But again, if you'll use it, you have to specify the custom class for the mdb-card component, because inside the mdb-card-text there's a <p> element, which won't inherit the styles from mdb-card-text component.

And if you won't use some custom class, the ::ng-deep styles will apply styles to the global scope.

This will be changed in MDB 9, but for now, please use one of my approaches.

Best Regards,


mdb2 pro answered a year ago


since ::ng-deep is the same as global scope, I'll use the only approach which is to use a global style, until Angular 9 solves it

Damian Gemza staff commented a year ago

If you want, you can try to use the old one approach - div.card-text, but this is not recommended way by us.



Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.0.0
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: No