Tekstin Muotoilu ja Asettelu Bootstrapissa

Tekstin väri

Bootstrap tarjoaa joukon apuluokkia, joilla voidaan asettaa ennalta määritettyjä tekstin värejä elementteihin.

• text-primary: Asettaa tekstin väriksi ensisijaisen värin, yleensä sinisen sävyn;
• text-secondary: Asettaa tekstin väriksi toissijaisen värin, usein harmaan sävyn;
• text-success: Asettaa tekstin väriksi onnistumista osoittavan värin, yleensä vihreän sävyn;
• text-danger: Asettaa tekstin väriksi vaaran tai virheen osoittavan värin, usein punaisen sävyn;
• text-warning: Asettaa tekstin väriksi varoituksen osoittavan värin, yleensä keltaisen sävyn;
• text-info: Asettaa tekstin väriksi tiedon välittämiseen tarkoitetun värin, usein syaanin tai turkoosin sävyn;
• text-light: Asettaa tekstin väriksi vaaleamman sävyn, tyypillisesti vaaleanharmaan tai valkoisen;
• text-dark: Asettaa tekstin väriksi tummemman sävyn, tyypillisesti tummanharmaan tai mustan;
• text-muted: Asettaa tekstin väriksi hillityn tai vaimennetun sävyn, usein vaaleanharmaan, osoittamaan että teksti on vähemmän tärkeä tai pois käytöstä.

Näitä luokkia voidaan käyttää esimerkiksi elementeissä kuten <p>, <span>, <div>, <h> jne.

Tekstin muuntaminen

Luokat kuten text-uppercase, text-lowercase, ja text-capitalize muuntavat tekstin muotoa.

• text-uppercase: Muuntaa tekstin kokonaan isoiksi kirjaimiksi;
• text-lowercase: Muuntaa tekstin kokonaan pieniksi kirjaimiksi;
• text-capitalize: Muuttaa jokaisen sanan ensimmäisen kirjaimen isoksi.

Tekstin koristelu

Luokkia kuten text-decoration-underline, text-decoration-line-through ja text-decoration-none käytetään tekstin koristeluun.

• text-decoration-underline: Lisää alleviivauksen tekstiin;
• text-decoration-line-through: Lisää yliviivauksen tekstiin;
• text-decoration-none: Poistaa kaikki tekstin koristelut.