Bootstrap Filter plugin don't work


Topic: Bootstrap Filter plugin don't work

Luis Henriques Almeida pro asked 7 months ago

Hi support,

I bought your Bootstrap Filter plugin and install it on my project but it don't work. Next I installed it on a isolated project but it also don't work.

You must refund the money I spent or tell me what can I do.

Thanks

Luisha


Piotr Glejzer staff commented 7 months ago

do you have console errors?


Luis Henriques Almeida pro commented 7 months ago

Yes, I am.

Uncaught ReferenceError: $ is not defined at


Luis Henriques Almeida pro commented 7 months ago

I added jQuery library to the code

And the console error is now:

Uncaught TypeError: $(...).mdbFilter is not a function at


Piotr Glejzer staff commented 7 months ago

did you add mdb-filter.js file below jquery library?


Luis Henriques Almeida pro commented 7 months ago

Yes, My code is:

<script>
    // Lightbox init
    $('#mdb-lightbox-ui').load('../mdb/mdb-addons/mdb-lightbox-ui.html');
    // Filter init
    $('.filter-lightbox').mdbFilter();

</script>

The console error is now: Uncaught TypeError: Cannot read property 'querySelector' of undefined at e.fn.init.t.fn.mdbFilter (mdb-filter.min.js:1)

Is something missed ?


Piotr Glejzer staff commented 7 months ago

Yes, I think that you are missing something. There is no problem with our package because I already check the newest version of that plugin and everything is working correctly. So please check all paths to your files, I'm pretty sure that is a problem.


Luis Henriques Almeida pro commented 7 months ago

Ok. Where can I see some example or documentation of your complete code working?

I have the follow libraries on my code:

<link rel="stylesheet" href="../../mdb/css/mdb.min.css">
<link rel="stylesheet" href="../../mdb/css/mdb.lite.min.css">
<link rel="stylesheet" href="../../mdb/css/style.min.css">
<link rel="stylesheet" href="../../mdb/css/addons/mdb-filter.min.css">

...


Piotr Glejzer staff commented 7 months ago

Here you can check that everything is working. There are the newset version of our package (4.7.3) and Filter plugin do how you see everything is working. And how i said I checked package from our server and this is still working corecttly.


chefle pro premium answered 5 months ago

I have the same issue. I got the error:

Uncaught TypeError: $(...).mdbFilter is not a function at HTMLDocument. (referenzen.html:813) at l (jquery-3.3.1.min.js:2) at c (jquery-3.3.1.min.js:2)

I used the basic filter functionality. Please check my full html-code below:

Material Design Bootstrap

Nr.1

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
    aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent1">
   <!-- Links -->
<ul class="navbar-nav mr-auto">

  <!-- News -->
  <li class="nav-item dropdown mega-dropdown">
    <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">Menü
      <span class="sr-only">(current)</span>
    </a>
    <div class="dropdown-menu mega-menu v-1 z-depth-1 white py-5 px-3" aria-labelledby="navbarDropdownMenuLink1">
      <div class="container">
        <div class="row">
          <div class="col-md-3 sub-menu mb-xl-0 mb-5">
            <h6 class="sub-title pb-3 text-uppercase font-weight-bold">Für Ladenbauer, Messebauer & Co.</h6>
            <ul class="list-unstyled">
              <li class="sub-title text-uppercase">
                <a class="menu-item pl-1 mt-2" href="#!">
                  Nutzen 
                </a>
              </li>
              <li class="sub-title text-uppercase">
                <a class="menu-item pl-1 mt-2" href="#!">
                  Leistung
                </a>
              </li>
              <li class="sub-title text-uppercase">
                <a class="menu-item pl-1 mt-2" href="#!">
                  Preise
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-3 sub-menu mb-xl-0 mb-5">
            <h6 class="sub-title pb-3 text-uppercase font-weight-bold">Für Nutzer</h6>
            <ul class="list-unstyled">
              <li class="sub-title text-uppercase">
                <a class="menu-item pl-1 mt-2" href="#!">
                  Nutzen 
                </a>
              </li>
              <li class="sub-title text-uppercase">
                <a class="menu-item pl-1 mt-2" href="#!">
                  Leistung
                </a>
              </li>
              <li class="sub-title text-uppercase">
                <a class="menu-item pl-1 mt-2" href="#!">
                  Preise
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-3 sub-menu mb-xl-0 mb-5">
            <h6 class="sub-title pb-3 text-uppercase font-weight-bold">Über ddddd.com</h6>
            <ul class="list-unstyled">
              <li class="sub-title text-uppercase">
                <a class="menu-item pl-1 mt-2" href="#!">
                  Über uns 
                </a>
              </li>
              <li class="sub-title text-uppercase">
                <a class="menu-item pl-1 mt-2" href="#!">
                  Team
                </a>
              </li>
              <li class="sub-title text-uppercase">
                <a class="menu-item pl-1 mt-2" href="#!">
                  FAQ
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-3 sub-menu mb-xl-0 mb-5">
            <h6 class="sub-title pb-3 text-uppercase font-weight-bold">Unser Blog</h6>
            <ul class="list-unstyled">
              <li class="sub-title text-uppercase">
                <a class="menu-item pl-1 mt-2" href="#!">
                  Thema 1 
                </a>
              </li>
              <li class="sub-title text-uppercase">
                <a class="menu-item pl-1 mt-2" href="#!">
                  Thema 2
                </a>
              </li>
              <li class="sub-title text-uppercase">
                <a class="menu-item pl-1 mt-2" href="#!">
                  Thema 3
                </a>
              </li>
            </ul>
          </div>

          <div class="w-100 text-center col-12 mt-3">
          <button type="button" class="btn btn-deep-orange mt-4">Kostenloses Dienstleistungsprofil erstellen</button>
          </div>

        </div>
      </div>

    </div>
  </li>

