Bootstrap - Typography


Rad sa naslovima (Heading)

Možete definisati sve HTML naslove, od <h1> do <h6> na isti način kao što definišete u jednostavnom HTML dokumentu. Klase naslova možete koristiti od .h1 do .h6 na elementima ako želite da primjenite stil na tekstu elementa isto kao i naslovu.

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
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 Headings</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">
    <h1>h1. Bootstrap heading</h1>
    <h2>h2. Bootstrap heading</h2>
    <h3>h3. Bootstrap heading</h3>
    <h4>h4. Bootstrap heading</h4>
    <h5>h5. Bootstrap heading</h5>
    <h6>h6. Bootstrap heading</h6>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading


Prilagođavanje naslova

Dodatno možete da koristite tag <small> sa klasom .text-muted za prikaz sekundarnog teksta bilo kog naslova u manjoj i lakšoj varijaciji. Pogledajmo primjer:

<h2>
    Naš naslov
    <small class="text-muted"> sa nekim sekundarnim tekstom</small>
</h2>
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 Naslov sa sekundarnim tekstom</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">
    <h2>
        Naš naslov
        <small class="text-muted">sa nekim sekundarnim tekstom</small>
    </h2>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Naš naslov sa nekim sekundarnim tekstom



Prikazivanje naslova

Bootstrap 4 predstavlja naslove koji se mogu koristiti kada vam je potreban naslov da biste nešto istaknuli. Naslovi se prikazuju u većoj veličini fonta. Dostupna su četiri različita prikaza naslova. Pogledajmo primjer:

<h1 class="display-1">Display Heading 1</h1>
<h1 class="display-2">Display Heading 2</h1>
<h1 class="display-3">Display Heading 3</h1>
<h1 class="display-4">Display Heading 4</h1>
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 Prikazivanje naslova</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">
    <h1 class="display-1">Display Heading 1</h1>
    <h1 class="display-2">Display Heading 2</h1>
    <h1 class="display-3">Display Heading 3</h1>
    <h1 class="display-4">Display Heading 4</h1>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Display Heading 1

Display Heading 2

Display Heading 3

Display Heading 4



Rad sa paragrafima

Globalna podrazumjevana veličina slova Bootstrap-a je 1rem (obično 16px), sa visinom linije 1,5. Ovo se odnosi na <body> i sve paragrafe. Pored toga, donja margina od polovine njihove visine linije (podrazumevano 10px) primenjuje se na sve paragrafe, tj. na elemente <p>. Takođe možete da istaknete paragraf dodavanjem klase .lead.

<p>Ovako izgleda normalan paragraf u Bootstrap-u.</p>
<p class="lead">Ovako se paragraf ističe u Bootstrap-u.</p>
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 Paragrafi</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">
    <p>Ovako izgleda normalan paragraf u Bootstrap-u.</p>
    <p class="lead">Ovako se paragraf ističe u Bootstrap-u.</p>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Ovako izgleda normalan paragraf u Bootstrap-u.

Ovako se paragraf ističe u Bootstrap-u.


Pomoću klasa poravnanja teksta možete lako poravnati tekst lijevo, desno i centrirati ga unutar pasusa.

<p class="text-left">Lijevo poravnanje teksta.</p>
<p class="text-center">Centriranje teksta.</p>
<p class="text-right">Desno poravnanje teksta.</p>
<p class="text-justify">Razvučeni tekst preko cijele stranice.</p>

Takođe možete poravnati tekst na osnovu veličine ekrana pomoću klasa prilagodljivog poravnanja teksta. Ove klase koriste iste tačke prekida širine vidnog polja kao i grid system.

<p class="text-sm-left">Tekst poravnat ulijevo na malim ili širim okvirima prikaza.</p>
<p class="text-md-left">Tekst poravnat ulijevo na srednjim ili širokim okvirima prikaza.</p>
<p class="text-lg-left">Tekst poravnat ulijevo na velikim ili širim okvirima prikaza.</p>
<p class="text-xl-left">Tekst poravnat ulijevo na izuzetno velikim ili širim okvirima prikaza.</p>


Formatiranje teksta

Možete slobodno da koristite oznake za formatiranje teksta kao što su: <strong>, <i>, <small> da biste tekst učinili podebljanim, kurzivnim, malim i tako dalje, na isti način kao što to radite u HTML-u.

<p><b>Ovaj tekst je bold.</b></p>
<p><code>Ovo je computer code.</code></p>
<p><em>Ovo je naglašen tekst</em></p>
<p><i>Ovo je italic tekst</i></p>
<p><mark>Ovo je instaknuti tekst</mark></p>
<p><small>Ovo je mail tekst</small></p>
<p><strong>Ovo je jako naglašen tekst</strong></p>
<p>Ovo je <sub>subscript</sub> i<sup>superscript</sup></p>
<p><ins>Ovaj tekst je umetnut u dokument</ins></p>
<p><del>Ovaj tekst se briše iz dokumenta</del></p>
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 Formatiranje teksta</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">
    <p><b>Ovaj tekst je bold.</b></p>
    <p><code>Ovo je computer code.</code></p>
    <p><em>Ovo je naglašen tekst</em></p>
    <p><i>Ovo je italic tekst</i></p>
    <p><mark>Ovo je instaknuti tekst</mark></p>
    <p><small>Ovo je mail tekst</small></p>
    <p><strong>Ovo je jako naglašen tekst</strong></p>
    <p>Ovo je <sub>subscript</sub> i<sup>superscript</sup></p>
    <p><ins>Ovaj tekst je umetnut u dokument</ins></p>
    <p><del>Ovaj tekst se briše iz dokumenta</del></p>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Ovaj tekst je bold.

Ovo je computer code.

Ovo je naglašen tekst

Ovo je italic tekst

Ovo je instaknuti tekst

Ovo je mail tekst

Ovo je jako naglašen tekst

Ovo je subscript isuperscript

Ovaj tekst je umetnut u dokument

Ovaj tekst se briše iz dokumenta



Transformacija teksta

Tekst takođe možete transformisati u mala ili velika slova ili ih možete ispisati velikim slovima.

<p class="text-lowercase">Ovo je običan paragraf.</p>
<p class="text-uppercase">Ovo je običan paragraf.</p>
<p class="text-capitalize">Ovo je običan paragraf.</p>
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 Transformacija teksta</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">
    <p class="text-lowercase">Ovo je običan paragraf.</p>
    <p class="text-uppercase">Ovo je običan paragraf.</p>
    <p class="text-capitalize">Ovo je običan paragraf.</p>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Ovo je običan paragraf.

Ovo je običan paragraf.

Ovo je običan paragraf.



Boja teksta

Boje su moćan metod prenošenja važnih informacija u dizajnu web stranica. Bootstrap ima nekoliko klasa koje se mogu koristiti u tu svrhu, poput prikazivanja poruke o uspehu u zelenoj boji, upozorenja narandžastom bojom ili poruke o grešci u crvenom bojom itd.

<p class="text-primary">Primary: Molimo vas da pažljivo pročitate uputstva prije nego što nastavite.</p>
<p class="text-secondary">Secondary: Ovo je istaknuto i uklonjeno je iz najnovije verzije.</p>
<p class="text-success">Success: Vaša poruka je uspešno poslata.</p>
<p class="text-info">Info: Morate se složiti da biste dovršili postupak registracije.</p>
<p class="text-warning">Warning: Došlo je do problema sa vezom.</p>
<p class="text-danger">Danger: Došlo je do greške prilikom slanja podataka.</p>
<p class="text-muted">Muted: Ovaj paragraf teksta je siv.</p>
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 Naglašavanje teksta</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">
    <p class="text-primary">Primary: Molimo vas da pažljivo pročitate uputstva prije nego što nastavite.</p>
    <p class="text-secondary">Secondary: Ovo je istaknuto i uklonjeno je iz najnovije verzije.</p>
    <p class="text-success">Success: Vaša poruka je uspešno poslata.</p>
    <p class="text-info">Info: Morate se složiti da biste dovršili postupak registracije.</p>
    <p class="text-warning">Warning: Došlo je do problema sa vezom.</p>
    <p class="text-danger">Danger: Došlo je do greške prilikom slanja podataka.</p>
    <p class="text-muted">Muted: Ovaj paragraf teksta je siv.</p>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Primary: Molimo vas da pažljivo pročitate uputstva prije nego što nastavite.

Secondary: Ovo je istaknuto i uklonjeno je iz najnovije verzije.

Success: Vaša poruka je uspešno poslata.

Info: Morate se složiti da biste dovršili postupak registracije.

Warning: Došlo je do problema sa vezom.

Danger: Došlo je do greške prilikom slanja podataka.

Muted: Ovaj paragraf teksta je siv.



Stilizovanje Blockquotes

Takođe možete dati lep izgled svojim blok citatima. Samo definišite blok kotacije koristeći standardni element <blockquote>, a ostalo će uraditi tabela stilova Bootstrap-a. Za identifikovanje izvora možete dodati element <footer> sa klasom .blockquote-footer i obmotati ime izvornog dela u tag <cite>, ovako:

<blockquote class="blockquote">
    <p class="mb-0">Obrazovanje, to je ono što ostane nakon što zaboravite sve što ste naučili u školi.</p>
    <footer class="blockquote-footer">by <cite>Albert Einstein</cite></footer>
</blockquote>
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 blockquotes</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">
    <blockquote class="blockquote">
    <p class="mb-0">Obrazovanje, to je ono što ostane nakon što zaboravite sve što ste naučili u školi.</p>
    <footer class="blockquote-footer">by <cite>Albert Einstein</cite></footer>
</blockquote>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Obrazovanje, to je ono što ostane nakon što zaboravite sve što ste naučili u školi.

by Albert Einstein

Blok-citate takođe možete poravnati udesno ili postaviti na centar jednostavnim primjenama klasa poravnanja teksta .text-right ili .text-center na elementu <blockkuote>.