Bootstrap - Navigacijski meni

Kreiranje jednostavnog menija sa Bootstrap-om

Pomoću komponenti navigacijske trake Bootstrap-a možete kreirati responzivnu navigaciju za vašu web stranicu ili aplikaciju. Ovaj prilagodljivi navigacijski meni će se prikazivati različito u zavisnosti od uređaja. Možete kreirati različite varijacije menija, poput navigacijskih traka s padajućim stavkama i okvirima za pretraživanje, kao i fiksno postavljenje menija s mnogo manje napora. Sljedeći primjer će vam pokazati kako kreirati jednostavnu statičku navigaciju s navigacijskim linkovima. 

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">IT TUTORIJALI</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link active">Početna</a>
            <a href="#" class="nav-item nav-link">Kursevi</a>
            <a href="#" class="nav-item nav-link">O nama</a>
            <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
        </div>
        <div class="navbar-nav ml-auto">
            <a href="#" class="nav-item nav-link">Prijavi se</a>
        </div>
    </div>
</nav>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Statična navigacija</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link active">Početna</a>
            <a href="#" class="nav-item nav-link">Kursevi</a>
            <a href="#" class="nav-item nav-link">O nama</a>
            <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
        </div>
            <div class="navbar-nav ml-auto">
                <a href="#" class="nav-item nav-link">Prijavi se</a>
            </div>
      </div>
    </nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:


Takođe umjesto običnog teksta, sliku svog logotipa možete smjestiti u navigacijski meni. Međutim, morate ručno postaviti visinu logotipa kako bi se pravilno uklopio u navigaciju, kao što je prikazano u sljedećem primjeru: 

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">
        <img src="../../img/brand/dark.svg" height="28" alt="IT TUTORIJALI">
    </a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link active">Početna</a>
            <a href="#" class="nav-item nav-link">Kursevi</a>
            <a href="#" class="nav-item nav-link">O nama</a>
            <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
        </div>
        <div class="navbar-nav ml-auto">
            <a href="#" class="nav-item nav-link">Prijavi se</a>
        </div>
    </div>
</nav>

Prikaz koda iz gornjeg primjera izgledaće ovako:



Dodavanje padajuće liste u navigaciju

Takođe možete uključiti padajuće stavke i okvir za pretraživanje unutar navigacijskog menija, kao što je prikazano u sljedećem primjeru: 

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">IT TUTORIJALI</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link active">Početna</a>
            <a href="#" class="nav-item nav-link">O nama</a>
            <div class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Kursevi</a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">HTML5-CSS3</a>
                    <a href="#" class="dropdown-item">JavaScript</a>
                    <a href="#" class="dropdown-item">Bootstrap 4</a>
                </div>
            </div>
        </div>
        <form class="form-inline">
            <div class="input-group">                    
                <input type="text" class="form-control" placeholder="Pretraga">
                <div class="input-group-append">
                    <button type="button" class="btn btn-secondary"><i class="fa fa-search"></i></button>
                </div>
            </div>
        </form>
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link">Prijavi se</a>
        </div>
    </div>
</nav>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Statična navigacija sa padajućom listom i pretragom</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Početna</a>
                <a href="#" class="nav-item nav-link">o nama</a>
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Kursevi</a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">HTML5-CSS3</a>
                        <a href="#" class="dropdown-item">JavaScript</a>
                        <a href="#" class="dropdown-item">Bootstrap 4</a>
                    </div>
                </div>
            </div>
            <form class="form-inline">
                <div class="input-group">                    
                    <input type="text" class="form-control" placeholder="Pretraga">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-secondary"><i class="fa fa-search"></i></button>
                    </div>
                </div>
            </form>
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link">Prijavi se</a>
            </div>
        </div>
    </nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:



Postavljanje pretrage u navigaciju

Obrazac za pretragu (Search form) vrlo je uobičajena komponenta navigacijskih menija i viđali ste ga na raznim web stranicama prilično često. U navigacijski meni možete smjestiti razne kontrole obrazaca i komponente pomoću klase .form-inline na elementu <form>, kao što je prikazano u sljedećem primjeru: 

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a href="#" class="navbar-brand">IT TUTORIJALI</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link active">Početna</a>
            <a href="#" class="nav-item nav-link">O nama</a>
            <a href="#" class="nav-item nav-link">Kursevi</a>
        </div>
        <form class="form-inline ml-auto">
            <input type="text" class="form-control mr-sm-2" placeholder="Pretraga">
            <button type="submit" class="btn btn-outline-light">Traži</button>
        </form>
    </div>
</nav>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Navigacija sa Search Form-om</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Početna</a>
                <a href="#" class="nav-item nav-link">O nama</a>
                <a href="#" class="nav-item nav-link">Kursevi</a>
            </div>
            <form class="form-inline ml-auto">
                <input type="text" class="form-control mr-sm-2" placeholder="Pretraga">
                <button type="submit" class="btn btn-outline-light">Traži</button>
            </form>
        </div>
    </nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:


Promjena boje navigacije

Boju navigacijske trake možete promijeniti i pomoću klase .navbar-light za svijetle boje pozadine ili .navbar-dark za tamne boje pozadine. Zatim ga prilagodite klasama pomoćnih boja, kao što su: .bg-dark, .bg-primary itd. Alternativno, svojstvo boje pozadine možete primijeniti i na element .navbar kako biste prilagodili navigacije, kao što je prikazano u sljedećem primjeru: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Šeme boje navigacije</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
    .navbar{
        margin-bottom: 1rem;
    }
</style>
</head>
<body>
<div class="bs-example">
    <nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Početna</a>
                <a href="#" class="nav-item nav-link">O nama</a>
                <a href="#" class="nav-item nav-link">Kursevi</a>
            </div>
            <form class="form-inline ml-auto">
                <input type="text" class="form-control mr-sm-2" placeholder="Pretraga">
                <button type="submit" class="btn btn-outline-light">Traži</button>
            </form>
        </div>
    </nav>
  
    <nav class="navbar navbar-expand-lg navbar navbar-dark bg-primary">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Početna</a>
                <a href="#" class="nav-item nav-link">O nama</a>
                <a href="#" class="nav-item nav-link">Kursevi</a>
            </div>
            <form class="form-inline ml-auto">
                <input type="text" class="form-control mr-sm-2" placeholder="Pretraga">
                <button type="submit" class="btn btn-outline-light">Traži</button>
            </form>
        </div>
    </nav>

    <nav class="navbar navbar-expand-lg navbar navbar-dark bg-secondary">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Početna</a>
                <a href="#" class="nav-item nav-link">O nama</a>
                <a href="#" class="nav-item nav-link">Kursevi</a>
            </div>
            <form class="form-inline ml-auto">
                <input type="text" class="form-control mr-sm-2" placeholder="Pretraga">
                <button type="submit" class="btn btn-outline-light">Traži</button>
            </form>
        </div>
    </nav>

    <nav class="navbar navbar-expand-lg navbar navbar-dark bg-success">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Početna</a>
                <a href="#" class="nav-item nav-link">O nama</a>
                <a href="#" class="nav-item nav-link">Kursevi</a>
            </div>
            <form class="form-inline ml-auto">
                <input type="text" class="form-control mr-sm-2" placeholder="Pretraga">
                <button type="submit" class="btn btn-outline-light">Traži</button>
            </form>
        </div>
    </nav>

    <nav class="navbar navbar-expand-lg navbar navbar-dark bg-info">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Početna</a>
                <a href="#" class="nav-item nav-link">O nama</a>
                <a href="#" class="nav-item nav-link">Kursevi</a>
            </div>
            <form class="form-inline ml-auto">
                <input type="text" class="form-control mr-sm-2" placeholder="Pretraga">
                <button type="submit" class="btn btn-outline-light">Traži</button>
            </form>
        </div>
    </nav>

    <nav class="navbar navbar-expand-lg navbar navbar-dark bg-danger">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Početna</a>
                <a href="#" class="nav-item nav-link">O nama</a>
                <a href="#" class="nav-item nav-link">Kursevi</a>
            </div>
            <form class="form-inline ml-auto">
                <input type="text" class="form-control mr-sm-2" placeholder="Pretraga">
                <button type="submit" class="btn btn-outline-light">Traži</button>
            </form>
        </div>
    </nav>

    <nav class="navbar navbar-expand-lg navbar navbar-dark bg-warning">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Početna</a>
                <a href="#" class="nav-item nav-link">O nama</a>
                <a href="#" class="nav-item nav-link">Kursevi</a>
            </div>
            <form class="form-inline ml-auto">
                <input type="text" class="form-control mr-sm-2" placeholder="Pretraga">
                <button type="submit" class="btn btn-outline-light">Traži</button>
            </form>
        </div>
    </nav>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Početna</a>
                <a href="#" class="nav-item nav-link">O nama</a>
                <a href="#" class="nav-item nav-link">Kursevi</a>
            </div>
            <form class="form-inline ml-auto">
                <input type="text" class="form-control mr-sm-2" placeholder="Pretraga">
                <button type="submit" class="btn btn-outline-light">Traži</button>
            </form>
        </div>
    </nav>
    
    <nav class="navbar navbar-expand-lg navbar navbar-light" style="background-color: #e3f2fd;">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Početna</a>
                <a href="#" class="nav-item nav-link">O nama</a>
                <a href="#" class="nav-item nav-link">Kursevi</a>
            </div>
            <form class="form-inline ml-auto">
                <input type="text" class="form-control mr-sm-2" placeholder="Pretraga">
                <button type="submit" class="btn btn-outline-light">Traži</button>
            </form>
        </div>
    </nav>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:


Kreiranje fiksirane navigacije

Primijenite klasu .fixed-top na element .navbar da biste postavili navigacijsku traku na vrhu okvira prikaza, tako da se neće pomicati sa stranicom. Pogledajmo primjer: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Fiksiranje navigacije na vrh stranice</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
    body{
        padding-top: 70px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Početna</a>
                <a href="#" class="nav-item nav-link">O nama</a>
                <a href="#" class="nav-item nav-link">Kursevi</a>
                <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
            </div>
            <div class="navbar-nav ml-auto">
                <a href="#" class="nav-item nav-link">Prijavi se</a>
            </div>
        </div>
    </nav>

    <!-- Demo sadržaj -->    
    <div class="container">
    <div class="jumbotron">
          <h1>Fiksirana navigacija</h1>
          <p class="lead">Traka navigacije fiksirana je na vrhu i ne pomiče se s ostatkom stranice.</p>
      </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu 
        sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus
         nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl 
        bibendum scelerisque non non purus. Suspendisse varius nibh non 
        aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus
         fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. 
        Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer 
        aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus
         ligula.Quis quam ut magna consequat faucibus. Pellentesque eget nisi a 
        mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra 
        sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida 
        nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, 
        commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue 
        dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, 
        bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui 
        molestie euismod. Curabitur et diam tristique, accumsan nunc eu, 
        hendrerit tellus. Tibulum consectetur scelerisque lacus, ac fermentum 
        lorem convallis sed.</p>

        <p>Orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a 
        iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus 
        scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id 
        mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut 
        leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. 
        Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, 
        fermentum lacus et, viverra tellus. Phasellus sodales libero nec dui 
        convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum 
        primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu 
        elementum nibh, quis varius libero.Nam eget purus nec est consectetur 
        vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. 
        Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet 
        est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non 
        laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. 
        Donec vitae ullamcorper purus. Vivamus non metus ac justo porta 
        volutpat.</p>

        <p>Pulvinar leo id risus pellentesque vestibulum. Sed diam libero,
        sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae
        lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. 
        Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam 
        lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin 
        imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis 
        feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sed 
        sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, 
        dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id 
        pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id.Nullam 
        hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. 
        Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In 
        dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus 
        condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. 
        Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus
         congue vestibulum ligula sed consequat.</p>

        <p>Enim arcu, interdum vel metus dignissim, venenatis feugiat 
        purus. Nulla posuere orci ut leo sodales, sed cursus dolor ornare. Cum 
        sociis natoque penatibus et magnis dis parturient montes, nascetur 
        ridiculus mus. Etiam sit amet quam orci. Nulla sollicitudin lectus eget 
        posuere venenatis. Sed vestibulum elementum sagittis. Quisque tristique
         tortor quis feugiat sollicitudin. Ut pellentesque luctus vulputate. Ut at 
        odio ac erat blandit vehicula ut eget urna. In hac habitasse platea 
        dictumst. Nullam ut iaculis nibh, eget eleifend elit.Convallis eget pretium 
        eu, bibendum non leo. Proin suscipit purus adipiscing dolor gravida, in 
        fermentum sapien blandit. Praesent pellentesque ligula dui, in gravida 
        turpis vehicula ac. Pellentesque hendrerit nunc ut luctus hendrerit. 
        Aliquam nec tincidunt urna. Ut interdum nec odio non interdum. 
        Curabitur ligula justo, dapibus non ligula tristique, dapibus tristique nulla.
         Aliquam pulvinar dapibus eros, rutrum pretium urna iaculis ut. Nam est 
        est, tempus id egestas et, viverra in dui. Aliquam gravida orci tortor, sed 
        congue justo ornare vel. Cras in quam consectetur eros varius 
        scelerisque. Ut vel fermentum purus. Nullam interdum blandit turpis, id 
        pellentesque massa feugiat at. Ut sed lectus lectus. Vestibulum ante 
        ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
        Nulla rutrum, ante quis convallis ultricies, magna quam rhoncus erat, in 
        lacinia libero magna a ipsum.</p>

        <p>Fusce enim arcu, interdum vel metus dignissim, venenatis feugiat purus. 
        Nulla posuere orci ut leo sodales, sed cursus dolor ornare. 
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
        Etiam sit amet quam orci. Nulla sollicitudin lectus eget 
        posuere venenatis. Sed vestibulum elementum sagittis. Quisque tristique 
        tortor quis feugiat sollicitudin. Ut pellentesque luctus vulputate. Ut at 
        odio ac erat blandit vehicula ut eget urna. In hac habitasse platea 
        dictumst. Nullam ut iaculis nibh, eget eleifend elit.</p>
    </div>
</div>
</body>
</html>

Kreiranje fiksne navigacije na dnu stranice

Slično prethodnom primjeru, dodajte klasu .fixed-bottom na navbar element da biste postavili navigaciju na dnu stranice, kao što je prikazano u sljedećem primjeru: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Fiksiranje navigacije na dno stranice</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
    body{
        padding-top: 70px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-bottom">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Početna</a>
                <a href="#" class="nav-item nav-link">O nama</a>
                <a href="#" class="nav-item nav-link">Kursevi</a>
                <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
            </div>
            <div class="navbar-nav ml-auto">
                <a href="#" class="nav-item nav-link">Prijavi se</a>
            </div>
        </div>
    </nav>

    <!-- Demo sadržaj -->    
    <div class="container">
    <div class="jumbotron">
          <h1>Fiksirana navigacija</h1>
          <p class="lead">Traka navigacije fiksirana je na dno i ne pomiče se s ostatkom stranice.</p>
      </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu 
        sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus
         nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl 
        bibendum scelerisque non non purus. Suspendisse varius nibh non 
        aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus
         fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. 
        Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer 
        aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus
         ligula.Quis quam ut magna consequat faucibus. Pellentesque eget nisi a 
        mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra 
        sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida 
        nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, 
        commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue 
        dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, 
        bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui 
        molestie euismod. Curabitur et diam tristique, accumsan nunc eu, 
        hendrerit tellus. Tibulum consectetur scelerisque lacus, ac fermentum 
        lorem convallis sed.</p>

        <p>Orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a 
        iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus 
        scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id 
        mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut 
        leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. 
        Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, 
        fermentum lacus et, viverra tellus. Phasellus sodales libero nec dui 
        convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum 
        primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu 
        elementum nibh, quis varius libero.Nam eget purus nec est consectetur 
        vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. 
        Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet 
        est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non 
        laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. 
        Donec vitae ullamcorper purus. Vivamus non metus ac justo porta 
        volutpat.</p>

        <p>Pulvinar leo id risus pellentesque vestibulum. Sed diam libero,
        sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae
        lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. 
        Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam 
        lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin 
        imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis 
        feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sed 
        sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, 
        dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id 
        pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id.Nullam 
        hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. 
        Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In 
        dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus 
        condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. 
        Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus
         congue vestibulum ligula sed consequat.</p>

        <p>Enim arcu, interdum vel metus dignissim, venenatis feugiat 
        purus. Nulla posuere orci ut leo sodales, sed cursus dolor ornare. Cum 
        sociis natoque penatibus et magnis dis parturient montes, nascetur 
        ridiculus mus. Etiam sit amet quam orci. Nulla sollicitudin lectus eget 
        posuere venenatis. Sed vestibulum elementum sagittis. Quisque tristique
         tortor quis feugiat sollicitudin. Ut pellentesque luctus vulputate. Ut at 
        odio ac erat blandit vehicula ut eget urna. In hac habitasse platea 
        dictumst. Nullam ut iaculis nibh, eget eleifend elit.Convallis eget pretium 
        eu, bibendum non leo. Proin suscipit purus adipiscing dolor gravida, in 
        fermentum sapien blandit. Praesent pellentesque ligula dui, in gravida 
        turpis vehicula ac. Pellentesque hendrerit nunc ut luctus hendrerit. 
        Aliquam nec tincidunt urna. Ut interdum nec odio non interdum. 
        Curabitur ligula justo, dapibus non ligula tristique, dapibus tristique nulla.
         Aliquam pulvinar dapibus eros, rutrum pretium urna iaculis ut. Nam est 
        est, tempus id egestas et, viverra in dui. Aliquam gravida orci tortor, sed 
        congue justo ornare vel. Cras in quam consectetur eros varius 
        scelerisque. Ut vel fermentum purus. Nullam interdum blandit turpis, id 
        pellentesque massa feugiat at. Ut sed lectus lectus. Vestibulum ante 
        ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
        Nulla rutrum, ante quis convallis ultricies, magna quam rhoncus erat, in 
        lacinia libero magna a ipsum.</p>

        <p>Fusce enim arcu, interdum vel metus dignissim, venenatis feugiat purus. 
        Nulla posuere orci ut leo sodales, sed cursus dolor ornare. 
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
        Etiam sit amet quam orci. Nulla sollicitudin lectus eget 
        posuere venenatis. Sed vestibulum elementum sagittis. Quisque tristique 
        tortor quis feugiat sollicitudin. Ut pellentesque luctus vulputate. Ut at 
        odio ac erat blandit vehicula ut eget urna. In hac habitasse platea 
        dictumst. Nullam ut iaculis nibh, eget eleifend elit.</p>
    </div>
</div>
</body>
</html>

Kreiranje ljepljive navigacije (Sticky Top Navbar)

Takođe možete kreirati ljepljivu gornju traku za navigaciju koja se pomiče sa stranicom dok ne dostigne vrh, a zatim ostaje tamo, jednostavnim korištenjem klase .sticky-top na elementu navbar, kao što je prikazano u sljedećem primjeru: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Kreiranje ljepljive navigacije (Sticky Top Navbar)</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
    body{
        padding-top: 70px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top mt-5">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Početna</a>
                <a href="#" class="nav-item nav-link">O nama</a>
                <a href="#" class="nav-item nav-link">Kursevi</a>
                <a href="#" class="nav-item nav-link disabled" tabindex="-1">Kontakt</a>
            </div>
            <div class="navbar-nav ml-auto">
                <a href="#" class="nav-item nav-link">Prijavi se</a>
            </div>
        </div>
    </nav>

    <!-- Demo sadržaj -->    
    <div class="container">
    <div class="jumbotron">
          <h1>Fiksirana navigacija</h1>
          <p class="lead">Sticky navigacija se pomiče po stranici dok ne dosegne vrh, a zatim ostaje tamo.</p>
      </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu 
        sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus
         nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl 
        bibendum scelerisque non non purus. Suspendisse varius nibh non 
        aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus
         fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. 
        Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer 
        aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus
         ligula.Quis quam ut magna consequat faucibus. Pellentesque eget nisi a 
        mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra 
        sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida 
        nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, 
        commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue 
        dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, 
        bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui 
        molestie euismod. Curabitur et diam tristique, accumsan nunc eu, 
        hendrerit tellus. Tibulum consectetur scelerisque lacus, ac fermentum 
        lorem convallis sed.</p>

        <p>Orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a 
        iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus 
        scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id 
        mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut 
        leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. 
        Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, 
        fermentum lacus et, viverra tellus. Phasellus sodales libero nec dui 
        convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum 
        primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu 
        elementum nibh, quis varius libero.Nam eget purus nec est consectetur 
        vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. 
        Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet 
        est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non 
        laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. 
        Donec vitae ullamcorper purus. Vivamus non metus ac justo porta 
        volutpat.</p>

        <p>Pulvinar leo id risus pellentesque vestibulum. Sed diam libero,
        sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae
        lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. 
        Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam 
        lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin 
        imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis 
        feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sed 
        sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, 
        dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id 
        pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id.Nullam 
        hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. 
        Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In 
        dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus 
        condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. 
        Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus
         congue vestibulum ligula sed consequat.</p>

        <p>Enim arcu, interdum vel metus dignissim, venenatis feugiat 
        purus. Nulla posuere orci ut leo sodales, sed cursus dolor ornare. Cum 
        sociis natoque penatibus et magnis dis parturient montes, nascetur 
        ridiculus mus. Etiam sit amet quam orci. Nulla sollicitudin lectus eget 
        posuere venenatis. Sed vestibulum elementum sagittis. Quisque tristique
         tortor quis feugiat sollicitudin. Ut pellentesque luctus vulputate. Ut at 
        odio ac erat blandit vehicula ut eget urna. In hac habitasse platea 
        dictumst. Nullam ut iaculis nibh, eget eleifend elit.Convallis eget pretium 
        eu, bibendum non leo. Proin suscipit purus adipiscing dolor gravida, in 
        fermentum sapien blandit. Praesent pellentesque ligula dui, in gravida 
        turpis vehicula ac. Pellentesque hendrerit nunc ut luctus hendrerit. 
        Aliquam nec tincidunt urna. Ut interdum nec odio non interdum. 
        Curabitur ligula justo, dapibus non ligula tristique, dapibus tristique nulla.
         Aliquam pulvinar dapibus eros, rutrum pretium urna iaculis ut. Nam est 
        est, tempus id egestas et, viverra in dui. Aliquam gravida orci tortor, sed 
        congue justo ornare vel. Cras in quam consectetur eros varius 
        scelerisque. Ut vel fermentum purus. Nullam interdum blandit turpis, id 
        pellentesque massa feugiat at. Ut sed lectus lectus. Vestibulum ante 
        ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
        Nulla rutrum, ante quis convallis ultricies, magna quam rhoncus erat, in 
        lacinia libero magna a ipsum.</p>

        <p>Fusce enim arcu, interdum vel metus dignissim, venenatis feugiat purus. 
        Nulla posuere orci ut leo sodales, sed cursus dolor ornare. 
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
        Etiam sit amet quam orci. Nulla sollicitudin lectus eget 
        posuere venenatis. Sed vestibulum elementum sagittis. Quisque tristique 
        tortor quis feugiat sollicitudin. Ut pellentesque luctus vulputate. Ut at 
        odio ac erat blandit vehicula ut eget urna. In hac habitasse platea 
        dictumst. Nullam ut iaculis nibh, eget eleifend elit.</p>
    </div>
</div>
</body>
</html>