Bootstrap - Fluid Layout


Kreiranje Fluid Layout-a sa Bootstrap-om

U Bootstrap-u možete da koristite klasu .container-fluid za kreiranje rasporeda koji će iskoristili 100% širinu okvira za prikaz u svim veličinama uređaja (izuzetno mali, mali, srednji, veliki i izuzetno veliki). Klasa .container-fluid jednostavno primenjuje širinu: 100% umejsto različite širine za različite veličine okvira za prikaz. Međutim, raspored će i dalje reagovati i klase možete koristiti kao i obično. Pogledajte lekciju Grid System u Bootstrap-u da biste saznali više o Grid System-u. Sljedeći primjer će stvoriti fluidni raspored koji pokriva 100% širine ekrana.

<!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 Fluid Layout</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>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
    <div class="container-fluid">
        <a href="#" class="navbar-brand mr-3">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">Informacije</a>
                <a href="#" class="nav-item nav-link">Kontakt</a>
            </div>
            <div class="navbar-nav ml-auto">
                <a href="#" class="nav-item nav-link">Registracija</a>
                <a href="#" class="nav-item nav-link">Prijava</a>
            </div>
        </div>
    </div>    
</nav>
<div class="container-fluid">
    <div class="jumbotron">
        <h1>Nauči kako kreirati websites</h1>
        <p class="lead">U današnjem svetu Internet je najpopularniji način povezivanja sa ljudima. 
        Vi ćete naučiti osnovne tehnologije za web razvoj zajedno sa primjerima iz stvarnog života, 
        tako da možete da napravite sopstvenu web stranicu za povezivanje sa ljudima širom svijeta.</p>
        <p><a href="https://www.ittutorijali.net" target="_blank" class="btn btn-success btn-lg">
        Kreni sa učenjem</a></p>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h2>HTML</h2>
            <p>HTML označava HyperText Markup Language. HTML jeosnovni blok World Wide Web-a. 
            HTML je glavni jezik za opis strukture web stranica.</p>
            <p><a href="https://www.ittutorijali.net/kursevi/html5/uvod.php" 
            target="_blank" class="btn btn-success">Detaljnije »</a></p>
        </div>
        <div class="col-md-4">
            <h2>CSS</h2>
            <p>CSS je kratica za Cascading Style Sheets. CSS je standardni jezik stila koji se koristi za 
            opisivanje prezentacije (tj. izgleda i oblikovanja) web stranica. </p>
            <p><a href="https://www.ittutorijali.net/kursevi/html5/uvod-css3.php" 
            target="_blank" class="btn btn-success">Detaljnije »</a></p>
        </div>
        <div class="col-md-4">
            <h2>Bootstrap</h2>
            <p>Bootstrap je moćan front-end framework za brži i lakši web razvoj. Bootstrap uključuje dizajne 
            zasnovane na HTML-u i CSS-u za stvaranje uobičajenih komponenti korisničkog interfejsa.</p>
            <p><a href="https://www.ittutorijali.net/kursevi/bootstrap/uvod.php" 
            target="_blank" class="btn btn-success">Detaljnije »</a></p>
        </div>
    </div>
    <hr>
    <footer>
        <div class="row">
            <div class="col-md-6">
                <p>Copyright &copy; 2021 IT TUTORIJALI</p>
            </div>
            <div class="col-md-6 text-md-right">
                <a href="#" class="text-dark">Sva prava zadržana</a> 
                <span class="text-muted mx-2">|</span> 
                <a href="#" class="text-dark">Uslovi korištenja</a>
            </div>
        </div>
    </footer>
</div>
</body>
</html>

----- Izgled gornjeg primera izgledaće otprilike ovako:



Klikni na sliku da vidiš primjer LIVE