</ul>
<!-- Links -->
    <!-- Social Icon  -->
    <ul class="navbar-nav nav-flex-icons ml-auto align-middle">
      <li class="nav-item">
         <!--Dropdown primary-->
          <div class="dropdown">
            <div class="btn dropdown-toggle badge badge-light p-1"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <img src="https://www.ddddd.com/fileadmin/_processed_/6/c/csm_hartmann_weboptimiert_d5bcd87ede.jpg" alt="Contact Person" style="height: 25px" > Philipp dd
            </div>


            <!--Menu-->
            <div class="dropdown-menu dropdown-primary">
              <a class="dropdown-item" href="#"><i class="fas fa-eye"></i> Übersicht</a>
              <a class="dropdown-item" href="#"><i class="far fa-envelope"></i> Nachrichten</a>
              <a class="dropdown-item" href="#"><i class="fas fa-cog"></i> Einstellungen</a>
            </div>
          </div>
          <!--/Dropdown primary-->

      </li>
      <li class="nav-item">
        <a class="nav-link font-small">
          <i class="fas fa-sign-in-alt fa-xs"></i> Login
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link font-small">
          <i class="fas fa-user-plus fa-xs"></i> Registrieren
        </a>
      </li>
    </ul>
  </div>
</div>

https://www.forwardcontractinguk.com/wp-content/uploads/2017/02/shop-gitting-1-1513x886.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">

<!-- Mask & flexbox options-->
<div class="mask rgba-gradient d-flex justify-content-center align-items-center">
  <!-- Content -->
  <div class="container px-md-3 px-sm-0">
    <!--Grid row-->
    <div class="row wow fadeIn dc-mt-10">
      <!--Grid column-->
      <div class="col mb-4 white-text text-center wow fadeIn">
        <div style="    position: relative;
text-align: center;
border-radius: 3px;
background: hsla(0,0%,100%,.85);
width: 96%;
max-width: 750px;
margin: 0 auto;
padding: 3px 10px;">
          <div class="row no-gutters">
            <div class="col-12 col-md-5 py-2">
              <select class="browser-default custom-select custom-select-lg" id="inputGroupSelect01">
                <option selected>Dienstleister wählen...</option>
                <option value="1">Ladenbauer</option>
                <option value="2">Messebauer</option>
                <option value="3">Architekt / Design</option>
              </select>
            </div>
            <div class="col-12 col-md-5 py-2">
               <input type="text" class="form-control form-control-lg" placeholder="Ort eingeben, z.B. Berlin" aria-label="Example text with button addon"
  aria-describedby="button-addon1" name="city">
            </div>
            <div class="col-12 col-md-2 py-2">
              <button class="btn btn-block btn-primary m-0 px-3" type="button" id="MaterialButton-addon2">ANZEIGEN</button>
            </div>
          </div>

        </div>
      </div>
      <!--Grid column-->
    </div>
    <!--Grid row-->
  </div>
  <!-- Content -->
