Bootstrap - Media objekti


Korištenje medijskog objekta Bootstrap

Ako želite stvoriti izgled koji sadrži medijski objekt poravnat ulijevo ili udesno poput slika ili videozapisa uz tekstualni sadržaj kao što su komentari na blogu, tweetovi itd. to možete učiniti lako koristeći novo predstavljenu komponentu medija Bootstrap, poput idućeg primjera:

<div class="media">
    <img src="img/avatar.svg" class="mr-3" alt="Sample Image">
    <div class="media-body">
        <h5 class="mt-0">Miloš Mihaljica <small><i>Objavljeno 10.06.2021. godine</i></small></h5>
        <p>Učite programiranje uz IT TUTORIJALE.</p>
    </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 Media objekti</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;        
    }
    .media img{
        width: 80px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="media">
        <img src="img/avatar.svg" class="mr-3" alt="Sample Image">
        <div class="media-body">
            <h5 class="mt-0">Miloš Mihaljica <small><i>Objavljeno 10.06.2021. godine</i></small></h5>
            <p>Učite programiranje uz IT TUTORIJALE.</p>
        </div>
    </div>
    <hr>
    <div class="media">        
        <div class="media-body">
            <h5 class="mt-0">Miloš Mihaljica <small><i>Objavljeno 11.06.2021. godine</i></small></h5>
            <p>Uči Bootstrap uz IT TUTORIJALE!</p>
        </div>
        <img src="img/avatar.svg" class="ml-3" alt="Sample Image">
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Sample Image
Miloš Mihaljica Objavljeno 10.06.2021. godine

Učite programiranje uz IT TUTORIJALE.


Miloš Mihaljica Objavljeno 11.06.2021. godine

Uči Bootstrap uz IT TUTORIJALE!

Sample Image

Možete stvoriti i druge varijacije medijske komponente. Na sliku primijenite klase modifikatora slike poput .rounded ili .rounded-circle kako biste stvorili zaobljeni ugao ili okruglu sliku.

<div class="media">
    <img src="img/avatar.svg" class="rounded-circle mr-3" alt="Sample Image">
    <div class="media-body">
        <h5 class="mt-0">Miloš Mihaljica <small><i>Objavljeno 10.06.2021. godine</i></small></h5>
        <p>Učite programiranje uz IT TUTORIJALE.</p>
    </div>
</div>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Sample Image
Miloš Mihaljica Objavljeno 10.06.2021. godine

Učite programiranje uz IT TUTORIJALE.



Kreiranje ugniježdenih medijskih objekata

Medijski objekti takođe se mogu ugnijezditi unutar drugog medijskog objekta. To može biti vrlo korisno za stvaranje niza komentara na blogu. Pogledajmo primjer:

<div class="media">
    <img src="img/avatar.svg" class="rounded-circle mr-3" alt="Sample Image">
    <div class="media-body">
        <h5 class="mt-0">Miloš Mihaljica <small><i>Objavljeno 10.06.2021. godine</i></small></h5>
        <p>Učite programiranje uz IT TUTORIJALE.</p>

        <!-- Ugnježdeni media objekt -->
        <div class="media mt-2">
            <img src="img/avatar.svg" class="rounded-circle mr-3" alt="Sample Image">
            <div class="media-body">
                <h5 class="mt-0">Miloš Mihaljica <small><i>Objavljeno 11.06.2021. godine</i></small></h5>
                <p>Uči Bootstrap uz IT TUTORIJALE</p>
            </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ždeni Media objekti</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;        
    }
    .media img{
        width: 80px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="media">
        <img src="img/avatar.svg" class="rounded-circle mr-3" alt="Sample Image">
        <div class="media-body">
            <h5 class="mt-0">Miloš Mihaljica <small><i>Objavljeno 10.06.2021. godine</i></small></h5>
            <p>Učite programiranje uz IT TUTORIJALE.</p>

            <!-- Ugnježdeni media objekt -->
            <div class="media mt-2">
                <img src="img/avatar.svg" class="rounded-circle mr-3" alt="Sample Image">
                <div class="media-body">
                    <h5 class="mt-0">Miloš Mihaljica <small><i>Objavljeno 11.06.2021. godine</i></small></h5>
                    <p>Uči Bootstrap uz IT TUTORIJALE</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Sample Image
Miloš Mihaljica Objavljeno 10.06.2021. godine

Učite programiranje uz IT TUTORIJALE.


Sample Image
Miloš Mihaljica Objavljeno 11.06.2021. godine

Uči Bootstrap uz IT TUTORIJALE



Poravnanje medijskih objekata

Takođe možete promijeniti vodoravno poravnanje sadržaja i medija jednostavnim dotjerivanjem samog HTML koda, kao što je prikazano u sljedećem primjeru:

<div class="media">    
    <div class="media-body">
        <h5 class="mt-0">Miloš Mihaljica <small><i>Objavljeno 10.06.2021. godine</i></small></h5>
        <p>Učite programiranje uz IT TUTORIJALE.</p>
    </div>
    <img src="img/avatar.svg" class="ml-3" alt="Sample Image">
</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>Horizontalno poravnanje medijskih objekata u  Bootstrap-u 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>
    .bs-example{
        margin: 20px;        
    }
    .media img{
        width: 80px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="media">
        <img src="img/avatar.svg" class="mr-3" alt="Sample Image">
        <div class="media-body">
            <h5 class="mt-0">Miloš Mihaljica <small><i>Objavljeno 10.06.2021. godine</i></small></h5>
            <p>Učite programiranje uz IT TUTORIJALE.</p>
        </div>        
    </div>
    <hr>
    <div class="media">
        <div class="media-body">
            <h5 class="mt-0">Miloš Mihaljica <small><i>Objavljeno 11.06.2021. godine</i></small></h5>
            <p>Uči Bootstrap uz IT TUTORIJALE</p>
        </div>
        <img src="img/avatar.svg" class="ml-3" alt="Sample Image">
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Sample Image
Miloš Mihaljica Objavljeno 10.06.2021. godine

Učite programiranje uz IT TUTORIJALE.


Miloš Mihaljica Objavljeno 11.06.2021. godine

Uči Bootstrap uz IT TUTORIJALE

Sample Image

Osim toga, možete poravnati slike ili druge medije na sredini ili na dnu bloka sadržaja pomoću klasa flexbox-a, na primjer možete koristiti klasu .align-self-center za vertikalno poravnanje po sredini i klasu .align-self-end za poravnanje dna. Po defaultu, medij unutar medijskog objekta je poravnat prema gore. Pogledajmo primjer:

<!--Mediji s gornjim poravnanjem-->
<div class="media">
    <img src="img/avatar.svg" class="mr-3" alt="Sample Image">
    <div class="media-body">
        <h5 class="mt-0">Mediji s gornjim poravnanjem <small><i>Ovo je difoltno</i></small></h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
<hr>

<!--Srednje poravnati mediji-->
<div class="media">
    <img src="img/avatar.svg" class="align-self-center mr-3" alt="Sample Image">
    <div class="media-body">
        <h5 class="mt-0">Srednje poravnati mediji</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
<hr>

<!--Mediji poravnati prema dole-->
<div class="media">
    <img src="img/avatar.svg" class="align-self-end mr-3" alt="Sample Image">
    <div class="media-body">
        <h5 class="mt-0">Mediji poravnati prema dole</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Sample Image
Mediji s gornjim poravnanjem Ovo je difoltno

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Sample Image
Srednje poravnati mediji

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Sample Image
Mediji poravnati prema dole

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



Kreiranje liste medija

Takođe možete kreirati popis medija koristeći HTML elemente liste i klase medijskih objekata. Samo primijenite .list-unstyled klasu na element <ul> ili <ol>, a klasu .media na podređeni element <li>, kao što je pokazano u sljedećim primjerima:

<ul class="list-unstyled">
    <li class="media">
        <img src="img/avatar.svg" class="mr-3" alt="Sample Image">
        <div class="media-body">
            <h5 class="mt-0">Medijski objekt zasnovan na listit</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </li>
    <li class="media my-2">
        <img src="img/avatar.svg" class="mr-3" alt="Sample Image">
        <div class="media-body">
            <h5 class="mt-0">Medijski objekt zasnovan na listi</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </li>
    <li class="media">
        <img src="img/avatar.svg" class="mr-3" alt="Sample Image">
        <div class="media-body">
            <h5 class="mt-0">Medijski objekt zasnovan na listi</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </li>
</ul>
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 Media liste</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;        
    }
    .media img{
        width: 80px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="list-unstyled">
        <li class="media">
            <img src="img/avatar.svg" class="mr-3" alt="Sample Image">
            <div class="media-body">
                <h5 class="mt-0">Medijski objekt zasnovan na listit</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </li>
        <li class="media my-2">
            <img src="img/avatar.svg" class="mr-3" alt="Sample Image">
            <div class="media-body">
                <h5 class="mt-0">Medijski objekt zasnovan na listit</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </li>
        <li class="media">
            <img src="img/avatar.svg" class="mr-3" alt="Sample Image">
            <div class="media-body">
                <h5 class="mt-0">Medijski objekt zasnovan na listit</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

  • Sample Image
    Medijski objekt zasnovan na listit

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Sample Image
    Medijski objekt zasnovan na listit

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Sample Image
    Medijski objekt zasnovan na listit

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.