Bootstrap - Grid System


Šta je Bootstrap Grid System?

Grid System Bootstrap-a pruža brz i prikladan način za kreiranje responzivnih web stranica. Najnovija verzija Bootstrap 4 predstavlja novi Grid System flexbox prvi koji prilagođava do 12 kolona kako se povećava veličina uređaja ili okvira za prikaz.

Bootstrap 4 uključuje unaprijed definisane klase za brzu izradu rasporeda za različite tipove uređaja kao što su mobilni telefoni, tableti, laptopi i računari itd. Na primjer, klase .col-* možete koristiti za stvaranje grig kolona za ekstra male uređaje mobilnih telefona u portretnom načinu, slično možete koristiti .col-sm-* klase za stvaranje grid kolona za uređaje s malim ekranom, poput mobilnog telefona u pejzažnom režimu, .col-md-* klase za uređaje sa srednjim ekranom poput tableta, .col- klase lg-* za velike uređaje poput stonih računara i .col-xl-* klase za izuzetno velike ekrane. Sljedeća tabela rezimira neke od ključnih karakteristika novog Grid System-a.

Features
Bootstrap 4 Grid System
Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max veličina kontejnera None (auto) 540px 720px 960px 1140px
Idealno za -> Mobilne (Portrait) Mobilne (Landscape) Tablete Laptop-ove Laptop-ove & Desktop
Class prefiks .col- .col-sm- .col-md- .col-lg- .col-xl-
Broj kolona 12
Gutter width 30px (15px sa svih strana kolone)
Nestabilan Da
Redosljed kolona Da

Tabela prikazuje jednu važnu stvar, primjena bilo koje klase .col-sm-* na element neće uticati samo na njegov stil na malim uređajima, već i na srednjim, velikim i izuzetno velikim uređajima čija je širina ekrana veća ili jednaka 540px, ako klasa .col-md-*, .col-lg-* ili .col-xl-* nije prisutna. Slično tome, klasa .col-md-* neće uticati samo na stil elemenata na srednjim uređajima, već i na velikim i vrlo velikim uređajima ako klasa .col-lg-* ili .col-xl- nije prisutna.

Sada se postavlja pitanje kako stvoriti redove i kolone koristeći ovaj Grid System-a koji reaguje na 12 kolona. Odgovor je prilično jednostavan, u početku stvorite kontejner koji djeluje kao omot za vaše redove i kolone pomoću klase .container, nakon toga stvorite redove unutar kontejnera pomoću klase .row i za stvaranje kolona unutar bilo kog reda koji možete koristiti klase: .col-*, .col-sm-*, .col-md-*, .col-lg-* i .col-xl-*. Kolone su stvarno područje sadržaja u koje ćemo smjestiti svoj sadržaj. Provedimo sve ove stvari u stvarnu akciju. Pogledajmo kako to zapravo radi:



Kreiranje Two Column Layout-a

Sljedeći primjer će vam pokazat kako stvoriti dva rasporeda kolona za srednje, velike i izuzetno velike uređaje poput tableta, laptopova, stolnih računara itd. Međutim, na mobilnim telefonima (širina zaslona manja od 768px) kolone će automatski postati vodoravne.

  <div class="container">
    <!--Red sa dvije jednake kolone-->
    <div class="row">
        <div class="col-md-6">Kolona lijevo</div>
        <div class="col-md-6">Kolona desno</div>
    </div>
    
    <!--Red sa dvije kolone podijeljene u omjeru 1:2-->
    <div class="row">
        <div class="col-md-4">Kolona lijevo</div>
        <div class="col-md-8">Kolona desno</div>
    </div>
    
    <!--Red sa dvije kolone podijeljene u omjeru 1:3-->
    <div class="row">
        <div class="col-md-3">Kolona lijevo</div>
        <div class="col-md-9">Kolona desno</div>
    </div>
</div>
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  Two Column Grid Layouts za tablete i računare</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>
    /* Neki prilagođeni stilovi za uljepšavanje ovoga primjera */
    .demo-content{
        padding: 15px;
        font-size: 18px;
        background: #dbdfe5;
        margin-bottom: 15px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }
</style>
</head>
<body>
  <h2 class="text-center my-3">Bootstrap Responsive Layout</h2>
  <div class="text-center">Otvorite izlaz na novoj praznoj kartici (kliknite strelicu pored dugmeta "Prikaži izlaz") 
  i promijenite veličinu prozora pretraživača da biste razumjeli kako funkcioniše Grid System u Bootstrap-u.</div>
    <div class="container mt-3">
        <!--Red sa dvije jednake kolone-->
        <div class="row">
            <div class="col-md-6">
                <div class="demo-content">.col-md-6</div>
            </div>
            <div class="col-md-6">
                <div class="demo-content bg-alt">.col-md-6</div>
            </div>
        </div>
        
        <!--Red sa dvije kolone podijeljene u omjeru 1:2-->
        <div class="row">
            <div class="col-md-4">
                <div class="demo-content">.col-md-4</div>
            </div>
            <div class="col-md-8">
                <div class="demo-content bg-alt">.col-md-8</div>
            </div>
        </div>
        
        <!--Red sa dvije kolone podijeljene u omjeru 1:3 -->
        <div class="row">
            <div class="col-md-3">
                <div class="demo-content">.col-md-3</div>
            </div>
            <div class="col-md-9">
                <div class="demo-content bg-alt">.col-md-9</div>
            </div>
        </div>
    </div>
</body>
</html>


Kreiranje Three Column Layout-a

Možete kreirati druge izglede na osnovu gore navedenog principa. Na primjer, sljedeći primjer će stvoriti tri rasporeda kolona za ekrane prenosnih računara i stonih računara. Takođe radi u tabletima čija je veličin ekrana veća ili jednaka 992 piksela (npr. Apple iPad). Međutim, u vodoravnom načinu kolone će se prikazivati kao i obično.

<div class="container">
    <!--Red sa tri jednake kolone-->
    <div class="row">
        <div class="col-lg-4">Lijeva kolona</div>
        <div class="col-lg-4">Srednja kolona</div>
        <div class="col-lg-4">Desna kolona</div>
    </div>
    
    <!--Red sa tri kolone podijeljen u omjeru 1:4:1-->
    <div class="row">
        <div class="col-lg-2">Lijeva kolona</div>
        <div class="col-lg-8">Srednja kolona</div>
        <div class="col-lg-2">Desna kolona</div>
    </div>
    
    <!--Red sa tri kolone podijeljene neravnomjerno-->
    <div class="row">
        <div class="col-lg-3">Column left</div>
        <div class="col-lg-7">Srednja kolona</div>
        <div class="col-lg-2">Desna kolona</div>
    </div>
</div>
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 Three Column Grid Layouts za tablete (landscape) i desktop računare</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>
    /* Neki prilagođeni stilovi za uljepšavanje ovoga primjera */
    .demo-content{
        padding: 15px;
        font-size: 18px;
        background: #dbdfe5;
        margin-bottom: 15px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }
</style>
</head>
<body>
  <h2 class="text-center my-3">Bootstrap Responsive Layout</h2>
  <div class="text-center">Otvorite izlaz na novoj praznoj kartici (kliknite strelicu pored dugmeta "Prikaži izlaz") 
  i promijenite veličinu prozora pretraživača da biste razumjeli kako funkcioniše Grid System u Bootstrap-u.</div>
    <div class="container mt-3">
        <!--Red sa tri jednake kolone-->
        <div class="row">
            <div class="col-lg-4">
                <div class="demo-content">.col-lg-4</div>
            </div>
            <div class="col-lg-4">
                <div class="demo-content bg-alt">.col-lg-4</div>
            </div>
            <div class="col-lg-4">
                <div class="demo-content">.col-lg-4</div>
            </div>
        </div>

        <!--Red sa tri kolone podijeljen u omjeru 1:4:1-->
        <div class="row">
            <div class="col-lg-2">
                <div class="demo-content">.col-lg-2</div>
            </div>
            <div class="col-lg-8">
                <div class="demo-content bg-alt">.col-lg-8</div>
            </div>
            <div class="col-lg-2">
                <div class="demo-content">.col-lg-2</div>
            </div>
        </div>

        <!--Red sa tri kolone podijeljene neravnomjerno-->
        <div class="row">
            <div class="col-lg-3">
                <div class="demo-content">.col-lg-3</div>
            </div>
            <div class="col-lg-7">
                <div class="demo-content bg-alt">.col-lg-7</div>
            </div>
            <div class="col-lg-2">
                <div class="demo-content">.col-lg-2</div>
            </div>
        </div>
    </div>
</body>
</html>


Bootstrap Auto-layout Columns

Takođe možete stvoriti kolone jednake širine za sve uređaje (izuzetno male, male, srednje, velike i izuzetno velike) jednostavnim korišćenjem klase .col, bez navođenja bilo kog broja kolone. Isprobajmo sljedeći primjer da biste razumjeli kako tačno radi:

<div class="container">
    <!--Red sa dvije jedanke kolone-->
    <div class="row">
        <div class="col">Kolona jedan</div>
        <div class="col">Kolona dva</div>
    </div>
    
    <!--Red sa tri jednake kolone-->
    <div class="row">
        <div class="col">Kolona jedan</div>
        <div class="col">Kolona dva</div>
        <div class="col">Kolona tri</div>
    </div>
</div>
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 Auto-layout Columns</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>
    /* Neki prilagođeni stilovi za uljepšavanje ovoga primjera */
    .row{     
        margin-top: 1rem;
        background: #dbdfe5;
    }
    .col{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
<div class="container">
    <!--Red sa dvije jedanke kolone-->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>

    <!--Red sa tri jednake kolone-->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
</div>
</body>
</html>

Pored toga, takođe možete podesiti širinu jedne kolone i dozvoliti da se kolone automatski podudaraju sa njom. Možete koristiti unaprijed definisane klase širine. Ako isprobate sljedeći primjer, vidjećete da kolone classom .col imaju jednaku širinu.

<div class="container">
    <!--Red sa dvije jedanke kolones-->
    <div class="row">
        <div class="col">Kolona jedan</div>
        <div class="col">Kolona dva</div>
    </div>
    
    <!--Red sa tri kolone podjeljen u omjeru 1:2:1-->
    <div class="row">
        <div class="col">Kolona jedan</div>
        <div class="col-sm-6">Kolona dva</div>
        <div class="col">Kolona tri</div>
    </div>
</div>


Ponašanje Column Wrapping-a

Sada ćemo stvoriti fleksibilniji raspored koji mijenja orijentaciju kolone na osnovu veličine okvira za prikaz. Sledeći primer će stvoriti raspored u tri kolone na velikim uređajima kao što su prenosni računari i desktop računari, kao i na tabletima (npr. Apple iPad) u vodoravnom režimu, ali na srednjim uređajima poput tableta u portretnom režimu (768px ≤ širina ekrana <992px), će se promijeniti u raspored sa dvije kolone gde se treća kolona pomijera na dnu prve dve kolone.

<div class="container">
    <div class="row">
        <div class="col-md-4 col-lg-3">Kolona jedan</div>
        <div class="col-md-8 col-lg-6">Kolona dva</div>
        <div class="col-md-12 col-lg-3">Kolona tri</div>
    </div>
</div>
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 Column Wrapping</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>
  /* Neki prilagođeni stilovi za uljepšavanje ovoga primjera */
    .demo-content{
        padding: 15px;
        font-size: 18px;
        background: #dbdfe5;
        margin-bottom: 15px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }
</style>
</head>
<body>
    <div class="container mt-3">
        <div class="row">
            <div class="col-md-4 col-lg-3">
                <div class="demo-content">.col-md-4 .col-lg-3</div>
            </div>
            <div class="col-md-8 col-lg-6">
                <div class="demo-content bg-alt">.col-md-8 .col-lg-6</div>
            </div>
            <div class="col-md-12 col-lg-3">
                <div class="demo-content">.col-md-12 .col-lg-3</div>
            </div>
        </div>
    </div>
</body>
</html>

Kao što vidite u primjeru iznad, zbir brojeva kolona (tj. col-md-*) je 3 + 9 + 12 = 24 > 12, dakle treći <div> element sa klasom .col-md-12 koji dodaje dodatne kolone preko maksimalnih 12 kolona u row, prelazi u novu liniju kao jedna susjedna jedinica na uređajima srednje veličine ekrana. Slično tome, možete da napravite još prilagodljiviji raspored za svoje web stranice koristeći funkciju Bootstrap's grid. Evo nekoliko primjera za upotrebu Bootstrap grid-a.



Kreiranje Multi-Column Layouts-a sa Bootstrap-om

Pomoću novog Bootstrap 4 (mobile first flexbox grid system) možete lako da kontrolišete kako će se izgled vaše web stranice prikazivati na različitim vrstama uređaja koji imaju različite veličine ekrana ili prikaza, poput mobilnih telefona, tableta, desktop računara itd. Razmotrimo sljedeću ilustraciju.




Na gornjoj ilustraciji postoji ukupno 12 okvira za sadržaj na svim uređajima, ali njegovo postavljanje varira u zavisnosti od veličine ekrana uređaja, kao što je na mobilnom uređaju izgled prikazan kao raspored u jednoj koloni koja ima 1 kolonu i 12 redova postavljenih jedan iznad drugog dok se u tabletu prikazuje kao raspored sa dvije kolone koje imaju 2 kolone i 6 redova.

Dalje, na uređajima velikog ekrana, kao što su prenosni računari i desktop površine, prikazuje se kao raspored sa tri kolone koji ima 3 kolone i 4 reda i na kraju u uređajima sa velikim ekranom poput velikih desktop površina prikazuje se kao raspored sa četiri kolone koje imaju 4 kolone i 3 reda. Sada je pitanje kako možemo stvoriti takve prilagodljive rasporede pomoću ovog novog Bootstrap grid system-a. Počnimo sa primarnim ciljnim uređajem. Pretpostavimo da je naš primarni ciljni uređaj laptop ili uobičajeni računar. Budući da naš raspored laptopa ima 3 kolone i 4 reda, tj. 3x4 grid layouts, tako da bi HTML kod za izradu takve strukture izgledao otprilike ovako.

<div class="container">
    <div class="row">
        <div class="col-lg-4"><p>Box 1</p></div>
        <div class="col-lg-4"><p>Box 2</p></div>
        <div class="col-lg-4"><p>Box 3</p></div>
        <div class="col-lg-4"><p>Box 4</p></div>
        <div class="col-lg-4"><p>Box 5</p></div>
        <div class="col-lg-4"><p>Box 6</p></div>
        <div class="col-lg-4"><p>Box 7</p></div>
        <div class="col-lg-4"><p>Box 8</p></div>
        <div class="col-lg-4"><p>Box 9</p></div>
        <div class="col-lg-4"><p>Box 10</p></div>
        <div class="col-lg-4"><p>Box 11</p></div>
        <div class="col-lg-4"><p>Box 12</p></div>
    </div>
</div>
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 Grid Layouts for Large Devices</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>
    /* Neki prilagođeni stilovi za uljepšavanje ovoga primjera */
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #dbdfe5;
    }
</style>
</head>
<body>
  <h2 class="text-center my-3">Bootstrap Responsive Layout</h2>
  <div class="text-center">Otvorite izlaz na novoj praznoj kartici (kliknite strelicu pored dugmeta "Prikaži izlaz") 
  i promijenite veličinu prozora pretraživača da biste razumjeli kako funkcioniše Grid System u Bootstrap-u.</div>
    <div class="container mt-3">
        <div class="row">
            <div class="col-lg-4"><p>Box 1</p></div>
            <div class="col-lg-4"><p>Box 2</p></div>
            <div class="col-lg-4"><p>Box 3</p></div>
            <div class="col-lg-4"><p>Box 4</p></div>
            <div class="col-lg-4"><p>Box 5</p></div>
            <div class="col-lg-4"><p>Box 6</p></div>
            <div class="col-lg-4"><p>Box 7</p></div>
            <div class="col-lg-4"><p>Box 8</p></div>
            <div class="col-lg-4"><p>Box 9</p></div>
            <div class="col-lg-4"><p>Box 10</p></div>
            <div class="col-lg-4"><p>Box 11</p></div>
            <div class="col-lg-4"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

Ako pogledate izlaz navedenog primjera na računaru koji ima širinu ekrana za prikaz veću ili jednaku 992 piksela, ali manju od 1200 piksela, videćete da raspored ima 4 reda gde svaki red ima 3 jednaka kolone što rezultuje grid rasporeda 3k4. Sada je vreme da prilagodimo izgled za druge uređaje. Počnimo prvo sa prilagođavanjem za tablet uređaj. Budući da se unutar tableta naš izgled prikazuje kao grid 2k6 (tj. 2 kolone i 6 redova). Dakle, samo naprijed i dodajte klasu .col-md-6 u svaku kolonu.

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6"><p>Box 1</p></div>
        <div class="col-lg-4 col-md-6"><p>Box 2</p></div>
        <div class="col-lg-4 col-md-6"><p>Box 3</p></div>
        <div class="col-lg-4 col-md-6"><p>Box 4</p></div>
        <div class="col-lg-4 col-md-6"><p>Box 5</p></div>
        <div class="col-lg-4 col-md-6"><p>Box 6</p></div>
        <div class="col-lg-4 col-md-6"><p>Box 7</p></div>
        <div class="col-lg-4 col-md-6"><p>Box 8</p></div>
        <div class="col-lg-4 col-md-6"><p>Box 9</p></div>
        <div class="col-lg-4 col-md-6"><p>Box 10</p></div>
        <div class="col-lg-4 col-md-6"><p>Box 11</p></div>
        <div class="col-lg-4 col-md-6"><p>Box 12</p></div>
    </div>
</div>

Slično tome, možete prilagoditi raspored za izuzetno velike uređaje poput velikih ekrana dodavanjem klase .col-xl-3 u svaku kolonu, jer svaki red u našem izuzetno velikom rasporedu uređaja sadrži 4 kolone. Evo konačnog koda nakon kombinovanja cijelog procesa.

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 1</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 2</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 3</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 4</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 5</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 6</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 7</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 8</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 9</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 10</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 11</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 12</p></div>
    </div>
</div>


Gnježdenje Grid Columns-a

Bootstrap grid kolone su nestabilne, što znači da redove i kolone možete staviti unutar postojeće kolone. Međutim, formula za postavljanje kolona biće ista, tj. zbir brojeva kolona treba da bude jednak 12 ili manje u jednom redu.

<div class="container">
    <div class="row">
        <div class="col-sm-8">Column left</div>
        <div class="col-sm-4">
            <!--Desna kolona sa ugneždenim redovima i kolonama-->
            <div class="row">
                <div class="col-12"></div>
            </div>
            <div class="row">
                <div class="col-6"></div>
                <div class="col-6"></div>
            </div>
        </div>
    </div>
</div>
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 Ugnježdene kolone i redovi</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>
  /* Neki prilagođeni stilovi za uljepšavanje ovoga primjera */
    .main-content{
        min-height: 230px;
        background: #dbdfe5;
    }
    .sidebar-content{
        min-height: 100px;
        margin-bottom: 30px;
        background: #b4bac0;
    }
</style>
</head>
<body>
<div class="container mt-3">
    <div class="row">
        <div class="col-sm-8">
            <div class="main-content"></div>
        </div>
        <div class="col-sm-4">
            <!--Nested rows within a column-->
            <div class="row">
                <div class="col-12">
                    <div class="sidebar-content"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <div class="sidebar-content"></div>
                </div>
                <div class="col-6">
                    <div class="sidebar-content"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>


Kreiranje kolona promjenjljive širine

Klase col-{breakpoint}-auto možete koristiti za određivanje kolona na osnovu prirodne širine njihovog sadržaja. Isprobajte sljedeći primjer da biste videli kako to funkcioniše:

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col-md-3">Lijeva kolona</div>
        <div class="col-md-auto">Kolona promjenjljive širine</div>
        <div class="col-md-3">Desna kolona</div>
    </div>
    <div class="row">
        <div class="col">Lijeva kolona</div>
        <div class="col-auto">Kolona promjenjljive širine</div>
        <div class="col">Desna kolona</div>
    </div>
</div>
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>Veličina kolona na osnovu širine njihovog sadržaja</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>
  /* Neki prilagođeni stilovi za uljepšavanje ovoga primjera */
    .row{     
        margin-top: 1rem;
        background: #dbdfe5;
    }
    [class^=col]{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-md-3">Lijeva kolona</div>
            <div class="col-md-auto">Kolona promjenjljive širine</div>
            <div class="col-md-3">Desna kolona</div>
        </div>
        <div class="row">
            <div class="col">Lijeva kolona</div>
            <div class="col-auto">Kolona promjenjljive širine</div>
            <div class="col">Desna kolona</div>
        </div>
    </div>
    <p class="text-center mt-3"><strong>Napomena:</strong> Unesite neki sadržaja u kolonu promjenjljive širine 
    da biste vidjeli kako funkcioniše.</p>
</body>
</html>


Poravnanje kolona

Pomoću flexbox poravnanja možete vertikalno i horizontalno poravnati kolone unutar kontejnera. Isprobajte sljedeće primjere da biste razumjeli kako funkcioniše:



Vertikalno poravnanje kolona

Možete koristiti klase .align-items-start, .align-items-center, i .align-items-end da biste poravnali kole vertikalno na vrh, na sredinu i na dno kontejnera.

<div class="container">
    <div class="row align-items-start">
        <div class="col">Kolona jedan</div>
        <div class="col">Kolona dva</div>
        <div class="col">Kolona tri</div>
    </div>
    <div class="row align-items-center">
        <div class="col">Kolona jedan</div>
        <div class="col">Kolona dva</div>
        <div class="col">Kolona tri</div>
    </div>
    <div class="row align-items-end">
        <div class="col">Kolona jedan</div>
        <div class="col">Kolona dva</div>
        <div class="col">Kolona tri</div>
    </div>
</div>
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 Vertikalno poravnanje kolona</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>
  /* Neki prilagođeni stilovi za uljepšavanje ovoga primjera */
    .row{
        min-height: 10rem;        
        margin-top: 1rem;
        background: #dbdfe5;
    }
    .col{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
<div class="container">
    <div class="row align-items-start">
        <div class="col">Kolona jedan</div>
        <div class="col">Kolona dva</div>
        <div class="col">Kolona tri</div>
    </div>
    <div class="row align-items-center">
        <div class="col">Kolona jedan</div>
        <div class="col">Kolona dva</div>
        <div class="col">Kolona tri</div>
    </div>
    <div class="row align-items-end">
        <div class="col">Kolona jedan</div>
        <div class="col">Kolona dva</div>
        <div class="col">Kolona tri</div>
    </div>
</div>
</body>
</html>

Pojedinačne kolone u redu takođe se mogu poravnati vertikalno. Evo primera:

<div class="container">
    <div class="row">
        <div class="col align-self-start">Kolona jedan</div>
        <div class="col align-self-center">Kolona dva</div>
        <div class="col align-self-end">Kolona tri</div>
    </div>
</div>


Horizontalno poravnanje kolona

Možete koristiti klase .justify-content-start, .justify-content-center, i .justify-content-end da biste poravnali kolone vodoravno ljevo, na sredinu i desno u kontejnera. Pogledajmo sljedeći primjer da bismo videli kako funkcioniše:

<div class="container">
    <div class="row justify-content-start">
        <div class="col-4">Kolona jedan</div>
        <div class="col-4">Kolona dva</div>
    </div>
    <div class="row justify-content-center">
        <div class="col-4">Kolona jedan</div>
        <div class="col-4">Kolona dva</div>
    </div>
    <div class="row justify-content-end">
        <div class="col-4">Kolona jedan</div>
        <div class="col-4">Kolona dva</div>
    </div>
</div>
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 Horizontalno poravnanje kolona</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>
  /* Neki prilagođeni stilovi za uljepšavanje ovoga primjera */
    .row{     
        margin-top: 1rem;
        background: #dbdfe5;
    }
    [class^=col-]{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
<div class="container">
    <div class="row justify-content-start">
        <div class="col-4">Kolona jedan</div>
        <div class="col-4">Kolona dva</div>
    </div>
    <div class="row justify-content-center">
        <div class="col-4">Kolona jedan</div>
        <div class="col-4">Kolona dva</div>
    </div>
    <div class="row justify-content-end">
        <div class="col-4">Kolona jedan</div>
        <div class="col-4">Kolona dva</div>
    </div>
</div>
</body>
</html>

Možete da koristite klasu .justify-content-around za ravnomernu distribuciju kolona sa razmacima pola veličine na oba kraja, dok klasu .justify-content-between možete koristiti za ravnomjernu raspodjelu kolna tamo gde je postavljena prva kolona na početku i posljednja kolona postavljena na kraju. Isprobajte sljedeći primer da biste videli kako to zapravo funkcioniše:

<div class="container">
    <div class="row justify-content-around">
        <div class="col-4">Kolona jedan</div>
        <div class="col-4">Kolona dva</div>
    </div>
    <div class="row justify-content-between">
        <div class="col-4">Kolona jedan</div>
        <div class="col-4">Kolona dva</div>
    </div>
</div>


Reorganizacija kolona

Možete čak i da promijenite vizuelni redosljed kolona, a da ne promenite njihov redosljed u stvarnom označavanju. Koristite klasu .order-last da biste rasporedili kolone obrnuto, dok klasa order-first postavlja kolonu na prvo mijesto. Pogledajmo primjer:

<div class="container">
    <div class="row">
        <div class="col order-last">Prva, ali u prikazu zadnja.</div>
        <div class="col">Druga, ali ne uređena.</div>
        <div class="col order-first">Zadnja, ali u prikazu prva.</div>
    </div>
</div>
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>Reorganizacija kolona u Bootstrap 4</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>
    /* Neki prilagođeni stilovi za uljepšavanje ovoga primjera */
    .row{     
        margin-top: 1rem;
        background: #dbdfe5;
    }
    .col{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
    <div class="container">
    <div class="row">
        <div class="col order-last">Prva, ali u prikazu zadnja.</div>
        <div class="col">Druga, ali ne uređena.</div>
        <div class="col order-first">Zadnja, ali u prikazu prva.</div>
    </div>
</div>
</body>
</html>

Klasu .order-* takođe možete koristiti za naručivanje kolona u zavisnosti od brojeva redosljeda. Kolona sa većim brojem dolazi nakon kolone sa nižim brojem ili kolona bez klasa redosljeda. Uključuje podršku za 1 do 12 u svih pet nivoa grid-a.

<div class="container">
    <div class="row">
        <div class="col order-4">Prva, ali u prikazu zadnja.</div>
        <div class="col">Druga, ali ne uređena.</div>
        <div class="col order-1">Zadnja, ali u prikazu prva.</div>
    </div>
</div>


Pomjeranje kolona

Takođe možete pomjeriti kolone udesno radi poravnanja koristeći klase pomjeranja kolona poput .offset-sm-*, .offset-md-*, .offset-lg-* itd. Ove klase kompenzuju kolone jednostavnim povećanjem njegove lijeve margine za zadati broj kolona. Na primer, klasa .offset-md-4 na koloni .col-md-8 pomjera udesno preko četiri kolone iz prvobitnog položaja. Isprobajte sledeći primjer da biste videli kako to funkcioniše:

<div class="container">
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-8"></div>
    </div>
    <div class="row">        
        <div class="col-sm-8 offset-sm-4"><!--Kolona sa pomeranjem od 4 kolone--></div>
    </div>
</div>
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 Pomjeranje kolona</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>
    /* Neki prilagođeni stilovi za uljepšavanje ovoga primjera */
    .demo-content{
        padding: 15px;
        font-size: 18px;
        background: #dbdfe5;
        margin-bottom: 10px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }
</style>
</head>
<body>
<div class="container mt-3">
    <div class="row">
        <div class="col-md-4">
            <div class="demo-content">.col-md-4</div>
        </div>
        <div class="col-md-8">
            <div class="demo-content bg-alt">.col-md-8</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 offset-md-4">
            <div class="demo-content bg-alt">.col-md-8 .offset-md-4</div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-3">
            <div class="demo-content">.col-md-3</div>
        </div>
        <div class="col-md-9">
            <div class="demo-content bg-alt">.col-md-9</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <div class="demo-content bg-alt">.col-md-6 .offset-md-3</div>
        </div>
        <div class="col-md-3">
            <div class="demo-content">.col-md-3</div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-3">
            <div class="demo-content">.col-md-3</div>
        </div>
        <div class="col-md-3">
            <div class="demo-content bg-alt">.col-md-3</div>
        </div>
        <div class="col-md-3">
            <div class="demo-content">.col-md-3</div>
        </div>
        <div class="col-md-3">
            <div class="demo-content bg-alt">.col-md-3</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 offset-md-3">
            <div class="demo-content bg-alt">.col-md-3 .offset-md-3</div>
        </div>
        <div class="col-md-3 offset-md-3">
            <div class="demo-content">.col-md-3 .offset-md-3</div>
        </div>
    </div>
</div>
</body>
</html>

Takođe možete nadoknaditi kolone pomoću klasa uslužnih margina (utility margin). Ove klase su korisne u situacijama kada širina pmjeranja nije fiksna. Evo primera:

<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4 ml-auto"><!--Pomjeri ovu kolonu udesno--></div>
    </div>
    <div class="row">
        <div class="col-auto mr-auto"></div>
        <div class="col-auto"><!--Pomjerite ovu kolonu od prethodne kolone--></div>
    </div>
</div>


Kreiranje kompaktnih kolona

Možete ukloniti podrazumevane gutters između kolona da biste kreirali kompaktne rasporede dodavanjem klase .no-gutters u .row. Ova klasa uklanja negativne margine iz reda i vodoravno popunjavanje iz svih neposrednih podređenih kolona. Evo primera:

<div class="row no-gutters">
    <div class="col-4">Kolona jedan</div>
    <div class="col-4">Kolona dva</div>
    <div class="col-4">Kolona tri</div>
</div>
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 Kompaktne kolone</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>
  /* Neki prilagođeni stilovi za uljepšavanje ovoga primjera */
    .demo-content{
        padding: 15px;
        font-size: 18px;
        min-height: 50px;
        background: #dbdfe5;
        margin-bottom: 15px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }
</style>
</head>
<body>
    <h2 class="text-center">Kolone sa Gutters-om</h2>
    <div class="container mt-3">
        <div class="row">
            <div class="col-4">
                <div class="demo-content">.col-4</div>
            </div>
            <div class="col-4">
                <div class="demo-content bg-alt">.col-4</div>
            </div>
            <div class="col-4">
                <div class="demo-content">.col-4</div>
            </div>
        </div>
    </div>
    <hr>
    <h2 class="text-center">Kolone bez Gutters-a</h2>
    <div class="container mt-3">
        <div class="row no-gutters">
            <div class="col-4">
                <div class="demo-content">.col-4</div>
            </div>
            <div class="col-4">
                <div class="demo-content bg-alt">.col-4</div>
            </div>
            <div class="col-4">
                <div class="demo-content">.col-4</div>
            </div>
        </div>
    </div>
</body>
</html>


Prekid kolona na novu liniju

Takođe možete da kreirate kolone jednake širine koji se prostiru na više redova tako što ćete umetnuti <div> sa .w-100 klasom gde želite da se kolone prelome na novu liniju. Pored toga, ove pauze možete učiniti prilagodljivim kombinovanjem klase .w-100 sa prilagodljivim klasama pomoćnih ekrana.

<div class="container">
    <!-- Prelom kolona na svim uređajima -->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="w-100"></div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
    <!-- Prelom kolone na svim uređajima, osim na izuzetno velikim uređajima -->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="w-100 d-xl-none"></div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
</div>
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>Prelom kolona na novu liniju</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>
  /* Neki prilagođeni stilovi za uljepšavanje ovoga primjera */
    .row{     
        margin-top: 1rem;
        background: #dbdfe5;
    }
    [class^=col]{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
    <div class="container">
        <h4 class="mt-3">Prelom kolona na svim uređajima</h4>
        <div class="row">
            <div class="col">.col</div>
            <div class="col">.col</div>
            <div class="w-100"></div>
            <div class="col">.col</div>
            <div class="col">.col</div>
        </div>
        <h4 class="mt-3">Prelom kolone na svim uređajima, osim na izuzetno velikim uređajima</h4>
        <div class="row">
            <div class="col">.col</div>
            <div class="col">.col</div>
            <div class="w-100 d-xl-none"></div>
            <div class="col">.col</div>
            <div class="col">.col</div>
        </div>
        <p class="mt-3"><strong>Napomena:</strong> Otvorite izlaz na novoj praznoj kartici 
        (kliknite strelicu pored dugmeta „Prikaži izlaz“) i promjenite veličinu prozora pretraživača 
        da biste razumeli kako funkcioniše.</p>
    </div>    
</body>
</html>

Nadamo se da ste razumeli osnove novog Bootstrap 4 grid system-a. U sljedećih nekoliko lekcija naučićete kako da kreirate osnovne rasporede web stranica pomoću flexbox grid system-a.