</div>
<!-- Mask & flexbox options-->

GmbH

Ladenbauer aus Blaubeuren

  </div>
  <div class="col float-right">
    <img src="https://www.storebest.ie/wp-content/uploads/2014/06/Storebest-mod1.jpg" class="img-thumbnail float-right" alt="Storebest Logo" width="150" />
  </div>
</div>


<div class="row">
  <div class="col-12 mt-3">
    <ul class="nav nav-tabs">
      <li class="nav-item">
      <a class="nav-link" href="profil.html">Übersicht</a>
      </li>
      <li class="nav-item">
      <a class="nav-link" href="ansprechpartner.html" >Ansprechpartner</a>
      </li>
      <li class="nav-item">
      <a class="nav-link active font-weight-bold" href="#" >Referenzen</a>
      </li>
      <li class="nav-item">
      <a class="nav-link" href="#" >News</a>
      </li>
      <li class="nav-item">
      <a class="nav-link" href="#" >Auszeichnungen</a>
      </li>
      <li class="nav-item">
      <a class="nav-link" href="#" >Jobs</a>
      </li>
    </ul>
    <div class="tab-content">

        <div class="row">
          <div class="col-md-9">
            <h2>Abgeschlossene Projekte:</h2>
            <p>Einen Eindruck über die vollendeten Leistungen finden Sie hier.</p>
            <div class="filter filter-draggable">
              <div class="filter-nav">
                <button class="btn btn-success active" data-filter="">All</button>
                <button class="btn btn-primary" data-filter="nature">Nature</button>
                <button class="btn btn-primary" data-filter="food">Food</button>
                <button class="btn btn-primary" data-filter="architecture">Architecture</button>
              </div>
              <div class="filter-gallery">
                <div class="item" data-category="nature">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(30).jpg" alt="image">
                  </div>
                </div>
                <div class="item" data-category="architecture">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(1).jpg" alt="image">
                  </div>
                </div>
                <div class="item" data-category="food">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg" alt="image">
                  </div>
                </div>
                <div class="item" data-category="architecture">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(2).jpg" alt="image">
                  </div>
                </div>
                <div class="item" data-category="nature">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(114).jpg" alt="image">
                  </div>
                </div>
                <div class="item" data-category="architecture">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(4).jpg" alt="image">
                  </div>
                </div>
                <div class="item" data-category="architecture">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(6).jpg" alt="image">
                  </div>
                </div>
                <div class="item" data-category="nature">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(115).jpg" alt="image">
                  </div>
                </div>
                <div class="item" data-category="food">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(44).jpg" alt="image">
                  </div>
                </div>
                <div class="item" data-category="architecture">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(5).jpg" alt="image">
                  </div>
                </div>
                <div class="item" data-category="food">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(45).jpg" alt="image">
                  </div>
                </div>
                <div class="item" data-category="food">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(46).jpg" alt="image">
                  </div>
                </div>
                <div class="item" data-category="food">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(47).jpg" alt="image">
                  </div>
                </div>
                <div class="item" data-category="nature">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(111).jpg" alt="image">
                  </div>
                </div>
                <div class="item" data-category="architecture">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(3).jpg" alt="image">
                  </div>
                </div>
                <div class="item" data-category="nature">
                  <div class="item-content">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(112).jpg" alt="image">
                  </div>
                </div>
              </div>
            </div>

            <hr class="hr-dark my-4 w-100">

          </div>
          <div class="col-md-3">
            <p>
              <span class="font-weight-bold"></span><br />
              ddd 9<br />
              dd dd 
            </p>
            <p class="h6 mb-0 mt-2"><u> Kontakt: </u></p>
            <p>
              <i class="fas fa-phone"></i> 0049 - 7309 - 6363<br />
              <i class="fas fa-envelope"></i> info@deinewebseite.de
            </p>
            <button type="button" class="btn btn-sm btn-mdb-color btn-block mt-3"><i class="fas fa-pen-square"></i> Kontaktieren </button>
            <p class="h6 mb-0 mt-5"><u>Links zur Firma:</u></p>
            <p>               

            </p>
            <button type="button" class="btn btn-sm btn btn-yellow btn-block mt-2"><i class="fas fa-pen-square"></i> Jetzt bewerten </button><br />
          </div>
        </div>


  </div>
</div>


<div style="background-color: #37474F;">
  <div class="container">

    <!-- Grid row-->
    <div class="row py-4 d-flex align-items-center">

      <!-- Grid column -->
      <div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
        <h6 class="mb-0 font-small">ddddd.com wird aus Überzeugung und mit <i class="fas fa-heart red-text"></i> betrieben!</h6>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-6 col-lg-7 text-center text-md-right">

        <!-- Facebook -->
        <a class="fb-ic">
          <i class="fab fa-facebook-f white-text mr-4"> </i>
        </a>
        <!-- Twitter -->
        <a class="tw-ic">
          <i class="fab fa-twitter white-text mr-4"> </i>
        </a>
        <!-- Google +-->
        <a class="gplus-ic">
          <i class="fab fa-google-plus-g white-text mr-4"> </i>
        </a>
        <!--Linkedin -->
        <a class="li-ic">
          <i class="fab fa-linkedin-in white-text mr-4"> </i>
        </a>
        <!--Instagram-->
        <a class="ins-ic">
          <i class="fab fa-instagram white-text"> </i>
        </a>

      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row-->

  </div>
</div>

<!-- Footer Links -->
<div class="container text-center text-md-left mt-5">

  <!-- Grid row -->
  <div class="row mt-3 dark-grey-text">

    <!-- Grid column -->
    <div class="col-md-3 col-lg-4 col-xl-3 mb-4">

      <!-- Content -->
      <h6 class="text-uppercase font-weight-bold">Über uns</h6>
      <hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
      <p>Over 35 years of shop design – and no day is like the other! We reinvent ourselves every day in order to perfectly implement your shop concepts. And if ideas, sketches and designs ultimately become real worlds of experience for your products and brands, then we're happy.</p>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">

      <!-- Links -->
      <h6 class="text-uppercase font-weight-bold">Dienstleister</h6>
      <hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
      <p>
        <a class="dark-grey-text" href="#!">Ladenbauer</a>
      </p>
      <p>
        <a class="dark-grey-text" href="#!">Messebauer</a>
      </p>
      <p>
        <a class="dark-grey-text" href="#!">Architekten / Designer</a>
      </p>
      <p>
        <a class="dark-grey-text" href="#!">Dienstleister empfehlen</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 font-weight-bold">Wichtiges</h6>
      <hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
      <p>
        <a class="dark-grey-text" href="#!">Impressum</a>
      </p>
      <p>
        <a class="dark-grey-text" href="#!">AGB</a>
      </p>
      <p>
        <a class="dark-grey-text" href="#!">Datenschutzbestimmungen</a>
      </p>
      <p>
        <a class="dark-grey-text" href="#!">Marketing</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 font-weight-bold">Kontakt</h6>
      <hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
      <p>
        <i class="fas fa-home mr-3"></i> New York, NY 10012, US</p>
      <p>
        <i class="fas fa-envelope mr-3"></i> info@example.com</p>
      <p>
        <i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
      <p>
        <i class="fas fa-print mr-3"></i> + 01 234 567 89</p>

    </div>
    <!-- Grid column -->

  </div>

  <div class="row mt-3 dark-grey-text">
    <div class=" w-100">
      <hr class="hr-dark my-4 w-100">
    </div>
    <div class="col-12 col-md-3">
      <h4 class="h6">Beliebte Regionen:</h4>
    </div>
    <div class="col-12 col-md-9">
      <a href="#" class="badge badge-light mr-2">Berlin</a> 
      <a href="#" class="badge badge-light mr-2">Hambrug</a> 
      <a href="#" class="badge badge-light mr-2">München</a>
      <a href="#" class="badge badge-light mr-2">Ulm</a>
      <a href="#" class="badge badge-light mr-2">Stuttgart</a>
      <a href="#" class="badge badge-light mr-2">Konstanz</a>
      <a href="#" class="badge badge-light mr-2">Hannover</a>
      <a href="#" class="badge badge-light mr-2">Würzburg</a>
      <a href="#" class="badge badge-light mr-2">Hamburg</a>
      <a href="#" class="badge badge-light mr-2">Köln</a>
      <a href="#" class="badge badge-light mr-2">Düsseldorf</a>
      <a href="#" class="badge badge-light mr-2">Berlin</a> 
      <a href="#" class="badge badge-light mr-2">Hambrug</a> 
      <a href="#" class="badge badge-light mr-2">München</a>
      <a href="#" class="badge badge-light mr-2">Ulm</a>
      <a href="#" class="badge badge-light mr-2">Stuttgart</a>
      <a href="#" class="badge badge-light mr-2">Berlin</a> 
      <a href="#" class="badge badge-light mr-2">Hambrug</a> 
      <a href="#" class="badge badge-light mr-2">München</a>
      <a href="#" class="badge badge-light mr-2">Ulm</a>
      <a href="#" class="badge badge-light mr-2">Stuttgart</a>
      <a href="#" class="badge badge-light mr-2">Konstanz</a>
      <a href="#" class="badge badge-light mr-2">Hannover</a>
      <a href="#" class="badge badge-light mr-2">Würzburg</a>
      <a href="#" class="badge badge-light mr-2">Hamburg</a>
      <a href="#" class="badge badge-light mr-2">Köln</a>
      <a href="#" class="badge badge-light mr-2">Düsseldorf</a>
      <a href="#" class="badge badge-light mr-2">Berlin</a> 
      <a href="#" class="badge badge-light mr-2">Hambrug</a> 
      <a href="#" class="badge badge-light mr-2">München</a>
      <a href="#" class="badge badge-light mr-2">Ulm</a>
      <a href="#" class="badge badge-light mr-2">Stuttgart</a>
      <a href="#" class="badge badge-light mr-2">Berlin</a> 
      <a href="#" class="badge badge-light mr-2">Hambrug</a> 
      <a href="#" class="badge badge-light mr-2">München</a>
      <a href="#" class="badge badge-light mr-2">Ulm</a>
      <a href="#" class="badge badge-light mr-2">Stuttgart</a>
      <a href="#" class="badge badge-light mr-2">Konstanz</a>
      <a href="#" class="badge badge-light mr-2">Hannover</a>
      <a href="#" class="badge badge-light mr-2">Würzburg</a>
      <a href="#" class="badge badge-light mr-2">Hamburg</a>
      <a href="#" class="badge badge-light mr-2">Köln</a>
      <a href="#" class="badge badge-light mr-2">Düsseldorf</a>
      <a href="#" class="badge badge-light mr-2">Berlin</a> 
      <a href="#" class="badge badge-light mr-2">Hambrug</a> 
      <a href="#" class="badge badge-light mr-2">München</a>
      <a href="#" class="badge badge-light mr-2">Ulm</a>
      <a href="#" class="badge badge-light mr-2">Stuttgart</a>
      <a href="#" class="badge badge-light mr-2">Berlin</a> 
      <a href="#" class="badge badge-light mr-2">Hambrug</a> 
      <a href="#" class="badge badge-light mr-2">München</a>
      <a href="#" class="badge badge-light mr-2">Ulm</a>
      <a href="#" class="badge badge-light mr-2">Stuttgart</a>
      <a href="#" class="badge badge-light mr-2">Konstanz</a>
      <a href="#" class="badge badge-light mr-2">Hannover</a>
      <a href="#" class="badge badge-light mr-2">Würzburg</a>
      <a href="#" class="badge badge-light mr-2">Hamburg</a>
      <a href="#" class="badge badge-light mr-2">Köln</a>
      <a href="#" class="badge badge-light mr-2">Düsseldorf</a>
      <a href="#" class="badge badge-light mr-2">Berlin</a> 
      <a href="#" class="badge badge-light mr-2">Hambrug</a> 
      <a href="#" class="badge badge-light mr-2">München</a>
      <a href="#" class="badge badge-light mr-2">Ulm</a>
      <a href="#" class="badge badge-light mr-2">Stuttgart</a>
    </div>
    <div class=" w-100">
      <hr class="hr-dark my-4 w-100">
    </div>
    <div class="col-12 col-md-3">
      <h4 class="h6">Beliebte Dienstleistungen:</h4>
    </div>
    <div class="col-12 col-md-9 mb-3">
      <a href="#" class="badge badge-light mr-2">Konstruktion</a> 
      <a href="#" class="badge badge-light mr-2">Möbelbau</a> 
      <a href="#" class="badge badge-light mr-2">Konzeption</a>
      <a href="#" class="badge badge-light mr-2">Projektleitung</a>
      <a href="#" class="badge badge-light mr-2">Design</a>
      <a href="#" class="badge badge-light mr-2">Entwicklung</a>
      <a href="#" class="badge badge-light mr-2">Produktion</a>
      <a href="#" class="badge badge-light mr-2">Logistik</a>
      <a href="#" class="badge badge-light mr-2">Schreinerarbeiten</a>
      <a href="#" class="badge badge-light mr-2">Metallverarbeitung</a>
      <a href="#" class="badge badge-light mr-2">Montage</a>
      <a href="#" class="badge badge-light mr-2">Konstruktion</a> 
      <a href="#" class="badge badge-light mr-2">Möbelbau</a> 
      <a href="#" class="badge badge-light mr-2">Konzeption</a>
      <a href="#" class="badge badge-light mr-2">Projektleitung</a>
      <a href="#" class="badge badge-light mr-2">Design</a>
      <a href="#" class="badge badge-light mr-2">Entwicklung</a>
      <a href="#" class="badge badge-light mr-2">Produktion</a>
      <a href="#" class="badge badge-light mr-2">Logistik</a>
      <a href="#" class="badge badge-light mr-2">Schreinerarbeiten</a>
      <a href="#" class="badge badge-light mr-2">Metallverarbeitung</a>
      <a href="#" class="badge badge-light mr-2">Montage</a>
      <a href="#" class="badge badge-light mr-2">Konstruktion</a> 
      <a href="#" class="badge badge-light mr-2">Möbelbau</a> 
      <a href="#" class="badge badge-light mr-2">Konzeption</a>
      <a href="#" class="badge badge-light mr-2">Projektleitung</a>
      <a href="#" class="badge badge-light mr-2">Design</a>
      <a href="#" class="badge badge-light mr-2">Entwicklung</a>
      <a href="#" class="badge badge-light mr-2">Produktion</a>
      <a href="#" class="badge badge-light mr-2">Logistik</a>
      <a href="#" class="badge badge-light mr-2">Schreinerarbeiten</a>
      <a href="#" class="badge badge-light mr-2">Metallverarbeitung</a>
      <a href="#" class="badge badge-light mr-2">Montage</a>
      <a href="#" class="badge badge-light mr-2">Konstruktion</a> 
      <a href="#" class="badge badge-light mr-2">Möbelbau</a> 
      <a href="#" class="badge badge-light mr-2">Konzeption</a>
      <a href="#" class="badge badge-light mr-2">Projektleitung</a>
      <a href="#" class="badge badge-light mr-2">Design</a>
      <a href="#" class="badge badge-light mr-2">Entwicklung</a>
      <a href="#" class="badge badge-light mr-2">Produktion</a>
      <a href="#" class="badge badge-light mr-2">Logistik</a>
      <a href="#" class="badge badge-light mr-2">Schreinerarbeiten</a>
      <a href="#" class="badge badge-light mr-2">Metallverarbeitung</a>
      <a href="#" class="badge badge-light mr-2">Montage</a>
      <a href="#" class="badge badge-light mr-2">Konstruktion</a> 
      <a href="#" class="badge badge-light mr-2">Möbelbau</a> 
      <a href="#" class="badge badge-light mr-2">Konzeption</a>
      <a href="#" class="badge badge-light mr-2">Projektleitung</a>
      <a href="#" class="badge badge-light mr-2">Design</a>
      <a href="#" class="badge badge-light mr-2">Entwicklung</a>
      <a href="#" class="badge badge-light mr-2">Produktion</a>
      <a href="#" class="badge badge-light mr-2">Logistik</a>
      <a href="#" class="badge badge-light mr-2">Schreinerarbeiten</a>
      <a href="#" class="badge badge-light mr-2">Metallverarbeitung</a>
      <a href="#" class="badge badge-light mr-2">Montage</a>
    </div>
  </div>
  <!-- Grid row -->

</div>
<!-- Footer Links -->

<!-- Copyright -->
<div class="footer-copyright text-center text-black-50 py-3">© 2019 Copyright:
  <a class="dark-grey-text" href="#"> dddd.com</a>
</div>
<!-- Copyright -->

// Material Select Initialization $(document).ready(function() { $('.filter-draggable').mdbFilter({ draggable: true }); }); // Tooltips Initialization


Piotr Glejzer staff commented 5 months ago

May you put your code to our snippets because it's hard to read that.
https://mdbootstrap.com/snippets/
I will check this. Thanks!


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: Desktop
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No