Summary  
This chapter explains how to apply CSS utility classes to style text elements—adjusting headings, font sizes, font weights, italics, lead text emphasis, and alignment—using Bootstrap’s typography system.  

General domain of usage  
Front-end web development and UI styling

Bootstrap tarjoaa joukon typografialuokkia tekstielementtien yhdenmukaiseen tyylittelyyn. Näitä luokkia voidaan käyttää otsikoihin, kappaleisiin, span-elementteihin ja muihin tekstielementteihin.

## Otsikot 
Otsikoita voidaan muotoilla käyttämällä luokkia, kuten `h1`–`h6`, säätämään niiden kokoa.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+VHlwb2dyYXBoeSBQYXJ0IDEgRXhhbXBsZSAxPC90aXRsZT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxoMSBjbGFzcz0iaDEiPkhlYWRpbmcgMTwvaDE+CiAgICA8aDIgY2xhc3M9ImgyIj5IZWFkaW5nIDI8L2gyPgogICAgPGgzIGNsYXNzPSJoMyI+SGVhZGluZyAzPC9oMz4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjMuMi9kaXN0L2pzL2Jvb3RzdHJhcC5taW4uanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

## Fonttikoko 
Bootstrap tarjoaa luokkia, kuten `fs-1`, `fs-2`, `fs-3`, `fs-4`, `fs-5` ja `fs-6`, tekstin koon hallintaan.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+VHlwb2dyYXBoeSBQYXJ0IDEgRXhhbXBsZSAyPC90aXRsZT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwIGNsYXNzPSJmcy0xIj5mcy0xIFRleHQ8L3A+CiAgICA8cCBjbGFzcz0iZnMtMiI+ZnMtMiBUZXh0PC9wPgogICAgPHAgY2xhc3M9ImZzLTMiPmZzLTMgVGV4dDwvcD4KICAgIDxwIGNsYXNzPSJmcy00Ij5mcy00IFRleHQ8L3A+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4zLjIvZGlzdC9qcy9ib290c3RyYXAubWluLmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

## Fontin paksuus ja kursivointi
Fontin paksuus määritellään luokalla `fw-*` (`font-weight`), kun taas kursivointi toteutetaan luokalla `fst-*` (`font-style`).

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+VHlwb2dyYXBoeSBQYXJ0IDEgRXhhbXBsZSAzPC90aXRsZT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9InJvdyI+CiAgICAgIDxkaXYgY2xhc3M9ImNvbCI+CiAgICAgICAgPGgxIGNsYXNzPSJoMiI+Rm9udCB3ZWlnaHQgdmFyaWF0aW9uczwvaDE+CiAgICAgICAgPHAgY2xhc3M9ImZ3LWJvbGQiPlRoaXMgdGV4dCBpcyBib2xkLjwvcD4KICAgICAgICA8cCBjbGFzcz0iZnctc2VtaWJvbGQiPlRoaXMgdGV4dCBpcyBzZW1pYm9sZC48L3A+CiAgICAgICAgPHAgY2xhc3M9ImZ3LW5vcm1hbCI+VGhpcyB0ZXh0IGlzIG5vcm1hbC48L3A+CiAgICAgICAgPHAgY2xhc3M9ImZ3LWxpZ2h0Ij5UaGlzIHRleHQgaXMgbGlnaHQuPC9wPgogICAgICAgIDxwIGNsYXNzPSJmdy1saWdodGVyIj5UaGlzIHRleHQgaXMgZXZlbiBsaWdodGVyLjwvcD4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImNvbCI+CiAgICAgICAgPGgxIGNsYXNzPSJoMiI+Rm9udCBzdHlsZSB2YXJpYXRpb25zPC9oMT4KICAgICAgICA8cCBjbGFzcz0iZnN0LWl0YWxpYyI+VGhpcyB0ZXh0IGlzIGl0YWxpY2l6ZWQuPC9wPgogICAgICAgIDxwIGNsYXNzPSJmc3Qtbm9ybWFsIj5UaGlzIHRleHQgaXMgaW4gbm9ybWFsIGZvbnQgc3R5bGUuPC9wPgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvanMvYm9vdHN0cmFwLm1pbi5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

## Korostettu teksti
`lead`-luokkaa käytetään korostamaan kappaletta suurentamalla sen fonttikokoa ja lihavoimalla tekstiä.

## Tekstin tasaus
Luokkia kuten `text-start`, `text-center` ja `text-left` käytetään tekstielementtien tasaamiseen.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+VHlwb2dyYXBoeSBQYXJ0IDEgRXhhbXBsZSA0PC90aXRsZT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwIGNsYXNzPSJsZWFkIj5UaGlzIGlzIGEgbGVhZCBwYXJhZ3JhcGguPC9wPgogICAgPHAgY2xhc3M9InRleHQtY2VudGVyIj5DZW50ZXItYWxpZ25lZCB0ZXh0LjwvcD4KICAgIDxwIGNsYXNzPSJ0ZXh0LWVuZCI+UmlnaHQtYWxpZ25lZCB0ZXh0LjwvcD4KICAgIDxwIGNsYXNzPSJ0ZXh0LXN0YXJ0Ij5MZWZ0LWFsaWduZWQgdGV4dC48L3A+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4zLjIvZGlzdC9qcy9ib290c3RyYXAubWluLmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Tutustu Bootstrap CSS -kehyksen keskeisiin periaatteisiin ja opi luomaan responsiivisia ja visuaalisesti vaikuttavia verkkosivustoja nopeasti ja tehokkaasti. Käytännönläheisen tutustumisen avulla keskeisiin apuluokkiin ja tehokkaiden komponenttien hyödyntämiseen saat arvokasta käytännön kokemusta, joka tehostaa verkkokehitystyötäsi Bootstrapin monipuolisella työkalupaketilla.

Perehdy Bootstrapin ytimeen ja sen kehitykseen alkuvaiheista nykypäivään, arvioi sen hyödyt ja haitat sekä ymmärrä tehokkaan käyttöönoton edellytykset.

Tutustu Bootstrapin asennusvaihtoehtoihin. Valitse nopea integrointi Content Delivery Networkin (CDN) kautta tai räätälöidympi Node Package Managerin (NPM) lähestymistapa.

Hallitse keskeiset Bootstrap-elementit, kuten monipuolinen ruudukkosysteemi, hienovarainen typografia, dynaaminen painikkeiden käyttö, marginaalien ja täytteiden tarkka hallinta sekä tehokkaiden lomakkeiden luominen sujuvaa käyttäjävuorovaikutusta varten.

Syvennä Bootstrap-osaamistasi edistyneillä aiheilla, kuten dynaamiset navigointivalikot, responsiivinen kuvien käsittely, monipuoliset korttipohjat, interaktiiviset modaalit ja vaikuttavat karusellit, jotka tarjoavat mukaansatempaavia käyttäjäkokemuksia.

Luo portfoliosivusto Bootstrap-kehyksen avulla ohjeidemme mukaisesti. Hyödynnä Bootstrapin tehokkaita ominaisuuksia. Tämä käytännön osio auttaa esittelemään taitojasi, projektejasi ja saavutuksiasi.

Typografian Perusteet Bootstrapissa

Yleiset typografialuokat

Otsikot

Fonttikoko

Fontin paksuus ja kursivointi

Korostettu teksti

Tekstin tasaus