Topic: Can't get a simple basic template to run, please help

robert.skibbe pro asked 5 years ago


Hello guys, i just purchased this awesomeness, but i can't get it to work (Javascript Console shows no Errors), my Code ist here. It looks like this: https://picload.org/thumbnail/rdclciio/mdbootstrap.jpg

<!DOCTYPE html>
<html lang="en">

    <head>

        <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</title>

        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

        <!-- Bootstrap core CSS -->
        <link href="../includes/frameworks/MDB_3.4.0_PRO/css/bootstrap.min.css" rel="stylesheet">

        <!-- Material Design Bootstrap -->
        <link href="../includes/frameworks/MDB_3.4.0_PRO/css/mdb.min.css" rel="stylesheet">

        <!-- Your custom styles (optional) -->
        <link href="../includes/frameworks/MDB_3.4.0_PRO/css/style.css" rel="stylesheet">

    </head>

    <body>

        <!-- Start your project here-->
        <!--Double navigation-->
        <header>

            <!-- Sidebar navigation -->
            <ul id="slide-out" class="side-nav fixed custom-scrollbar">

                <!-- Logo -->
                <li>
                    <div class="logo-wrapper waves-light">
                        <a href="#"><img src="http://mdbootstrap.com/wp-content/uploads/2015/12/mdb-white2.png" class="img-fluid flex-center"></a>
                    </div>
                </li>
                <!--/. Logo -->

                <!--Social-->
                <li>
                    <ul class="social">
                        <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
                        <li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
                        <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
                        <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
                    </ul>
                </li>
                <!--/Social-->

                <!--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> Submit blog<i class="fa fa-angle-down rotate-icon"></i></a>
                            <div class="collapsible-body">
                                <ul>
                                    <li><a href="#" class="waves-effect">Submit listing</a>
                                    </li>
                                    <li><a href="#" class="waves-effect">Registration form</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
                            <div class="collapsible-body">
                                <ul>
                                    <li><a href="#" class="waves-effect">For bloggers</a>
                                    </li>
                                    <li><a href="#" class="waves-effect">For authors</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-eye"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>
                            <div class="collapsible-body">
                                <ul>
                                    <li><a href="#" class="waves-effect">Introduction</a>
                                    </li>
                                    <li><a href="#" class="waves-effect">Monthly meetings</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Contact me<i class="fa fa-angle-down rotate-icon"></i></a>
                            <div class="collapsible-body">
                                <ul>
                                    <li><a href="#" class="waves-effect">FAQ</a>
                                    </li>
                                    <li><a href="#" class="waves-effect">Write a message</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </li>
                <!--/. Side navigation links -->

            </ul>
            <!--/. Sidebar navigation -->

            <!--Navbar-->
            <nav class="navbar navbar-fixed-top scrolling-navbar double-nav">

                <!-- SideNav slide-out button -->
                <div class="pull-left">
                    <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
                </div>

                <!-- Breadcrumb-->
                <div class="breadcrumb-dn">
                    <p>Breadcrumb or page title</p>
                </div>

                <ul class="nav navbar-nav pull-right">

                    <li class="nav-item ">
                        <a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link"><i class="fa fa-user"></i> <span class="hidden-sm-down">Account</span></a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> Profile</a>
                        <div class="dropdown-menu dropdown-primary dd-right" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                </ul>

            </nav>
            <!--/.Navbar-->

        </header>
        <!--/Double navigation-->

        <!--Main layout-->
        <main>
            <div class="container-fluid">

                <h2>Your content</h2>

            </div>
        </main>
        <!--/Main layout-->
        <!-- /Start your project here-->

        <!-- SCRIPTS -->

        <!-- JQuery -->
        <script type="text/javascript" src="../includes/frameworks/MDB_3.4.0_PRO/js/jquery.min.js"></script>

        <!-- Bootstrap tooltips -->
        <script type="text/javascript" src="../includes/frameworks/MDB_3.4.0_PRO/js/tether.min.js"></script>

        <!-- Bootstrap core JavaScript -->
        <script type="text/javascript" src="../includes/frameworks/MDB_3.4.0_PRO/js/bootstrap.min.js"></script>

        <!-- MDB core JavaScript -->
        <script type="text/javascript" src="../includes/frameworks/MDB_3.4.0_PRO/js/mdb.min.js"></script>

    </body>

</html>

robert.skibbe pro answered 5 years ago


Oops, my fault. So i think i have to get used to bootstrap 4 (i don't know the difference between 3 and 4 so far) and then i gonna buy MDB4 as well.

Unfortunately, you cannot use MDB 4 with Bootstrap 3. We created MDB 4 to be integrated with Bootstrap 4 which is really different than Bootstrap 3

robert.skibbe pro answered 5 years ago


Oh, okay. So can i use MDB 4 with Bootstrap 3?

It is because you tried to use code from MDB 4 within MDB 3. Here you can find some basic templates for MDB 3

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags