Some Jumbotrons not working on Angular

Topic: Some Jumbotrons not working on Angular

Khalid Saud asked 5 years ago

Hello,

I have installed mdbootstrap successfully on my angular project, I have copied headers, cards, both works fine.

Now i'm trying to add jumbotron but it's not working properly, some templates work fine such as (Jumbotron without padding) but some other jumbotron templates doesn't work such as (Jumbotron with a background image) template.

Code

<mdb-card imageBackground="url('https://mdbcdn.b-cdn.net/img/Photos/Others/gradient1.jpg')">
  <div class="text-white text-center py-5 px-4 my-5">
    <div>
      <h2 class="card-title h1-responsive pt-3 mb-5 font-bold"><strong>Create your beautiful website with MDBootstrap</strong></h2>
      <p class="mx-5 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam,
        voluptatem,
        optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui,
        dolorum!
      </p>
      <a mdbBtn color="white" outline="true" class="waves-light" mdbWavesEffect>
        <mdb-icon fas icon="clone" class="left"></mdb-icon>View project
      </a>
    </div>
  </div>
</mdb-card>

Resources (screenshots, code snippets etc.)

Screenshot

Add comment

Damian Gemza staff answered 5 years ago

1 0 Best answer

Dear @Khalid Saud

Please change the imageBackground part to this one:

style="background-image: url('https://mdbootstrap.com/img/Photos/Others/gradient1.jpg')"

Here's the working example:

<mdb-card style="background-image: url('https://mdbootstrap.com/img/Photos/Others/gradient1.jpg')">
      <div class="text-white text-center py-5 px-4 my-5">
        <div>
          <h2 class="card-title h1-responsive pt-3 mb-5 font-bold"><strong>Create your beautiful website with MDBootstrap</strong></h2>
          <p class="mx-5 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam,
            voluptatem,
            optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui,
            dolorum!
          </p>
          <a mdbBtn color="white" outline="true" class="waves-light" mdbWavesEffect>
            <mdb-icon fas icon="clone" class="left"></mdb-icon>View project
          </a>
        </div>
      </div>
    </mdb-card>

Best Regards,

Damian

Add comment

Khalid Saud answered 5 years ago

0 0 Best answer

Thank you a lot, that solved it for me. Does that mean documentation needs updating ?

Thanks again, now I can continue my project.

Regards, Khalid

Add comment

Arkadiusz Idzikowski staff answered 5 years ago