Bootstrap - Kartice


Uvod u Bootstrap 4 kartice

Bootstrap 4 uvodi novi fleksibilni i proširivi kontejner sadržaja - komponenta kartice - umjesto starih ploča i drugih komponenti. Uključuje opcije za zaglavlja i podnožja, širok spektar sadržaja, kontekstualne boje pozadine i moćne opcije prikaza. U nastavku ćete vidjet što možete učiniti s komponentnim karticama.



Kreiranje osnovne kartice

Oznake na kartici su prilično ravne. Kartice zahtijevaju osnovnu klasu .card, dok se sadržaj može smjestiti unutar .card-body. Sljedeći primjer će vam pokazati kako stvoriti karticu sa slikom, tekstualnim sadržajem i dugmetom.

<div class="card" style="width: 300px;">
    <img src="img/sample.svg" class="card-img-top" alt="...">
    <div class="card-body text-center">
        <h5 class="card-title">Miloš Mihaljica</h5>
        <p class="card-text">Miloš je osnivač sajta IT TUTORIJALI i pomaže drugima da uđu u svijet programiranja.</p>
        <a href="#" class="btn btn-primary">Pogledaj profil</a>
    </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 Kartice</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">
    <div class="card" style="width: 300px;">
        <img src="img/sample.svg" class="card-img-top" alt="...">
        <div class="card-body text-center">
            <h5 class="card-title">Miloš Mihaljica</h5>
            <p class="card-text">Miloš je osnivač sajta IT TUTORIJALI i pomaže drugima da uđu u svijet programiranja.</p>
            <a href="#" class="btn btn-primary stretched-link">Pogledaj profil</a>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

...
Miloš Mihaljica

Miloš je osnivač sajta IT TUTORIJALI i pomaže drugima da uđu u svijet programiranja.

Pogledaj profil


Vrste sadržaja za komponentu kartice

Komponenta kartice podržava širok spektar sadržaja, uključujući slike, tekst, grupe popisa, veze i još mnogo toga. Pogledajmo primjere onoga što podržava kartica.



Tijelo kartice

Možete jednostavno koristiti .card sa .card-body unutar, kad god trebate kreirati podstavljeni okvir.

<div class="card">
    <div class="card-body">Ovo je dio teksta u okviru.</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 Osnovna kartica</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">
    <div class="card">
        <div class="card-body">Ovo je dio teksta u okviru.</div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Ovo je dio teksta u okviru.


Kartica sa header-om i footer-om

Takođe možete dodati zaglavlje (header) i podnožje (footer) unutar svojih kartica pomoću klase .card-header i .card-footer. Pogledajmo primjer:

<div class="card text-center">
    <div class="card-header">IT TUTORIJALI</div>
    <div class="card-body">
        <h5 class="card-title">Bootstrap</h5>
        <p class="card-text">Bootstrap je najpopularniji i najsnažniji front-end (HTML, CSS i JavaScript) framework.</p>
        <a href="#" class="btn btn-primary">Detaljnije</a>
    </div>
    <div class="card-footer text-muted">Objavljeno prije 2 dana</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 Kartice sa Header-om i Footer-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">
    <div class="card text-center">
        <div class="card-header">IT TUTORIJALI</div>
        <div class="card-body">
            <h5 class="card-title">Bootstrap</h5>
            <p class="card-text">Bootstrap je najpopularniji i najsnažniji front-end (HTML, CSS i JavaScript) framework.</p>
            <a href="#" class="btn btn-primary">Detaljnije</a>
        </div>
        <div class="card-footer text-muted">Objavljeno prije 2 dana</div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

IT TUTORIJALI
Bootstrap

Bootstrap je najpopularniji i najsnažniji front-end (HTML, CSS i JavaScript) framework.

Detaljnije


Postavljanje grupne liste unutar kartice

Grupne liste možete smjestiti i na karticu zajedno s ostalim vrstama sadržaja, kao što je prikazano u sljedećem primjeru.

<div class="card" style="width: 18rem;">
    <div class="card-header">Kursevi</div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">HTML5-CSS3</li>
        <li class="list-group-item">JavaScript</li>
        <li class="list-group-item">Bootstrap</li>
    </ul>
    <div class="card-body">
        <a href="#" class="card-link">Dodaj</a>
        <a href="#" class="card-link">Dijeli</a>
    </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 Kartice sa grupnom listom</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">
    <div class="card" style="width: 18rem;">
        <div class="card-header">Kursevi</div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item">HTML5-CSS3</li>
            <li class="list-group-item">JavaScript</li>
            <li class="list-group-item">Bootstrap</li>
        </ul>
        <div class="card-body">
            <a href="#" class="card-link">Dodaj</a>
            <a href="#" class="card-link">Dijeli</a>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Kursevi
  • HTML5-CSS3
  • JavaScript
  • Bootstrap

Slobodno miješajte i kombinujte više vrsta sadržaja kako biste stvorili potrebnu karticu. Sljedeći primjer će stvoriti karticu fiksne širine sa slikama, tekstom, grupnom listom i vezama.

<div class="card" style="width: 300px;">
    <img src="img/avatar.svg" class="w-100 border-bottom" alt="Rounded Image">
    <div class="card-body">
        <h5 class="card-title">IT TUTORIJALI</h5>
        <p class="card-text">Uči besplatno uz IT TUTORIJALE sljedeće kurseve</p>
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">HTML5-CSS3</li>
        <li class="list-group-item">JavaScript</li>
        <li class="list-group-item">Bootstrap</li>
    </ul>
    <div class="card-body">
        <a href="#" class="card-link">Link kartice</a>
        <a href="#" class="card-link">Drugi link</a>
    </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 Kartica s više vrsta 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>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="card" style="width: 300px;">
        <img src="img/thumbnail.svg" class="w-100 border-bottom" alt="Rounded Image">
        <div class="card-body">
            <h5 class="card-title">IT TUTORIJALI</h5>
            <p class="card-text">Uči besplatno uz IT TUTORIJALE sljedeće kurseve.</p>
        </div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item">HTML5-CSS3</li>
            <li class="list-group-item">JavaScript</li>
            <li class="list-group-item">Bootstrap</li>
        </ul>
        <div class="card-body">
            <a href="#" class="card-link">Link kartice</a>
            <a href="#" class="card-link">Drugi link</a>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Rounded Image
IT TUTORIJALI

Uči besplatno uz IT TUTORIJALE sljedeće kurseve

  • HTML5-CSS3
  • JavaScript
  • Bootstrap


Prilagođavanje pozadine kartice

Postoji nekoliko opcija za prilagođavanje pozadine, bordera i boja kartice. Za promjenu izgleda kartice možete koristiti klase pomoćnih programa za tekst i pozadinu.

<div class="row">
    <div class="col-sm-6">
        <div class="card text-white bg-primary mb-4">
            <div class="card-body">
                <h5 class="card-title">Primary card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card text-white bg-secondary mb-4">
            <div class="card-body">
                <h5 class="card-title">Secondary card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card text-white bg-success mb-4">
            <div class="card-body">
                <h5 class="card-title">Success card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card text-white bg-danger mb-4">
            <div class="card-body">
                <h5 class="card-title">Danger card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card text-white bg-warning mb-4">
            <div class="card-body">
                <h5 class="card-title">Warning card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card text-white bg-info mb-4">
            <div class="card-body">
                <h5 class="card-title">Info card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>    
    <div class="col-sm-6">
        <div class="card text-white bg-dark">
            <div class="card-body">
                <h5 class="card-title">Dark card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card bg-light">
            <div class="card-body">
                <h5 class="card-title">Light card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</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 Stilizovanje kartice</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">
    <div class="card text-white bg-primary mb-3" style="width: 20rem;">
        <div class="card-body">
            <h5 class="card-title">Primary card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
    <div class="card text-white bg-secondary mb-3" style="width: 20rem;">
        <div class="card-body">
            <h5 class="card-title">Secondary card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
    <div class="card text-white bg-success mb-3" style="width: 20rem;">
        <div class="card-body">
            <h5 class="card-title">Success card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
    <div class="card text-white bg-danger mb-3" style="width: 20rem;">
        <div class="card-body">
            <h5 class="card-title">Danger card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
    <div class="card text-white bg-warning mb-3" style="width: 20rem;">
        <div class="card-body">
            <h5 class="card-title">Warning card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
    <div class="card text-white bg-info mb-3" style="width: 20rem;">
        <div class="card-body">
            <h5 class="card-title">Info card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
    <div class="card bg-light mb-3" style="width: 20rem;">
        <div class="card-body">
            <h5 class="card-title">Light card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
    <div class="card text-white bg-dark mb-3" style="width: 20rem;">
        <div class="card-body">
            <h5 class="card-title">Dark card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Primary card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Secondary card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Success card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Danger card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Warning card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Info card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Dark card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Light card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.



Prilagođavanje okvira i teksta kartice

Takođe možete prilagoditi boju teksta i bordere bilo koje kartice pomoću klasa za tekst i boredere. Samo primijenite ove klase na nadređenu klasu .card ili njene podređene elemente, kao što je prikazano u sljedećem primjeru:

<div class="row">
    <div class="col-sm-6">
        <div class="card border-primary mb-4">
            <div class="card-body text-primary">
                <h5 class="card-title">Primary card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-secondary mb-4">
            <div class="card-body text-secondary">
                <h5 class="card-title">Secondary card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-success mb-4">
            <div class="card-body text-success">
                <h5 class="card-title">Success card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-danger mb-4">
            <div class="card-body text-danger">
                <h5 class="card-title">Danger card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-warning mb-4">
            <div class="card-body text-warning">
                <h5 class="card-title">Warning card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-info mb-4">
            <div class="card-body text-info">
                <h5 class="card-title">Info card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-dark mb-4">
            <div class="card-body text-dark">
                <h5 class="card-title">Dark card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-light mb-4">
            <div class="card-body text-muted">
                <h5 class="card-title">Light card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</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 Stilizovanje kartice</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">
    <div class="card border-primary mb-3" style="width: 20rem;">
        <div class="card-body text-primary">
            <h5 class="card-title">Primary card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
    <div class="card border-secondary mb-3" style="width: 20rem;">
        <div class="card-body text-secondary">
            <h5 class="card-title">Secondary card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
    <div class="card border-success mb-3" style="width: 20rem;">
        <div class="card-body text-success">
            <h5 class="card-title">Success card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
    <div class="card border-danger mb-3" style="width: 20rem;">
        <div class="card-body text-danger">
            <h5 class="card-title">Danger card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
    <div class="card border-warning mb-3" style="width: 20rem;">
        <div class="card-body text-warning">
            <h5 class="card-title">Warning card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
    <div class="card border-info mb-3" style="width: 20rem;">
        <div class="card-body text-info">
            <h5 class="card-title">Info card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
    <div class="card border-light mb-3" style="width: 20rem;">
        <div class="card-body text-muted">
            <h5 class="card-title">Light card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
    <div class="card border-dark mb-3" style="width: 20rem;">
        <div class="card-body text-dark">
            <h5 class="card-title">Dark card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Primary card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Secondary card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Success card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Danger card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Warning card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Info card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Dark card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.

Light card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.



Opcije rasporeda kartice

Pored stila karata, Bootstrap takođe uključuje nekoliko opcija za postavljanje niza kartica.



Kreiranje grupe kartica

Grupne kartice možete koristiti za prikazivanje kartica kao pojedinačne, pričvršćene elementa s jednakom širinom i visinom. Grupe kartica koriste prikaz: flex; kako bi se postigla njihova jednolična dimenzija.

<div class="card-group">
    <div class="card">
        <img src="img/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">HTML5-CSS3</h5>
            <p class="card-text">Na svijetu trenutno postoji više od milijardu web sajtova, 
            a dok čitate ovu rečenicu pokrenuto je 15 novih</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Ažurirano prije 3 minute</small>
        </div>
    </div>
    <div class="card">
        <img src="img/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">PHP-MySQL</h5>
            <p class="card-text">PHP je jednostavan i istovremeno moćan Script 
            programski jezik za izradu dinamičkog web sadržaja.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Ažurirano prije 3 minute</small>
        </div>
    </div>
    <div class="card">
        <img src="img/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Bootstrap</h5>
            <p class="card-text">Bootstrap je najpopularniji i najsnažniji front-end 
            (HTML, CSS i JavaScript) framework.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Ažurirano prije 3 minute</small>
        </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 Grupne kartice</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">
    <div class="container-fluid">
        <div class="row">
            <div class="card-group">
              <div class="card">
                  <img src="img/thumbnail.svg" class="card-img-top" alt="...">
                  <div class="card-body">
                      <h5 class="card-title">HTML5-CSS3</h5>
                      <p class="card-text">Na svijetu trenutno postoji više od milijardu web sajtova, 
                      a dok čitate ovu rečenicu pokrenuto je 15 novih</p>
                  </div>
                  <div class="card-footer">
                      <small class="text-muted">Ažurirano prije 3 minute</small>
                  </div>
              </div>
              <div class="card">
                  <img src="img/thumbnail.svg" class="card-img-top" alt="...">
                  <div class="card-body">
                      <h5 class="card-title">PHP-MySQL</h5>
                      <p class="card-text">PHP je jednostavan i istovremeno moćan Script 
                      programski jezik za izradu dinamičkog web sadržaja.</p>
                  </div>
                  <div class="card-footer">
                      <small class="text-muted">Ažurirano prije 3 minute</small>
                  </div>
              </div>
              <div class="card">
                  <img src="img/thumbnail.svg" class="card-img-top" alt="...">
                  <div class="card-body">
                      <h5 class="card-title">Bootstrap</h5>
                      <p class="card-text">Bootstrap je najpopularniji i najsnažniji front-end 
                      (HTML, CSS i JavaScript) framework.</p>
                  </div>
                  <div class="card-footer">
                      <small class="text-muted">Ažurirano prije 3 minute</small>
                  </div>
              </div>
          </div>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

...
HTML5-CSS3

Na svijetu trenutno postoji više od milijardu web sajtova, a dok čitate ovu rečenicu pokrenuto je 15 novih

...
PHP-MySQL

PHP je jednostavan i istovremeno moćan Script programski jezik za izradu dinamičkog web sadržaja.

...
Bootstrap

Bootstrap je najpopularniji i najsnažniji front-end (HTML, CSS i JavaScript) framework.



Stvaranje seta kartica

Setovi kartica slični su grupama kartica (tj. svaka kartica ima jednaku širinu i visinu). Jedina razlika je u tome što kartice nisu povezane jedna s drugom. Pogledajmo primjer:

<div class="card-deck">
    <div class="card">
        <img src="img/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">HTML5-CSS3</h5>
            <p class="card-text">Na svijetu trenutno postoji više od milijardu web sajtova, 
            a dok čitate ovu rečenicu pokrenuto je 15 novih</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Ažurirano prije 3 minute</small>
        </div>
    </div>
    <div class="card">
        <img src="img/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">PHP-MySQL</h5>
            <p class="card-text">PHP je jednostavan i istovremeno moćan Script 
            programski jezik za izradu dinamičkog web sadržaja.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Ažurirano prije 3 minute</small>
        </div>
    </div>
    <div class="card">
        <img src="img/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Bootstrap</h5>
            <p class="card-text">Bootstrap je najpopularniji i najsnažniji front-end 
            (HTML, CSS i JavaScript) framework.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Ažurirano prije 3 minute</small>
        </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 Setovi kartica</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">
    <div class="container-fluid">
        <div class="row">
            <div class="card-deck">
              <div class="card">
                  <img src="img/thumbnail.svg" class="card-img-top" alt="...">
                  <div class="card-body">
                      <h5 class="card-title">HTML5-CSS3</h5>
                      <p class="card-text">Na svijetu trenutno postoji više od milijardu web sajtova, 
                      a dok čitate ovu rečenicu pokrenuto je 15 novih</p>
                  </div>
                  <div class="card-footer">
                      <small class="text-muted">Ažurirano prije 3 minute</small>
                  </div>
              </div>
              <div class="card">
                  <img src="img/thumbnail.svg" class="card-img-top" alt="...">
                  <div class="card-body">
                      <h5 class="card-title">PHP-MySQL</h5>
                      <p class="card-text">PHP je jednostavan i istovremeno moćan Script 
                      programski jezik za izradu dinamičkog web sadržaja.</p>
                  </div>
                  <div class="card-footer">
                      <small class="text-muted">Ažurirano prije 3 minute</small>
                  </div>
              </div>
              <div class="card">
                  <img src="img/thumbnail.svg" class="card-img-top" alt="...">
                  <div class="card-body">
                      <h5 class="card-title">Bootstrap</h5>
                      <p class="card-text">Bootstrap je najpopularniji i najsnažniji front-end 
                      (HTML, CSS i JavaScript) framework.</p>
                  </div>
                  <div class="card-footer">
                      <small class="text-muted">Ažurirano prije 3 minute</small>
                  </div>
              </div>
          </div>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

...
HTML5-CSS3

Na svijetu trenutno postoji više od milijardu web sajtova, a dok čitate ovu rečenicu pokrenuto je 15 novih

...
PHP-MySQL

PHP je jednostavan i istovremeno moćan Script programski jezik za izradu dinamičkog web sadržaja.

...
Bootstrap

Bootstrap je najpopularniji i najsnažniji front-end (HTML, CSS i JavaScript) framework.



Kreiranje kolona kartica

Pomoću Bootstrapa 5 takođe možete stvoriti mrežu karata poput Pinterest-a umotavanjem u .card-columns. Kartice su izgrađene sa svojstvima CSS kolona umjesto sa flexbox-om radi lakšeg poravnanja. Kartice su poredane odozgo prema dolje i slijeva udesno. Pogledajmo primjer:

<div class="card-columns">
<div class="card">
    <img src="img/thumbnail.svg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">HTML5-CSS3</h5>
        <p class="card-text">Na svijetu trenutno postoji više od milijardu web sajtova, 
        a dok čitate ovu rečenicu pokrenuto je 15 novih</p>
        <p class="card-text"><small class="text-muted">Ažurirano prije 3 minute</small></p>
    </div>
</div>
<div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
        <p>Java je jedan od najpopularnijih programskih jezika, zbog svoje svestranosti i kompatibilnosti.</p>
        <footer class="blockquote-footer">
            <small class="text-muted">Java kurs</small>
        </footer>
    </blockquote>
</div>
<div class="card">
    <img src="img/thumbnail.svg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">PHP-MySQL</h5>
        <p class="card-text">PHP je jednostavan i istovremeno moćan Script
 programski jezik za izradu dinamičkog web sadržaja.</p>
        <p class="card-text"><small class="text-muted">Ažurirano prije 3 minute</small></p>
    </div>
</div>
<div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
        <p>Njegova sintaksa je dizajnirana da bude čitljiva i jednostavna i dosta liči na običan engleski jezik.</p>
        <footer class="blockquote-footer text-white">
            <small>Python kurs</small>
        </footer>
    </blockquote>
</div>
<div class="card text-center">
    <div class="card-body">
        <h5 class="card-title">Bootstrap</h5>
        <p class="card-text">Bootstrap je najpopularniji i najsnažniji front-end 
        (HTML, CSS i JavaScript) framework.</p>
        <p class="card-text"><small class="text-muted">Ažurirano prije 3 minute</small></p>
    </div>
</div>
<div class="card">
    <img src="img/thumbnail.svg" class="card-img-top" alt="...">
</div>
<div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
        <p>SQL je relativno lagan jezik za naučiti. Gotovo svakoj kompaniji je potrebna osoba sa znanjem SQL-a.</p>
        <footer class="blockquote-footer">
            <small class="text-muted">SQL kurs</small>
        </footer>
    </blockquote>
</div>
<div class="card">
    <div class="card-body">
        <h5 class="card-title">jQuery</h5>
        <p class="card-text">Query je moćna i široko korištena JavaScript biblioteka za 
        pojednostavljivanje uobičajenih zadataka.</p>
        <p class="card-text"><small class="text-muted">Ažurirano prije 3 minute</small></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 Kolone kartica</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">
    <div class="container">
        <div class="row">
            <div class="card-columns">
              <div class="card">
                  <img src="img/thumbnail.svg" class="card-img-top" alt="...">
                  <div class="card-body">
                      <h5 class="card-title">HTML5-CSS3</h5>
                      <p class="card-text">Na svijetu trenutno postoji više od milijardu web sajtova, 
                      a dok čitate ovu rečenicu pokrenuto je 15 novih</p>
                      <p class="card-text"><small class="text-muted">Ažurirano prije 3 minute</small></p>
                  </div>
              </div>
              <div class="card p-3">
                  <blockquote class="blockquote mb-0 card-body">
                      <p>Java je jedan od najpopularnijih programskih
                       jezika, zbog svoje svestranosti i kompatibilnosti.</p>
                      <footer class="blockquote-footer">
                          <small class="text-muted">Java kurs</small>
                      </footer>
                  </blockquote>
              </div>
              <div class="card">
                  <img src="img/thumbnail.svg" class="card-img-top" alt="...">
                  <div class="card-body">
                      <h5 class="card-title">PHP-MySQL</h5>
                      <p class="card-text">PHP je jednostavan i istovremeno moćan Script
               programski jezik za izradu dinamičkog web sadržaja.</p>
                      <p class="card-text"><small class="text-muted">Ažurirano prije 3 minute</small></p>
                  </div>
              </div>
              <div class="card bg-primary text-white text-center p-3">
                  <blockquote class="blockquote mb-0">
                      <p>Njegova sintaksa je dizajnirana da bude
                       čitljiva i jednostavna i dosta liči na običan engleski jezik.</p>
                      <footer class="blockquote-footer text-white">
                          <small>Python kurs</small>
                      </footer>
                  </blockquote>
              </div>
              <div class="card text-center">
                  <div class="card-body">
                      <h5 class="card-title">Bootstrap</h5>
                      <p class="card-text">Bootstrap je najpopularniji i najsnažniji front-end 
                      (HTML, CSS i JavaScript) framework.</p>
                      <p class="card-text"><small class="text-muted">Ažurirano prije 3 minute</small></p>
                  </div>
              </div>
              <div class="card">
                  <img src="img/thumbnail.svg" class="card-img-top" alt="...">
              </div>
              <div class="card p-3 text-right">
                  <blockquote class="blockquote mb-0">
                      <p>SQL je relativno lagan jezik za naučiti. 
                      Gotovo svakoj kompaniji je potrebna osoba sa znanjem SQL-a.</p>
                      <footer class="blockquote-footer">
                          <small class="text-muted">SQL kurs</small>
                      </footer>
                  </blockquote>
              </div>
              <div class="card">
                  <div class="card-body">
                      <h5 class="card-title">jQuery</h5>
                      <p class="card-text">Query je moćna i široko korištena JavaScript biblioteka za 
                      pojednostavljivanje uobičajenih zadataka.</p>
                      <p class="card-text"><small class="text-muted">Ažurirano prije 3 minute</small></p>
                  </div>
              </div>
              </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

