Topic: Dropdowm, Slidebar or SideNav and some jquery functions seem dont Work now.
I have the pro version. MDB 4.4.1, and two templates ; but there is something very peculiar; the Sidebar component and some jquery functions suddenly dont work anymore. I have checked Navigators, also I have tested in another computer; My web service, I have downloaded again MDBbootstrap etc ... I would appreciate some advice or comment.
Thanks
Alberto Guerrero Zaro.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
Bartłomiej Malanowski staff commented 7 years ago
Could you please share your code with us?algueza pro commented 7 years ago
Hello Bartolomiej. I have been checking , I think is only local problem, in 'MDB Blog' Template. Template 'mbadmin' is ok and I am working it. Nevertheless, I attachment the code from template Blog-Homepage-5.html Regards <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Material Design Bootstrap Template</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> </head> <body class="fixed-sn grey-skin"> <!--Double navigation--> <header> <!-- Sidebar navigation --> <ul id="slide-out" class="side-nav fixed sn-bg-4 custom-scrollbar"> <!-- Logo --> <li> <div class="logo-wrapper waves-light"> <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a> </div> </li> <!--/. Logo --> <!--Search Form--> <li> <form class="search-form" role="search"> <div class="form-group waves-light"> <input type="text" class="form-control" placeholder="Search"> </div> </form> </li> <!--/.Search Form--> <!-- Side navigation links --> <li> <ul class="collapsible collapsible-accordion"> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i> Homepages<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="Blog-Homepage-1.html" class="waves-effect">Blog Homepage V.1</a> </li> <li><a href="Blog-Homepage-2.html" class="waves-effect">Blog Homepage V.2</a> </li> <li><a href="Blog-Homepage-3.html" class="waves-effect">Blog Homepage V.3</a> </li> <li><a href="Blog-Homepage-4.html" class="waves-effect">Blog Homepage V.4</a> </li> <li><a href="Blog-Homepage-5.html" class="waves-effect">Blog Homepage V.5</a> </li> <li><a href="Blog-Homepage-6.html" class="waves-effect">Blog Homepage V.6</a> </li> <li><a href="Blog-Homepage-7.html" class="waves-effect">Blog Homepage V.7</a> </li> <li><a href="Blog-Homepage-8.html" class="waves-effect">Blog Homepage V.8</a> </li> <li><a href="Blog-Homepage-9.html" class="waves-effect">Blog Homepage V.9</a> </li> <li><a href="Blog-Homepage-10.html" class="waves-effect">Blog Homepage V.10</a> </li> <li><a href="Blog-Homepage-11.html" class="waves-effect">Blog Homepage V.11</a> </li> </ul> </div> </li> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Postpages<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="Blog-Post-Page-1.html" class="waves-effect">Blog Post Page V.1</a> </li> <li><a href="Blog-Post-Page-2.html" class="waves-effect">Blog Post Page V.2</a> </li> <li><a href="Blog-Post-Page-3.html" class="waves-effect">Blog Post Page V.3</a> </li> <li><a href="Blog-Post-Page-4.html" class="waves-effect">Blog Post Page V.4</a> </li> <li><a href="Blog-Post-Page-5.html" class="waves-effect">Blog Post Page V.5</a> </li> <li><a href="Blog-Post-Page-6.html" class="waves-effect">Blog Post Page V.6</a> </li> </ul> </div> </li> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-eye"></i> Author pages<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="Blog-Author-Page-1.html" class="waves-effect">Blog Author Page V.1</a> </li> <li><a href="Blog-Author-Page-2.html" class="waves-effect">Blog Author Page V.2</a> </li> <li><a href="Blog-Author-Page-3.html" class="waves-effect">Blog Author Page V.3</a> </li> <li><a href="Blog-Author-Page-4.html" class="waves-effect">Blog Author Page V.4</a> </li> <li><a href="Blog-Author-Page-5.html" class="waves-effect">Blog Author Page V.5</a> </li> </ul> </div> </li> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Category pages<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="Blog-Category-Page-1.html" class="waves-effect">Blog Category Page V.1</a> </li> <li><a href="Blog-Category-Page-2.html" class="waves-effect">Blog Category Page V.2</a> </li> </ul> </div> </li> <li><a href="https://mdbootstrap.com/newsletter/" class="collapsible-header waves-effect"><i class="fa fa-newspaper-o"></i> Newsletter</a></li> <li><a href="https://mdbootstrap.com/bootstrap-tutorial/" class="collapsible-header waves-effect"><i class="fa fa-book"></i> Tutorials</a></li> <li><a href="https://mdbootstrap.com/product/blog-theme/" class="collapsible-header waves-effect"><i class="fa fa-diamond"></i> Buy Now</a></li> </ul> </li> <!--/. Side navigation links --> <div class="sidenav-bg mask-strong"></div> </ul> <!--/. Sidebar navigation --> <!-- Navbar --> <nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav"> <!-- SideNav slide-out button --> <div class="float-xs-left"> <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a> </div> <!-- Breadcrumb--> <div class="breadcrumb-dn mr-auto"> <p>Material Design for Bootstrap</p> </div> <ul class="nav navbar-nav nav-flex-icons ml-auto"> <li class="nav-item"> <a class="nav-link" data-toggle="modal" data-target="#modalContactForm"><i class="fa fa-envelope pr-2"></i><span class="clearfix d-none d-sm-inline-block"> Contact</span></a> </li> <li class="nav-item"> <a class="nav-link"><i class="fa fa-facebook"></i></a> </li> <li class="nav-item"> <a class="nav-link"><i class="fa fa-twitter"></i></a> </li> <li class="nav-item"> <a class="nav-link"><i class="fa fa-linkedin"></i></a> </li> <li class="nav-item"> <a class="nav-link"><i class="fa fa-snapchat-ghost"></i></a> </li> <li class="nav-item"> <a class="nav-link"><i class="fa fa-instagram"></i></a> </li> <li class="nav-item"> <a class="nav-link"><i class="fa fa-google-plus"></i></a> </li> </ul> </nav> <!-- /.Navbar --> <!--Modal: Contact form--> <div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog cascading-modal" role="document"> <!--Content--> <div class="modal-content"> <!--Header--> <div class="modal-header light-blue darken-3 white-text"> <h4 class="title"><i class="fa fa-pencil"></i> Contact form</h4> <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close"> <span class="white-text" aria-hidden="true">×</span> </button> </div> <!--Body--> <div class="modal-body mb-0"> <div class="md-form form-sm"> <i class="fa fa-envelope prefix"></i> <input type="text" id="form19" class="form-control"> <label for="form19">Your name</label> </div> <div class="md-form form-sm"> <i class="fa fa-lock prefix"></i> <input type="password" id="form20" class="form-control"> <label for="form20">Your email</label> </div> <div class="md-form form-sm"> <i class="fa fa-tag prefix"></i> <input type="text" id="form21" class="form-control"> <label for="form21">Subject</label> </div> <div class="md-form form-sm"> <i class="fa fa-pencil prefix"></i> <textarea type="text" id="form8" class="md-textarea mb-0"></textarea> <label for="form8">Your message</label> </div> <div class="text-center mt-1-half"> <button class="btn btn-info mb-2">Send <i class="fa fa-send ml-1"></i></button> </div> </div> </div> <!--/.Content--> </div> </div> <!--Modal: Contact form--> </header> <!--/.Double navigation--> <!-- Main layout --> <main> <div class="container"> <!--First row--> <div class="row mt-1 mb-3"> <!--Carousel header--> <div class="col-md-12"> <!--Carousel Wrapper--> <div id="captionCarousel" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#captionCarousel" data-slide-to="0" class="active"></li> <li data-target="#captionCarousel" data-slide-to="1"></li> <li data-target="#captionCarousel" data-slide-to="2"></li> </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <!--First slide--> <div class="carousel-item active"> <!--Mask color--> <div class="view hm-black-slight"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20%28100%29.jpg" class="img-fluid" alt=""> <div class="full-bg-img"> </div> </div> <!--Caption--> <div class="carousel-caption caption-2"> <div class="animated fadeInDown"> <h2 class="h2-responsive">Interior design trends in 2017</h2> </div> </div> <!--Caption--> </div> <!--/First slide--> <!--Second slide--> <div class="carousel-item"> <!--Mask color--> <div class="view hm-black-slight"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20%28103%29.jpg" class="img-fluid" alt=""> <div class="full-bg-img"> </div> </div> <!--Caption--> <div class="carousel-caption caption-2"> <div class="animated fadeInDown"> <h2 class="h2-responsive">Ten tips for budding photographers</h2> </div> </div> <!--Caption--> </div> <!--/Second slide--> <!--Third slide--> <div class="carousel-item"> <!--Mask color--> <div class="view hm-black-slight"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(91).jpg" class="img-fluid" alt=""> <div class="full-bg-img"> </div> </div> <!--Caption--> <div class="carousel-caption caption-2"> <div class="animated fadeInDown"> <h2 class="h2-responsive">Amazing month in Indonesian rainforest</h2> </div> </div> <!--Caption--> </div> <!--/Third slide--> </div> <!--/.Slides--> <!--Controls--> <a class="carousel-control-prev" href="#captionCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#captionCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <!--/.Controls--> </div> <!--/.Carousel Wrapper--> </div> <!--/Carousel header--> </div> <!--/First row--> <!--Blog--> <div class="row"> <!--Main listing--> <div class="col-lg-8 mt-1"> <!--Section: Blog v.2--> <section class="section extra-margins text-center mix-listing mt-1"> <!--First post--> <div class="single-post"> <!--First row--> <div class="row"> <!--Grid column--> <div class="col-md-12 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight z-depth-1 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" alt="First sample image"> <a> <div class="mask"></div> </a> </div> <!--Excerpt--> <a href="" class="pink-text"><h6 class="mb-3 mt-3"><i class="fa fa-map "></i><strong> Adventure</strong></h6></a> <h4 class="mb-3">This is title of the news</h4> <p>by <a><strong>Billy Forester</strong></a>, 15/07/2016</p> <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus voluptas.</p> <a class="btn btn-pink btn-rounded">Read more</a> </div> <!--Grid column--> </div> <!--/.First row--> </div> <!--/First post--> <!--Second row--> <div class="row"> <!--Grid column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight z-depth-1 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Others/img%20(33).jpg" alt="Second sample image"> <a> <div class="mask"></div> </a> </div> <!--Excerpt--> <a href="" class="deep-orange-text"><h6 class="mb-3 mt-3"><i class="fa fa-plane"></i><strong> Travel</strong></h6></a> <h4 class="mb-3">This is title of the news</h4> <p>by <a><strong>Billy Forester</strong></a>, 12/07/2016</p> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p> <a class="btn btn-info btn-rounded">Read more</a> </div> <!--Grid column--> <!--Grid column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight z-depth-1 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(33).jpg" alt="Thrid sample image"> <a> <div class="mask"></div> </a> </div> <!--Excerpt--> <a href="" class="cyan-text"><h6 class="mb-3 mt-3"><i class="fa fa-fire "></i><strong> Culture</strong></h6></a> <h4 class="mb-3">This is title of the news</h4> <p>by <a><strong>Billy Forester</strong></a>, 10/07/2016</p> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, quia consequuntur magni dolores eos qui ratione voluptatem.</p> <a class="btn btn-info btn-rounded">Read more</a> </div> <!--Grid column--> </div> <!--/Second row--> <!--Second row--> <div class="row"> <!--Grid column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight z-depth-1 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Others/img%20(28).jpg" alt="Second sample image"> <a> <div class="mask"></div> </a> </div> <!--Excerpt--> <a href="" class="deep-orange-text"><h6 class="mb-3 mt-3"><i class="fa fa-plane"></i><strong> Travel</strong></h6></a> <h4 class="mb-3">This is title of the news</h4> <p>by <a><strong>Billy Forester</strong></a>, 12/07/2016</p> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p> <a class="btn btn-info btn-rounded">Read more</a> </div> <!--Grid column--> <!--Grid column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight z-depth-1 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(100).jpg" alt="Thrid sample image"> <a> <div class="mask"></div> </a> </div> <!--Excerpt--> <a href="" class="cyan-text"><h6 class="mb-3 mt-3"><i class="fa fa-fire "></i><strong> Culture</strong></h6></a> <h4 class="mb-3">This is title of the news</h4> <p>by <a><strong>Billy Forester</strong></a>, 10/07/2016</p> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, quia consequuntur magni dolores eos qui ratione voluptatem.</p> <a class="btn btn-info btn-rounded">Read more</a> </div> <!--Grid column--> </div> <!--/Second row--> <!--Second row--> <div class="row"> <!--Grid column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight z-depth-1 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Others/img%20(40).jpg" alt="Second sample image"> <a> <div class="mask"></div> </a> </div> <!--Excerpt--> <a href="" class="deep-orange-text"><h6 class="mb-3 mt-3"><i class="fa fa-plane"></i><strong> Travel</strong></h6></a> <h4 class="mb-3">This is title of the news</h4> <p>by <a><strong>Billy Forester</strong></a>, 12/07/2016</p> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p> <a class="btn btn-info btn-rounded">Read more</a> </div> <!--Grid column--> <!--Grid column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight z-depth-1 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(133).jpg" alt="Thrid sample image"> <a> <div class="mask"></div> </a> </div> <!--Excerpt--> <a href="" class="cyan-text"><h6 class="mb-3 mt-3"><i class="fa fa-fire "></i><strong> Culture</strong></h6></a> <h4 class="mb-3">This is title of the news</h4> <p>by <a><strong>Billy Forester</strong></a>, 10/07/2016</p> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, quia consequuntur magni dolores eos qui ratione voluptatem.</p> <a class="btn btn-info btn-rounded">Read more</a> </div> <!--Grid column--> </div> <!--/Second row--> <!--Second row--> <div class="row"> <!--Grid column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight z-depth-1 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Others/img%20(35).jpg" alt="Second sample image"> <a> <div class="mask"></div> </a> </div> <!--Excerpt--> <a href="" class="deep-orange-text"><h6 class="mb-3 mt-3"><i class="fa fa-plane"></i><strong> Travel</strong></h6></a> <h4 class="mb-3">This is title of the news</h4> <p>by <a><strong>Billy Forester</strong></a>, 12/07/2016</p> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p> <a class="btn btn-info btn-rounded">Read more</a> </div> <!--Grid column--> <!--Grid column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight z-depth-1 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(118).jpg" alt="Thrid sample image"> <a> <div class="mask"></div> </a> </div> <!--Excerpt--> <a href="" class="cyan-text"><h6 class="mb-3 mt-3"><i class="fa fa-fire "></i><strong> Culture</strong></h6></a> <h4 class="mb-3">This is title of the news</h4> <p>by <a><strong>Billy Forester</strong></a>, 10/07/2016</p> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, quia consequuntur magni dolores eos qui ratione voluptatem.</p> <a class="btn btn-info btn-rounded">Read more</a> </div> <!--Grid column--> </div> <!--/Second row--> <!--Second row--> <div class="row"> <!--Grid column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight z-depth-1 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Others/img%20(36).jpg" alt="Second sample image"> <a> <div class="mask"></div> </a> </div> <!--Excerpt--> <a href="" class="deep-orange-text"><h6 class="mb-3 mt-3"><i class="fa fa-plane"></i><strong> Travel</strong></h6></a> <h4 class="mb-3">This is title of the news</h4> <p>by <a><strong>Billy Forester</strong></a>, 12/07/2016</p> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p> <a class="btn btn-info btn-rounded">Read more</a> </div> <!--Grid column--> <!--Grid column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight z-depth-1 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(2).jpg" alt="Thrid sample image"> <a> <div class="mask"></div> </a> </div> <!--Excerpt--> <a href="" class="cyan-text"><h6 class="mb-3 mt-3"><i class="fa fa-fire "></i><strong> Culture</strong></h6></a> <h4 class="mb-3">This is title of the news</h4> <p>by <a><strong>Billy Forester</strong></a>, 10/07/2016</p> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, quia consequuntur magni dolores eos qui ratione voluptatem.</p> <a class="btn btn-info btn-rounded">Read more</a> </div> <!--Grid column--> </div> <!--/Second row--> <!--Second row--> <div class="row"> <!--Grid column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight z-depth-1 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Others/img%20(41).jpg" alt="Second sample image"> <a> <div class="mask"></div> </a> </div> <!--Excerpt--> <a href="" class="deep-orange-text"><h6 class="mb-3 mt-3"><i class="fa fa-plane"></i><strong> Travel</strong></h6></a> <h4 class="mb-3">This is title of the news</h4> <p>by <a><strong>Billy Forester</strong></a>, 12/07/2016</p> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p> <a class="btn btn-info btn-rounded">Read more</a> </div> <!--Grid column--> <!--Grid column--> <div class="col-md-6 mb-r"> <!--Featured image--> <div class="view overlay hm-white-slight z-depth-1 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(30).jpg" alt="Thrid sample image"> <a> <div class="mask"></div> </a> </div> <!--Excerpt--> <a href="" class="cyan-text"><h6 class="mb-3 mt-3"><i class="fa fa-fire "></i><strong> Culture</strong></h6></a> <h4 class="mb-3">This is title of the news</h4> <p>by <a><strong>Billy Forester</strong></a>, 10/07/2016</p> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, quia consequuntur magni dolores eos qui ratione voluptatem.</p> <a class="btn btn-info btn-rounded">Read more</a> </div> <!--Grid column--> </div> <!--/Second row--> </section> <!--/Section: Blog v.2--> <!--Pagination dark grey--> <nav class="py-5"> <ul class="pagination pg-darkgrey flex-center"> <!--Arrow left--> <li class="page-item"> <a class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <!--Numbers--> <li class="page-item active"><a class="page-link">1</a></li> <li class="page-item"><a class="page-link">2</a></li> <li class="page-item"><a class="page-link">3</a></li> <li class="page-item"><a class="page-link">4</a></li> <li class="page-item"><a class="page-link">5</a></li> <!--Arrow right--> <li class="page-item"> <a class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> <!--/.Pagination dark grey--> </div> <!--/.Main listing--> <!--Sidebar--> <div class="col-lg-4 mt-2"> <!--Author card--> <section> <!--Card--> <div class="card author-card"> <!--Background image--> <div class="card-up"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20%2831%29.jpg" class="img-fluid"> </div> <!--Avatar--> <div class="avatar"> <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg" class="img-fluid img-author"> </div> <div class="card-body"> <!--Name--> <h4 class="card-title"><strong>Martha Barnett</strong></h4> <!--Description--> <p>Hello, I'm Martha. I've 23 years old and my biggest passion is photography. I love travel around the world and take photos of wild animals, landscapes and local people.</p> <ul class="inline-ul circle-icons list-unstyled"> <!--Facebook--> <li><a class="fb-ic"><i class="fa fa-facebook"> </i></a></li> <!--Twitter--> <li><a class="tw-ic"><i class="fa fa-twitter"> </i></a></li> <!--Google +--> <li><a class="gplus-ic"><i class="fa fa-google-plus"> </i></a></li> </ul> </div> </div> <!--Card--> </section> <!--Author card--> <div class="divider-new"> <h3>Popular posts</h3> </div> <!--Popular posts--> <section> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-md-12"> <!--Image--> <div class="view overlay hm-white-slight z-depth-1"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/City/8-col/img%20%2857%29.jpg" class="img-fluid" alt="Post"> <a href="#!"> <div class="mask"></div> </a> </div> <!--Post data--> <div class="pb-4 mb-3 mt-3"> <p class="text-muted float-left"><i class="fa fa-clock-o pr-2"></i>23/10/2017</p> <span class="text-muted float-right"><i class="fa fa-comments-o pr-2"></i>145</span> </div> <!--Post title--> <a href="#!" class="text-hover">This is title of the news</a> <div class="post-border mt-3"></div> </div> <!--Grid column--> <!--Second column--> <div class="col-md-12"> <!--Image--> <div class="view overlay hm-white-slight z-depth-1"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20%28131%29.jpg" class="img-fluid" alt="Post"> <a href="#!"> <div class="mask"></div> </a> </div> <!--Post data--> <div class="pb-4 mb-3 mt-3"> <p class="text-muted float-left" ><i class="fa fa-clock-o pr-2"></i> 22/10/2017</p> <span class="text-muted float-right"><i class="fa fa-comments-o pr-2"></i> 128</span> </div> <!--Post title--> <a href="#!" class="text-hover">This is title of the news</a> <div class="post-border mt-3"></div> </div> <!--Second column--> <!--Third column--> <div class="col-md-12"> <!--Image--> <div class="view overlay hm-white-slight z-depth-1"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20%28120%29.jpg" class="img-fluid" alt="Post"> <a href="#!"> <div class="mask"></div> </a> </div> <!--Post data--> <div class="pb-4 mb-3 mt-3"> <p class="text-muted float-left" ><i class="fa fa-clock-o pr-2"></i> 21/10/2017</p> <span class="text-muted float-right"><i class="fa fa-comments-o pr-2"></i> 203</span> </div> <!--Post title--> <a href="#!" class="text-hover">This is title of the news</a> <div class="post-border mt-3 mb-0"></div> </div> <!--Third column--> </div> <!--Grid row--> </section> <!--Popular posts--> <div class="divider-new"> <h3>Newsletter</h3> </div> <!--Newsletter--> <section> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-md-12"> <!--Form without header--> <div class="card"> <div class="card-body"> <!--Header--> <div class="text-center"> <h3><i class="fa fa-pencil"></i> Subscribe:</h3> <hr class="mt-2 mb-2"> </div> <!--Body--> <p>We'll write rarely, but only the best content.</p> <br> <!--Body--> <div class="md-form"> <i class="fa fa-user prefix"></i> <input type="text" id="form3" class="form-control"> <label for="form3">Your name</label> </div> <div class="md-form"> <i class="fa fa-envelope prefix"></i> <input type="text" id="form2" class="form-control"> <label for="form2">Your email</label> </div> <div class="text-center"> <button class="btn btn-rounded btn-default">Send</button> </div> </div> </div> <!--Form without header--> </div> <!--Grid column--> </div> <!--Grid row--> </section> <!--Newsletter--> <div class="divider-new"> <h3>Recent posts</h3> </div> <!--Section: Recent posts--> <section class="section"> <div class="post-border"> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-4"> <!--Image--> <div class="view overlay hm-white-slight z-depth-1 mb-1-half"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28125%29.jpg" class="img-fluid" alt="Post"> <a> <div class="mask"></div> </a> </div> </div> <!--Grid column--> <!--Second column--> <div class="col-8 mb-1"> <!--Post data--> <div class="mb-2-half "> <p class="text-muted float-left" ><i class="fa fa-clock-o"></i> 20/01/2017</p> <span class="text-muted float-right"><i class="fa fa-comments-o"></i> 215</span> </div> <a href="#!" class="text-hover ">This is news title</a> </div> <!--Second column--> </div> <!--Grid row--> </div> <div class="post-border"> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-4"> <!--Image--> <div class="view overlay hm-white-slight z-depth-1 mb-1-half"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28123%29.jpg" class="img-fluid" alt="Post"> <a> <div class="mask"></div> </a> </div> </div> <!--Grid column--> <!--Second column--> <div class="col-8 mb-1"> <!--Post data--> <div class="mb-2-half "> <p class="text-muted float-left" ><i class="fa fa-clock-o"></i> 19/01/2017</p> <span class="text-muted float-right"><i class="fa fa-comments-o"></i> 176</span> </div> <a href="#!" class="text-hover ">This is news title</a> </div> <!--Second column--> </div> <!--Grid row--> </div> <div class="post-border"> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-4"> <!--Image--> <div class="view overlay hm-white-slight z-depth-1 mb-1-half"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28119%29.jpg" class="img-fluid" alt="Post"> <a> <div class="mask"></div> </a> </div> </div> <!--Grid column--> <!--Second column--> <div class="col-8 mb-1"> <!--Post data--> <div class="mb-2-half "> <p class="text-muted float-left" ><i class="fa fa-clock-o"></i> 18/01/2017</p> <span class="text-muted float-right"><i class="fa fa-comments-o"></i> 190</span> </div> <a href="#!" class="text-hover ">This is news title</a> </div> <!--Second column--> </div> <!--Grid row--> </div> <div class="post-border"> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-4"> <!--Image--> <div class="view overlay hm-white-slight z-depth-1 mb-1-half"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2892%29.jpg" class="img-fluid" alt="Post"> <a> <div class="mask"></div> </a> </div> </div> <!--Grid column--> <!--Second column--> <div class="col-8 mb-1"> <!--Post data--> <div class="mb-2-half "> <p class="text-muted float-left" ><i class="fa fa-clock-o"></i> 17/01/2017</p> <span class="text-muted float-right"><i class="fa fa-comments-o"></i> 278</span> </div> <a href="#!" class="text-hover ">This is news title</a> </div> <!--Second column--> </div> <!--Grid row--> </div> <div class="post-border"> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-4"> <!--Image--> <div class="view overlay hm-white-slight z-depth-1 mb-1-half"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28132%29.jpg" class="img-fluid" alt="Post"> <a> <div class="mask"></div> </a> </div> </div> <!--Grid column--> <!--Second column--> <div class="col-8 mb-1"> <!--Post data--> <div class="mb-2-half "> <p class="text-muted float-left" ><i class="fa fa-clock-o"></i> 16/01/2017</p> <span class="text-muted float-right"><i class="fa fa-comments-o"></i> 321</span> </div> <a href="#!" class="text-hover ">This is news title</a> </div> <!--Second column--> </div> <!--Grid row--> </div> </section> <!--Section: Recent posts--> <div class="divider-new"> <h3>Featured posts</h3> </div> <!--Featured posts--> <section> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-md-12"> <!--Carousel Wrapper--> <div id="carousel-example-2" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-2" data-slide-to="1"></li> <li data-target="#carousel-example-2" data-slide-to="2"></li> </ol> <!--Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <!--First slide--> <div class="carousel-item active"> <!--Mask color--> <div class="view hm-black-light"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20(126).jpg" class="img-fluid" alt=""> <a href="#!"> <div class="mask flex-center"></div> </a> </div> <!--Caption--> <div class="carousel-caption"> <div class="animated fadeInDown"> <h3 class="h3-responsive"><a href="#!" class="white-text">Your health</a></h3> <p><a href="#!" class="white-text">Take care of a your activity.</a></p> </div> </div> <!--Caption--> </div> <!--First slide--> <!--Second slide--> <div class="carousel-item"> <!--Mask color--> <div class="view hm-black-light"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20(128).jpg" class="img-fluid" alt=""> <a href="#!"> <div class="mask flex-center"></div> </a> </div> <!--Caption--> <div class="carousel-caption"> <div class="animated fadeInDown"> <h3 class="h3-responsive"><a href="#!" class="white-text">Sea adventure</a></h3> <p><a href="#!" class="white-text">Harry's life in Australia.</a></p> </div> </div> <!--Caption--> </div> <!--Second slide--> <!--Third slide--> <div class="carousel-item"> <!--Mask color--> <div class="view hm-black-light"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20(133).jpg" class="img-fluid" alt=""> <a href="#!"> <div class="mask flex-center"></div> </a> </div> <!--Caption--> <div class="carousel-caption"> <div class="animated fadeInDown"> <h3 class="h3-responsive"><a href="#!" class="white-text">Beautiful interiors</a></h3> <p><a href="#!" class="white-text">Meet beautiful Italian homes.</a></p> </div> </div> <!--Caption--> </div> <!--Third slide--> </div> <!--Slides--> <!--Controls--> <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <!--.Controls--> </div> <!--Carousel Wrapper--> </div> <!--Grid column--> </div> <!--Grid row--> </section> <!--Featured posts--> <div class="divider-new"> <h3 class="h3-responsive">Archive</h3> </div> <!--Archive--> <section class="archive"> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-md-12 text-center"> <!--List--> <ul class="list-unstyled"> <li> <h5><a href="#!">August 2016</a></h5> </li> <li> <h5><a href="#!">July 2016</a></h5> </li> <li> <h5><a href="#!">June 2016</a></h5> </li> <li> <h5><a href="#!">May 2016</a></h5> </li> <li> <h5><a href="#!">April 2016</a></h5> </li> </ul> <!--List--> </div> <!--Grid column--> </div> <!--Grid row--> </section> <!--Archive--> <div class="divider-new " > <h3 class="h3-responsive">Follow @Martha</h3> </div> <!--Instagram--> <section class="sidebar-imgs"> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-md-12"> <!--Instagram Photos--> <ul class="instagram-photos"> <li> <div class="view overlay hm-white-slight z-depth-1"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/instagram/img%20(5).jpg" alt="Instagram photo cap"> <a href="#!"> <div class="mask"></div> </a> </div> </li> <li> <div class="view overlay hm-white-slight z-depth-1"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/instagram/img%20(3).jpg" alt="Instagram photo cap"> <a href="#!"> <div class="mask"></div> </a> </div> </li> <li> <div class="view overlay hm-white-slight z-depth-1"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/instagram/img%20(1).jpg" alt="Instagram photo cap"> <a href="#!"> <div class="mask"></div> </a> </div> </li> <div class="hidden-xs-down no-height"><br></div> <li> <div class="view overlay hm-white-slight z-depth-1"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/instagram/img%20(8).jpg" alt="Instagram photo cap"> <a href="#!"> <div class="mask"></div> </a> </div> </li> <li> <div class="view overlay hm-white-slight z-depth-1"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/instagram/img%20(2).jpg" alt="Instagram photo cap"> <a href="#!"> <div class="mask"></div> </a> </div> </li> <li> <div class="view overlay hm-white-slight z-depth-1"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/instagram/img%20(7).jpg" alt="Instagram photo cap"> <a href="#!"> <div class="mask"></div> </a> </div> </li> <div class="hidden-xs-down no-height"><br></div> <li> <div class="view overlay hm-white-slight z-depth-1"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/instagram/img%20(6).jpg" alt="Instagram photo cap"> <a href="#!"> <div class="mask"></div> </a> </div> </li> <li> <div class="view overlay hm-white-slight z-depth-1"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/instagram/img%20(4).jpg" alt="Instagram photo cap"> <a href="#!"> <div class="mask"></div> </a> </div> </li> <li> <div class="view overlay hm-white-slight z-depth-1"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/instagram/img%20(9).jpg" alt="Instagram photo cap"> <a href="#!"> <div class="mask"></div> </a> </div> </li> </ul> <!--Instagram photos --> </div> <!--Grid column--> </div> <!--Grid row--> </section> <!--Instagram--> </div> <!--Sidebar--> </div> <!--/Blog--> </div> </main> <!--/ Main layout --> <!--Footer--> <footer class="page-footer center-on-small-only"> <!--Footer Links--> <div class="container"> <!--First row--> <div class="row"> <!--First column--> <div class="col-xl-4 col-lg-4 col-md-6 mt-1"> <!--About--> <h5 class="title">ABOUT MATERIAL DESIGN</h5> <p>Material Design (codenamed Quantum Paper) is a design language developed by Google.</p> <p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p> <!--/About --> </div> <!--/First column--> <hr class="w-100 clearfix d-md-none"> <!--Second column--> <div class="col-xl-4 col-lg-4 col-md-6 text-center mt-1"> <!--Contact--> <h5 class="title">Contact info</h5> <p>New York, NY 10012<br> United States<br> + 01 234 567 89<br> info@gmail.com</p> <!-- Contact --> <!--Facebook--> <a type="button" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></a> <!--Twitter--> <a type="button" class="btn-floating btn-tw"><i class="fa fa-twitter"></i></a> <!--Linkedin--> <a type="button" class="btn-floating btn-li"><i class="fa fa-linkedin"></i></a> </div> <!--/Second column--> <hr class="w-100 clearfix d-lg-none"> <!--Third column--> <div class="col-xl-4 col-lg-4 mt-1"> <!--Image--> <div class="view hm-black-strong"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20%2826%29.jpg" class="img-fluid"> <a href="#!" class="mask d-flex align-items-center justify-content-center"> <p class="white-text text-center">Read about my open expeditions</p> </a> </div> </div> <!--/Third column--> </div> <!--/First row--> </div> <!--/Footer Links--> <br> <!--Copyright--> <div class="footer-copyright"> <div class="container-fluid"> © 2017 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a> </div> </div> <!--/Copyright--> </footer> <!--/Footer--> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <!-- Tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> <script> // SideNav init $(".button-collapse").sideNav(); var el = document.querySelector('.custom-scrollbar'); Ps.initialize(el); // Animation init new WOW().init(); //Modal contact init $('#modal-contact').on('shown.bs.modal', function () { $('#myInput').focus() }) </script> </body> </html>Bartłomiej Malanowski staff commented 7 years ago
Please share your package with me. I'll take a look at this. Here's my email: b.malanowski@mdbootstrap.com