1. MDB Home Page
  2. Support Main Page
  3. MDB Standard
Topic: issue

Chuan Keng priority asked 1 year ago

enter image description here Hi I want to know how to import MDB library correctly in my index.html file to make the website work. code: Material Design for Bootstrap

Home

Topics 

      </li>
      <li class="nav-item">
        <a class="nav-link" href="" target="_blank">About me</a>
      </li>
    </ul>

    <ul class="navbar-nav d-flex flex-row">
      <!-- Icons -->
      <li class="nav-item me-3 me-lg-0">
        <a class="nav-link" href="#">
          <i class="fas fa-shopping-cart"></i>
        </a>
      </li>
      <li class="nav-item me-3 me-lg-0">
        <a class="nav-link" href="#">
          <i class="fab fa-twitter"></i>
        </a>
      </li>
      <li class="nav-item me-3 me-lg-0">
        <a class="nav-link" href="#">
          <i class="fab fa-linkedin"></i>
        </a>
      </li>
    </ul>
  </div>
</div>

https://mdbootstrap.com/img/new/slides/051.jpg); height: 400px; " > My Blog Quidquid Latine dictum sit, altum videtur

What's new?

  <div class="row">
    <div class="col-lg-4 col-md-12 mb-4">
      <div class="bg-image hover-zoom ripple shadow-1-strong rounded-5">
        <img
             src="https://mdbootstrap.com/img/new/standard/city/041.jpg"
             class="w-100"
             />
        <a href="#!">
          <div
               class="mask"
               style="background-color: rgba(0, 0, 0, 0.3)"
               >
            <div
                 class="d-flex justify-content-start align-items-end h-100"
                 >
              <h5 class="text-white m-4">Title of the article</h5>
            </div>
          </div>
          <div class="hover-overlay">
            <div
                 class="mask"
                 style="background-color: rgba(253, 253, 253, 0.15)"
                 ></div>
          </div>
        </a>
      </div>
    </div>

    <div class="col-lg-4 col-md-6 mb-4">
      <div class="bg-image hover-zoom ripple shadow-1-strong rounded-5">
        <img
             src="https://mdbootstrap.com/img/new/standard/city/044.jpg"
             class="w-100"
             />
        <a href="#!">
          <div
               class="mask"
               style="background-color: rgba(0, 0, 0, 0.3)"
               >
            <div
                 class="d-flex justify-content-start align-items-end h-100"
                 >
              <h5 class="text-white m-4">Title of the article</h5>
            </div>
          </div>
          <div class="hover-overlay">
            <div
                 class="mask"
                 style="background-color: rgba(253, 253, 253, 0.15)"
                 ></div>
          </div>
        </a>
      </div>
    </div>

    <div class="col-lg-4 col-md-6 mb-4">
      <div class="bg-image hover-zoom ripple shadow-1-strong rounded-5">
        <img
             src="https://mdbootstrap.com/img/new/standard/city/045.jpg"
             class="w-100"
             />
        <a href="#!">
          <div
               class="mask"
               style="background-color: rgba(0, 0, 0, 0.3)"
               >
            <div
                 class="d-flex justify-content-start align-items-end h-100"
                 >
              <h5 class="text-white m-4">Title of the article</h5>
            </div>
          </div>
          <div class="hover-overlay">
            <div
                 class="mask"
                 style="background-color: rgba(253, 253, 253, 0.15)"
                 ></div>
          </div>
        </a>
      </div>
    </div>

    <div class="col-lg-4 col-md-12 mb-4">
      <div class="bg-image hover-zoom ripple shadow-1-strong rounded-5">
        <img
             src="https://mdbootstrap.com/img/new/standard/city/047.jpg"
             class="w-100"
             />
        <a href="#!">
          <div
               class="mask"
               style="background-color: rgba(0, 0, 0, 0.3)"
               >
            <div
                 class="d-flex justify-content-start align-items-end h-100"
                 >
              <h5 class="text-white m-4">Title of the article</h5>
            </div>
          </div>
          <div class="hover-overlay">
            <div
                 class="mask"
                 style="background-color: rgba(253, 253, 253, 0.15)"
                 ></div>
          </div>
        </a>
      </div>
    </div>

    <div class="col-lg-4 col-md-6 mb-4">
      <div class="bg-image hover-zoom ripple shadow-1-strong rounded-5">
        <img
             src="https://mdbootstrap.com/img/new/standard/city/048.jpg"
             class="w-100"
             />
        <a href="#!">
          <div
               class="mask"
               style="background-color: rgba(0, 0, 0, 0.3)"
               >
            <div
                 class="d-flex justify-content-start align-items-end h-100"
                 >
              <h5 class="text-white m-4">Title of the article</h5>
            </div>
          </div>
          <div class="hover-overlay">
            <div
                 class="mask"
                 style="background-color: rgba(253, 253, 253, 0.15)"
                 ></div>
          </div>
        </a>
      </div>
    </div>

    <div class="col-lg-4 col-md-6 mb-4">
      <div class="bg-image hover-zoom ripple shadow-1-strong rounded-5">
        <img
             src="https://mdbootstrap.com/img/new/standard/city/049.jpg"
             class="w-100"
             />
        <a href="#!">
          <div
               class="mask"
               style="background-color: rgba(0, 0, 0, 0.3)"
               >
            <div
                 class="d-flex justify-content-start align-items-end h-100"
                 >
              <h5 class="text-white m-4">Title of the article</h5>
            </div>
          </div>
          <div class="hover-overlay">
            <div
                 class="mask"
                 style="background-color: rgba(253, 253, 253, 0.15)"
                 ></div>
          </div>
        </a>
      </div>
    </div>

    <div class="col-lg-4 col-md-12 mb-4">
      <div class="bg-image hover-zoom ripple shadow-1-strong rounded-5">
        <img
             src="https://mdbootstrap.com/img/new/standard/city/050.jpg"
             class="w-100"
             />
        <a href="#!">
          <div
               class="mask"
               style="background-color: rgba(0, 0, 0, 0.3)"
               >
            <div
                 class="d-flex justify-content-start align-items-end h-100"
                 >
              <h5 class="text-white m-4">Title of the article</h5>
            </div>
          </div>
          <div class="hover-overlay">
            <div
                 class="mask"
                 style="background-color: rgba(253, 253, 253, 0.15)"
                 ></div>
          </div>
        </a>
      </div>
    </div>

    <div class="col-lg-4 col-md-6 mb-4">
      <div class="bg-image hover-zoom ripple shadow-1-strong rounded-5">
        <img
             src="https://mdbootstrap.com/img/new/standard/city/051.jpg"
             class="w-100"
             />
        <a href="#!">
          <div
               class="mask"
               style="background-color: rgba(0, 0, 0, 0.3)"
               >
            <div
                 class="d-flex justify-content-start align-items-end h-100"
                 >
              <h5 class="text-white m-4">Title of the article</h5>
            </div>
          </div>
          <div class="hover-overlay">
            <div
                 class="mask"
                 style="background-color: rgba(253, 253, 253, 0.15)"
                 ></div>
          </div>
        </a>
      </div>
    </div>

    <div class="col-lg-4 col-md-6 mb-4">
      <div class="bg-image hover-zoom ripple shadow-1-strong rounded-5">
        <img
             src="https://mdbootstrap.com/img/new/standard/city/052.jpg"
             class="w-100"
             />
        <a href="#!">
          <div
               class="mask"
               style="background-color: rgba(0, 0, 0, 0.3)"
               >
            <div
                 class="d-flex justify-content-start align-items-end h-100"
                 >
              <h5 class="text-white m-4">Title of the article</h5>
            </div>
          </div>
          <div class="hover-overlay">
            <div
                 class="mask"
                 style="background-color: rgba(253, 253, 253, 0.15)"
                 ></div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-lg-4 col-md-12 mb-4">
      <div class="bg-image hover-zoom ripple shadow-1-strong rounded-5">
        <img
             src="https://mdbootstrap.com/img/new/standard/city/053.jpg"
             class="w-100"
             />
        <a href="#!">
          <div
               class="mask"
               style="background-color: rgba(0, 0, 0, 0.3)"
               >
            <div
                 class="d-flex justify-content-start align-items-end h-100"
                 >
              <h5 class="text-white m-4">Title of the article</h5>
            </div>
          </div>
          <div class="hover-overlay">
            <div
                 class="mask"
                 style="background-color: rgba(253, 253, 253, 0.15)"
                 ></div>
          </div>
        </a>
      </div>
    </div>

    <div class="col-lg-4 col-md-6 mb-4">
      <div class="bg-image hover-zoom ripple shadow-1-strong rounded-5">
        <img
             src="https://mdbootstrap.com/img/new/standard/city/054.jpg"
             class="w-100"
             />
        <a href="#!">
          <div
               class="mask"
               style="background-color: rgba(0, 0, 0, 0.3)"
               >
            <div
                 class="d-flex justify-content-start align-items-end h-100"
                 >
              <h5 class="text-white m-4">Title of the article</h5>
            </div>
          </div>
          <div class="hover-overlay">
            <div
                 class="mask"
                 style="background-color: rgba(253, 253, 253, 0.15)"
                 ></div>
          </div>
        </a>
      </div>
    </div>

    <div class="col-lg-4 col-md-6 mb-4">
      <div class="bg-image hover-zoom ripple shadow-1-strong rounded-5">
        <img
             src="https://mdbootstrap.com/img/new/standard/city/055.jpg"
             class="w-100"
             />
        <a href="#!">
          <div
               class="mask"
               style="background-color: rgba(0, 0, 0, 0.3)"
               >
            <div
                 class="d-flex justify-content-start align-items-end h-100"
                 >
              <h5 class="text-white m-4">Title of the article</h5>
            </div>
          </div>
          <div class="hover-overlay">
            <div
                 class="mask"
                 style="background-color: rgba(253, 253, 253, 0.15)"
                 ></div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>
<!--Section: Design Block-->

Get connected with us on social networks: 

<!-- Right -->
<div>
  <a href="" class="me-4 text-reset">
    <i class="fab fa-facebook-f"></i>
  </a>
  <a href="" class="me-4 text-reset">
    <i class="fab fa-twitter"></i>
  </a>
  <a href="" class="me-4 text-reset">
    <i class="fab fa-google"></i>
  </a>
  <a href="" class="me-4 text-reset">
    <i class="fab fa-instagram"></i>
  </a>
  <a href="" class="me-4 text-reset">
    <i class="fab fa-linkedin"></i>
  </a>
  <a href="" class="me-4 text-reset">
    <i class="fab fa-github"></i>
  </a>
</div>
<!-- Right -->

Company name

Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. 

    <!-- Grid column -->
    <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
      <!-- Links -->
      <h6 class="text-uppercase fw-bold mb-4">Products</h6>
      <p>
        <a href="#!" class="text-reset">Dresses</a>
      </p>
      <p>
        <a href="#!" class="text-reset">Skirts</a>
      </p>
      <p>
        <a href="#!" class="text-reset">Jeans</a>
      </p>
      <p>
        <a href="#!" class="text-reset">Accessories</a>
      </p>
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
      <!-- Links -->
      <h6 class="text-uppercase fw-bold mb-4">Useful links</h6>
      <p>
        <a href="#!" class="text-reset">Pricing</a>
      </p>
      <p>
        <a href="#!" class="text-reset">Settings</a>
      </p>
      <p>
        <a href="#!" class="text-reset">Orders</a>
      </p>
      <p>
        <a href="#!" class="text-reset">Help</a>
      </p>
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
      <!-- Links -->
      <h6 class="text-uppercase fw-bold mb-4">Contact</h6>
      <p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
      <p>
        <i class="fas fa-envelope me-3"></i>
        info@example.com
      </p>
      <p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
      <p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
    </div>
    <!-- Grid column -->
  </div>
  <!-- Grid row -->
</div>

© 2021 Copyright:

MDBootstrap.com

Kamila Pieńkowska staff answered 1 year ago

Here is a link to the tutorial:https://mdbootstrap.com/docs/standard/getting-started/installation/

Also in the package, there is index.html file with MDB already connected and working. You can reference it as an example.

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.1
  • Device: desktop
  • Browser: chrome
  • OS: win11
  • Provided sample code: No
  • Provided link: No
Tags
none
About author
Chuan Keng
0Support score
1Questions 0Answers 1Snippets