...
HTML5-CSS3

Na svijetu trenutno postoji više od milijardu web sajtova, a dok čitate ovu rečenicu pokrenuto je 15 novih

Ažurirano prije 3 minute

Java je jedan od najpopularnijih programskih jezika, zbog svoje svestranosti i kompatibilnosti.

Java kurs
...
PHP-MySQL

PHP je jednostavan i istovremeno moćan Script programski jezik za izradu dinamičkog web sadržaja.

Ažurirano prije 3 minute

Njegova sintaksa je dizajnirana da bude čitljiva i jednostavna i dosta liči na običan engleski jezik.

Python kurs
Bootstrap

Bootstrap je najpopularniji i najsnažniji front-end (HTML, CSS i JavaScript) framework.

Ažurirano prije 3 minute

...

SQL je relativno lagan jezik za naučiti. Gotovo svakoj kompaniji je potrebna osoba sa znanjem SQL-a.

SQL kurs
jQuery

Query je moćna i široko korištena JavaScript biblioteka za pojednostavljivanje uobičajenih zadataka.

Ažurirano prije 3 minute



Kreiranje horizontalnih kartica

Takođe možete kreirati horizontalne kartice na kojima se sadržaj slike i teksta postavlja jedno pored drugog koristeći kombinaciju klase mreže i korisnih klasa, kao što je prikazano u sljedećem primjeru:

<div class="card" style="max-width: 500px;">
    <div class="row no-gutters">
        <div class="col-sm-5" style="background: #868e96;">
            <img src="img/sample.svg" class="card-img-top h-100" alt="...">
        </div>
        <div class="col-sm-7">
            <div class="card-body">
                <h5 class="card-title">Miloš Mihaljica</h5>
                <p class="card-text">Miloš je osnivač sajta IT TUTORIJALI i pomaže drugima da uđu u svijet programiranja.</p>
                <a href="#" class="btn btn-primary stretched-link">Pogledaj profil</a>
            </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 Horizontalne kartice</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">
    <div class="card" style="max-width: 500px;">
        <div class="row no-gutters">
            <div class="col-sm-5" style="background: #868e96;">
                <img src="img/sample.svg" class="card-img-top h-100" alt="...">
            </div>
            <div class="col-sm-7">
                <div class="card-body">
                    <h5 class="card-title">Miloš Mihaljica</h5>
                    <p class="card-text">Miloš je osnivač sajta IT TUTORIJALI i pomaže drugima da uđu u svijet programiranja.</p>
                    <a href="#" class="btn btn-primary stretched-link">Pogledaj profil</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

...
Miloš Mihaljica

Miloš je osnivač sajta IT TUTORIJALI i pomaže drugima da uđu u svijet programiranja.

Pogledaj profil


Prekrivanje slike na kartici

Možete čak i sliku pretvoriti u pozadinu kartice i postaviti tekst kartice na vrh koristeći klasu .card-img-overlay umjesto .card-body. Zavisno o slici, možda će vam trebati dodatni stilovi za bolja podešavanja. Pogledajmo primjer:

<div class="card text-white" style="width: 350px;">
    <img src="img/sample.svg" class="card-img-top" alt="...">
    <div class="card-img-overlay">
        <h5 class="card-title">Miloš Mihaljica</h5>
        <p class="card-text">Miloš je osnivač sajta IT TUTORIJALI i pomaže drugima da uđu u svijet programiranja.</p>
        <a href="#" class="btn btn-primary stretched-link">Pogledaj profil</a>
    </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 Prekrivanje slike na kartici</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">
    <div class="card text-white" style="width: 350px;">
        <img src="img/sample.svg" class="card-img-top" alt="...">
        <div class="card-img-overlay">
            <h5 class="card-title">Miloš Mihaljica</h5>
            <p class="card-text">Miloš je osnivač sajta IT TUTORIJALI i pomaže drugima da uđu u svijet programiranja.</p>
            <a href="#" class="btn btn-primary stretched-link">Pogledaj profil</a>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

...
Miloš Mihaljica

Miloš je osnivač sajta IT TUTORIJALI i pomaže drugima da uđu u svijet programiranja.

Pogledaj profil



Poravnanje teksta na kartici

Možete lako promijeniti poravnanje teksta bilo koje kartice - u cijelosti ili određenih dijelova - pomoću klasa za poravnavanje teksta. Pogledajmo primjer:

<!-- Kartica sa zadanim poravnanjem teksta -->
<div class="card">
    <div class="card-body">
        <h5 class="card-title">HTML5-CSS3</h5>
        <p class="card-text">Na svijetu trenutno postoji više od milijardu web sajtova, 
        a dok čitate ovu rečenicu pokrenuto je 15 novih.</p>
        <a href="#" class="btn btn-primary">Detaljnije</a>
    </div>
</div>

<!-- Kartica sa središnjim poravnanjem teksta -->
<div class="card text-center mt-3">
    <div class="card-body">
        <h5 class="card-title">PHP-MySQL</h5>
        <p class="card-text">PHP je jednostavan i istovremeno moćan Script
        programski jezik za izradu dinamičkog web sadržaja.</p>
        <a href="#" class="btn btn-primary">Detaljnije</a>
    </div>
</div>

<!-- Kartica sa desnim poravnanjem teksta -->
<div class="card text-right mt-3">
    <div class="card-body">
        <h5 class="card-title">Bootstrap</h5>
        <p class="card-text">Bootstrap je najpopularniji i najsnažniji front-end 
        (HTML, CSS i JavaScript) framework.</p>
        <a href="#" class="btn btn-primary">Detaljnije</a>
    </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 Poravnanje teksta kartice</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">
    <!-- Kartica sa zadanim poravnanjem teksta -->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">HTML5-CSS3</h5>
            <p class="card-text">Na svijetu trenutno postoji više od milijardu web sajtova, 
            a dok čitate ovu rečenicu pokrenuto je 15 novih.</p>
            <a href="#" class="btn btn-primary">Detaljnije</a>
        </div>
    </div>

    <!-- Kartica sa središnjim poravnanjem teksta -->
    <div class="card text-center mt-3">
        <div class="card-body">
            <h5 class="card-title">PHP-MySQL</h5>
            <p class="card-text">PHP je jednostavan i istovremeno moćan Script
            programski jezik za izradu dinamičkog web sadržaja.</p>
            <a href="#" class="btn btn-primary">Detaljnije</a>
        </div>
    </div>

    <!-- Kartica sa desnim poravnanjem teksta -->
    <div class="card text-right mt-3">
        <div class="card-body">
            <h5 class="card-title">Bootstrap</h5>
            <p class="card-text">Bootstrap je najpopularniji i najsnažniji front-end 
            (HTML, CSS i JavaScript) framework.</p>
            <a href="#" class="btn btn-primary">Detaljnije</a>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

HTML5-CSS3

Na svijetu trenutno postoji više od milijardu web sajtova, a dok čitate ovu rečenicu pokrenuto je 15 novih.

Detaljnije
PHP-MySQL

PHP je jednostavan i istovremeno moćan Script programski jezik za izradu dinamičkog web sadržaja.

Detaljnije
Bootstrap

Bootstrap je najpopularniji i najsnažniji front-end (HTML, CSS i JavaScript) framework.

Detaljnije


Određivanje veličine kartice

Kartice nemaju određenu širinu, već su prema zadanim postavkama široke 100%. Međutim, to možete promijeniti prema potrebi s prilagođenim CSS-om, za određivanje veličine kartice. Pogledajmo kako ovo funkcioniše:

<!-- Veličina kartice pomoću grid-a -->
<div class="row">
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">HTML5-CSS3</h5>
                <p class="card-text">Na svijetu trenutno postoji više od milijardu web sajtova, 
                a dok čitate ovu rečenicu pokrenuto je 15 novih.</p>
                <a href="#" class="btn btn-primary">Detaljnije</a>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">PHP-MySQL</h5>
                <p class="card-text">PHP je jednostavan i istovremeno moćan Script
                programski jezik za izradu dinamičkog web sadržaja.</p>
                <a href="#" class="btn btn-primary">Detaljnije</a>
            </div>
        </div>
    </div>
</div>

<!-- Određivanje veličine kartice pomoću utility klase -->
<div class="card w-75">
    <div class="card-body">
        <h5 class="card-title">Bootstrap</h5>
        <p class="card-text">Bootstrap je najpopularniji i najsnažniji front-end 
        (HTML, CSS i JavaScript) framework.</p>
        <a href="#" class="btn btn-primary">Detaljnije</a>
    </div>
</div>

<!-- Određivanje veličine kartice pomoću utility klase -->
<div class="card" style="width: 15rem;">
    <div class="card-body">
        <h5 class="card-title">Java</h5>
        <p class="card-text">Java je jedan od najpopularnijih programskih
        jezika, zbog svoje svestranosti i kompatibilnosti.</p>
        <a href="#" class="btn btn-primary">Detaljnije</a>
    </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 Veličina kartica</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">
    <div class="container-fluid">
        <!-- Veličina kartice pomoću grid-a -->
        <div class="row mb-4">
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">HTML5-CSS3</h5>
                        <p class="card-text">Na svijetu trenutno postoji više od milijardu web sajtova, 
                        a dok čitate ovu rečenicu pokrenuto je 15 novih.</p>
                        <a href="#" class="btn btn-primary">Detaljnije</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">PHP-MySQL</h5>
                        <p class="card-text">PHP je jednostavan i istovremeno moćan Script
                        programski jezik za izradu dinamičkog web sadržaja.</p>
                        <a href="#" class="btn btn-primary">Detaljnije</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Određivanje veličine kartice pomoću utility klase -->
        <div class="card w-75 mb-4">
            <div class="card-body">
                <h5 class="card-title">Bootstrap</h5>
                <p class="card-text">Bootstrap je najpopularniji i najsnažniji front-end 
                (HTML, CSS i JavaScript) framework.</p>
                <a href="#" class="btn btn-primary">Detaljnije</a>
            </div>
        </div>

        <!-- Određivanje veličine kartice pomoću utility klase -->
        <div class="card" style="width: 15rem;">
            <div class="card-body">
                <h5 class="card-title">Java</h5>
                <p class="card-text">Java je jedan od najpopularnijih programskih
                jezika, zbog svoje svestranosti i kompatibilnosti.</p>
                <a href="#" class="btn btn-primary">Detaljnije</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

HTML5-CSS3

Na svijetu trenutno postoji više od milijardu web sajtova, a dok čitate ovu rečenicu pokrenuto je 15 novih.

Detaljnije
PHP-MySQL

PHP je jednostavan i istovremeno moćan Script programski jezik za izradu dinamičkog web sadržaja.

Detaljnije

Bootstrap

Bootstrap je najpopularniji i najsnažniji front-end (HTML, CSS i JavaScript) framework.

Detaljnije

Java

Java je jedan od najpopularnijih programskih jezika, zbog svoje svestranosti i kompatibilnosti.

Detaljnije


Kartica s razvučenim linkovima

Možete dodati klasu .stretched-link na link unutar kartice kako biste na cijelu karticu mogli kliknuti (tj. cijela kartica ponaša se kao veza). Višestruke veze se ne preporučuju s razvučenim linkovima. Isprobajte sljedeći primjer da vidite kako ovo zapravo funkcioniše:

<div class="card" style="width: 300px;">
    <img src="img/sample.svg" class="card-img-top" alt="...">
    <div class="card-body text-center">
        <h5 class="card-title">Miloš Mihaljica</h5>
        <p class="card-text">Miloš je osnivač sajta IT TUTORIJALI i pomaže drugima da uđu u svijet programiranja.</p>
        <a href="#" class="btn btn-primary stretched-link">Pogledaj profil</a>
    </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 Kartice sa razvučenim linkovima</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">
    <div class="card" style="width: 300px;">
        <img src="img/sample.svg" class="card-img-top" alt="...">
        <div class="card-body text-center">
            <h5 class="card-title">Miloš MIhaljica</h5>
            <p class="card-text">Miloš je osnivač sajta IT TUTORIJALI i pomaže drugima da uđu u svijet programiranja.</p>
            <a href="#" class="btn btn-primary stretched-link">Pogledaj profil</a>
        </div>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

...
Miloš Mihaljica

Miloš je osnivač sajta IT TUTORIJALI i pomaže drugima da uđu u svijet programiranja.

Pogledaj profil