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

RTL Version :

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

Dark Version

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

Menu Center to Right

To move menu from center to right side then just add class navigation-menu along with nav-right

Menu Center to Left

To move menu from center to right side then just add class navigation-menu along with nav-left

Menu Light with Center

If you want menu center and light navigation just add class navigation-menu along with nav-light

Menu Light with Right

If you want menu right side and light navigation just add class navigation-menu nav-right along with nav-light

Menu Light with Left

If you want menu left side and light navigation just add class navigation-menu nav-left along with nav-light

Documentation