Topic: Some Jumbotrons not working on Angular

Khalid Saud free asked 4 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://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>

Resources (screenshots, code snippets etc.)

Screenshot


Damian Gemza staff answered 4 years ago


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


Arkadiusz Idzikowski staff answered 4 years ago


Glad it works. We will update documentation.


Khalid Saud free answered 4 years ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes