Topic: issue
Chuan Keng priority asked 1 year ago
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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