Some Jumbotrons not working on Angular

Topic: Some Jumbotrons not working on Angular

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

Add comment

Damian Gemza staff answered 5 years ago

1 0 Best answer

<p>Dear <a href="/profile/?id=70715" target="_blank" rel="nofollow">@Khalid Saud</a></p>

<p>Please change the <code>imageBackground</code> part to this one: </p>

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

<p>Here's the working example:</p>

<pre class="prettyprint"><code><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>
</code></pre>

<p>Best Regards,</p>

<p>Damian</p>

Please insert min. 20 characters.

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

Arkadiusz Idzikowski staff answered 5 years ago