Introduction

Get Start With Landrick. Launch your campaign and benefit from our expertise on designing and managing conversion centered bootstrap4 html page.

Quick start

Start working with Landrick that can provide everything you need to generate awareness, drive traffic, connect. Head to the downloads page.

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load Bootstrap CSS.

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery and our own JavaScript plugins. Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then bootstrap.bundle.min.js, and then our JavaScript plugins.

`<script src="js/jquery.min.js"></script>`

`<script src="js/bootstrap.bundle.min.js"></script>`

Starter Template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

HTML :

<!doctype html>
<html lang="en">
    <head>

        <meta charset="utf-8" />
        <title> Landrick - Saas & Software Landing Page Template </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Site description" />
        <meta name="keywords" content="Your tags" />

        <!-- favicon icon -->
        <link rel="shortcut icon" href="images/favicon.ico">

        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- Main css -->
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    
    </head>

    <body>

        <!-- Loader Start -->
        <div id="#--------">
            --------
            --------
        </div>
        <!-- Loader End -->

        <!-- Navbar Start -->
        <header>
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </header>
        <!-- Navbar End -->

        <!-- Hero Start -->
        <section class="--------">
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </section>
        <!-- Hero End -->

        <!-- Footer Start -->
        <footer>
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </footer>
        <!-- Footer End -->

        <!-- Back To Home Start -->
        <a href="#" class="--------" id="#--------">
            --------
            --------
        </a>
        <!-- Back To Home End -->

        <!-- Javascript Start -->
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/bootstrap.bundle.min.js"></script>
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- Javascript End -->
    </body>
</html>

RTL Version :

In order to have RTL mode enabled, replace the reference of style.css to style-rtl.css

Dark Version :

In order to have Dark mode enabled, replace the reference of style.css to style-dark.css

Dark RTL Version :

In order to have Dark RTL mode enabled, replace the reference of style.css to style-dark-rtl.css

Documentation