Bootstrap - Pomoćne klase


Klase boje (Color Classes)

Kontekstualne klase boja možete koristiti da naglasite tekst i prenesete značenje bojom. Evo kompletne liste dostupnih kontekstualnih klasa boje.

Klasa Opis Test
.text-primary Primjenjuje plavu boju (#007bff) na tekst. Primjer
.text-secondary Primjenjuje sivu boju (#6c757d) na tekst. Primjer
.text-success Primjenjuje zelenu boju (#28a745) na tekst. Primjer
.text-danger Primjenjuje crvenu boju (#dc3545) na tekst. Primjer
.text-warning Primjenjuje žutu boju (#ffc107) na tekst. Primjer
.text-info Primjenjuje svijetlo plavu boju (#17a2b8) na tekst. Primjer
.text-light Primjenjuje svijetlu boju (#f8f9fa) na tekst. Primjer
.text-dark Primjenjuje tamnu boju (#343a40) na tekst. Primjer
.text-body Primjenjuje difoltnu Bootstrap boju (#212529) na tekst. Primjer
.text-muted Primjenjuje sivu boju (#6c757d) na tekst. Primjer
.text-white Primjenjuje bijelu boju (#fff) na tekst. Primjer
.text-black-50 Primjenjuje 50% transparentnu crnu boju (rgba(0,0,0,.5)) na tekst. Primjer
.text-white-50 Primjenjuje 50% transparentnu bijelu boju (rgba(255,255,255,.5)) na tekst. Primjer


Klase pozadinske boje

Slično kao i kontekstualne klase boja, možete koristiti kontekstualne klase boja pozadine za postavljanje boje pozadine elementa da biste na njih dodali dodatni naglasak.

Klasa Opis Test
.bg-primary Primjenjuje plavu pozadinsku boju (#007bff) na element. Primjer
.bg-secondary Primjenjuje sivu pozadinsku boju (#6c757d) na element. Primjer
.bg-success Primjenjuje zelenu pozadinsku boju (#28a745) na element. Primjer
.bg-danger Primjenjuje crvenu pozadinsku boju (#dc3545) na element. Primjer
.bg-warning Primjenjuje žutu pozadinsku boju (#ffc107) na element. Primjer
.bg-info Primjenjuje svijetlo plavu pozadinsku boju (#17a2b8) na element. Primjer
.bg-light Primjenjuje svijetlu pozadinsku boju (#f8f9fa) na element. Primjer
.bg-dark Primjenjuje tamno sivu pozadinsku boju (#343a40) na element. Primjer
.bg-white Primjenjuje bijelu pozadinsku boju (#fff) na element. Primjer
.bg-transparent Primjenjuje transparentnu pozadinsku boju (transparent) na element. Primjer


Klase za poravnanje teksta

Klase poravnanja teksta možete koristiti za poravnavanje i formatiranje sadržaja teksta.

Klasa Opis Test
.text-left Poravnanje teksta lijevo Primjer
.text-center Poravnanje teksta na sredinu Primjer
.text-right Poravnanje teksta desno Primjer
.text-justify Poravnanje teksta na kompletnu širinu elementa Primjer
.text-wrap Omotavanje overflowing teksta Primjer
.text-nowrap Sprječavanje omotavanje teksta Primjer
.text-truncate Smanjenje teksta elipsom. Primjer
.text-break Prekid dugačke riječi da spriječi overflow. Primjer
.text-lowercase Transformiše tekst u mala slova Primjer
.text-uppercase Transformiše tekst u velika slova Primjer
.text-capitalize Svaka riječ počinje velikim slovom Primjer
.font-weight-bold Postavljanje font-weight na podebljano Primjer
.font-weight-bolder Postavljanje font-weight na podebljanije u odnosu na roditelja. Primjer
.font-weight-normal Postavljanje font-weight normalne debiljine. Primjer
.font-weight-light Postavljanje svjetli font-weight na element. Primjer
.font-weight-lighter Postavljanje još svjetlije font-weight na element. Primjer
.font-italic Postavlje stil fonta elementa na italic Primjer
.text-monospace Postavlja monospace font teksta na element (fixed-width) Primjer
.text-reset Resetovanje boje teksta ili linka (nasljeđuju boju roditelja) Primjer
.text-decoration-none Uklonite ukras teksta kao što je podvlačenje. Primjer


Klase bordera

Klase border možete koristiti za brzo oblikovanje bordera i radijusa bordera elementa. Vrlo su korisni za slike, dugmad ili bilo koji drugi element.

Klasa Opis Test
.border Dodaj border na sve strane elementa. Primjer
.border-top Dodaj border na gornju stranu elementa. Primjer
.border-right Dodaj border na desnu stranu elementa. Primjer
.border-bottom Dodaj border na donju stranu elementa. Primjer
.border-left Dodaj border na lijevu stranu elementa. Primjer
.border-0 Ukloni sve bordere s elementa. Primjer
.border-top-0 Ukloni border s gornje strane elementa. Primjer
.border-right-0 Ukloni border s desne strane elementa. Primjer
.border-bottom-0 Ukloni border s donje strane elementa. Primjer
.border-left-0 Ukloni border s lijeve strane elementa. Primjer
.border-primary Promjeni boju bordera elementa u plavu (#007bff). Primjer
.border-secondary Promjeni boju bordera elementa u sivu (#6c757d). Primjer
.border-success Promjeni boju bordera elementa u zelenu (#28a745). Primjer
.border-danger Promjeni boju bordera elementa u crvenu (#dc3545). Primjer
.border-warning Promjeni boju bordera elementa u žutu (#ffc107). Primjer
.border-info Promjeni boju bordera elementa u svijetlo plavu (#17a2b8). Primjer
.border-light Promjeni boju bordera elementa u svijetlo sivu (#f8f9fa). Primjer
.border-dark Promjeni boju bordera elementa u tamno sivu (#343a40). Primjer
.border-white Promjeni boju bordera elementa u bijelu (#fff). Primjer
.rounded Zaokruži sve uglove elementa. Primjer
.rounded-top Zaokruži gornji lijevi i gornji desni ugao elementa. Primjer
.rounded-right Zaokruži gornji desni i donji desni uglao elementa. Primjer
.rounded-bottom Zaokruži donji lijevi i donji desni ugao elementa. Primjer
.rounded-left Zaokruži gornji lijevi i donji lijevi ugao elementa. Primjer
.rounded-circle Zaokružite element u oblik kruga. Primjer
.rounded-pill Zaokružite element u oblik tablete. Primjer
.rounded-0 Ukloni okrugle uglove sa elementa. Primjer
.rounded-sm Postavite manji radius bordera (0,2rem) za element. Primjer
.rounded-lg Postavite veći radius bordera (0,2rem) za element. Primjer


Spacing klase

Klase razmaka možete koristiti za brzo prilagođavanje margine i dodavanja elementa. Znak # u klasama .mt-#, .pt-# itd. predstavlja veličinu margine ili paddinga. Vrijednost veličine može biti cijeli broj od 0 do 5 ili automatski. Veličina 0 u potpunosti uklanja marginu ili popunjavanje postavljanjem na 0, dok vrijednost automatski postavlja marginu na auto. Cjelobrojne vrijednosti od 1 do 5 postavljaju marginu ili popunjavanje postupno (u rasponu od 0,25rem do 3rem). Isprobajte sljedeće primjere da vidite kako to funkcioniše:

Klasa Opis Test
.mt-# Postavi gornju marginu elementa. Primjer
.mb-# Postavi donju marginu elementa. Primjer
.ml-# Postavi lijevu marginu elementa. Primjer
.mr-# Postavi desnu marginu elementa. Primjer
.mx-# Postavi lijevu i desnu marginu elementa. Primjer
.my-# Postavi gornju i donju marginu elementa. Primjer
.pt-# Postavi gornji padding elementa. Primjer
.pb-# Postavi donji padding elementa. Primjer
.pl-# Postavi lijevi padding elementa. Primjer
.pr-# Postavi desni padding elementa. Primjer
.px-# Postavi lijevi i desni padding elementa. Primjer
.py-# Postavi gore i dole padding na element. Primjer


Float klase

Klase float možete koristiti za brzo plutanje elementa ulijevo ili udesno ili potpuno uklanjanje float-a iz elementa. Evo liste dostupnih float klasa.

Klasa Opis Test
.float-left Plutajući (float) element lijevo. Primjer
.float-right Plutajući (float) element desno. Primjer
.float-none Onemogući plutanje (float) iz elementa. Primjer
.clearfix Očisti plutajuće (float) elemente da bi se spriječilo da se nadređeni element uruši. Primjer
.float-*-left Plutajući (float) element lijevo na osnovu veličine okvira za prikaz. Primjer
.float-*-right Plutajući (float) element udesno na osnovu veličine okvira za prikaz. Primjer
.float-*-none Onemogući plutanje (float) iz elementa na osnovu veličine okvira za prikaz. Primjer


Shadow klase

Shadow klase možete koristiti za brzo dodavanje ili uklanjanje sjena elementima.

Klasa Opis Test
.shadow Dodajte sjenu elementu. Primjer
.shadow-sm Dodajte malo sjene elementu. Primjer
.shadow-lg Dodajte veću sjenu elementu. Primjer
.shadow-none Uklonite sjenu sa elementa. Primjer


Sizing klase

Sizing klase možete koristiti da biste lako napravili element određene širine ili visine.

Klasa Opis Test
.w-25 Postavljanje širine elementa na 25% njegovog nadređenog elementa. Primjer
.w-50 Postavljanje širine elementa na 50% njegovog nadređenog elementa. Primjer
.w-75 Postavljanje širine elementa na 75% njegovog nadređenog elementa. Primjer
.w-100 Postavljanje širine elementa na 100% njegovog nadređenog elementa. Primjer
.w-auto Postavljanje širine elementa na auto, tj. pretraživač će izračunati i odabrati širinu za navedeni element. Primjer
.mw-100 Postavljanje maksimalne širine elementa na 100%. Primjer
.h-25 Postavljanje visine elementa na 25% njegovog nadređenog elementa. Primjer
.h-50 Postavljanje visine elementa na 50% njegovog nadređenog elementa. Primjer
.h-75 Postavljanje visine elementa na 75% njegovog nadređenog elementa. Primjer
.h-100 Postavljanje visine elementa na 100% njegovog nadređenog elementa. Primjer
.h-auto Postavljanje visine elementa na automatski, tj. pretraživač će izračunati i odabrati visinu za navedeni element. Primjer
.mh-100 Postavljanje maksimalne visine elementa na 100%. Primjer
.vw-100 Postavljanje širine elementa na 100% širine okvira za prikaz. Primjer
.min-vw-100 Postavljanje minimalne širine elementa na 100% širine okvira za prikaz. Primjer
.vh-100 Postavljanje visine elementa na 100% visine okvira za prikaz. Primjer
.min-vh-100 Postavljanje minimalne visine elementa na 100% visine okvira za prikaz. Primjer


Klase vertikalnog poravnanja

Klase vertikalno poravnanje možete koristiti za brzu promjenu vertikalnog poravnanja elemenata. Kao što je: nline, inline-block, inline-table, i table.

Klasa Opis Test
.align-baseline Poravnanje osnovne liniju elementa s osnovnom linijom njegovog roditelja. Primjer
.align-top Poravnanje vrha elementa s vrhom cijele linije. Primjer
.align-middle Poravnanje element u sredini nadređenog elementa. Primjer
.align-bottom Poravnanje na dno elementa s dnom cijele linije. Primjer
.align-text-top Poravnanje vrh elementa s vrhom fonta nadređenog elementa. Primjer
.align-text-bottom Poravnanje dna elementa s dnom fonta nadređenog elementa. Primjer


Položaj klasa

Klase položaja možete koristiti za brzo konfigurisanje položaja elementa.

Klasa Opis Test
.position-static Postavljanje statičkog položaja elementa. Primjer
.position-relative Postavljanje relativnog položaja elementa. Primjer
.position-absolute Postavljanje apsolutnog položaja elementa. Primjer
.position-fixed Postavljanje fiksnog položaja elementa. Primjer
.position-sticky Postavljanje ljepljivog položaja elementa. Primjer
.fixed-top Postavljanje element na vrh okvira za prikaz, od ivice do ivice. Primjer
.fixed-bottom Postavljanje element na dno okvira za prikaz, od ivice do ivice. Primjer
.sticky-top Postavljanje element na vrh okvira za prikaz, od ivice do ivice, ali to će se dogoditi tek nakon što pomaknete sadržaj. Primjer


Prikaz klasa

Klase prikaza možete koristiti za brzo i odzivno prebacivanje vrijednosti prikaza elementa. Takođe možete upravljati prikazom elementa prilikom ispisa stranice.

Klasa Opis Test
.d-none Sakrij element. Ne zauzima prostor na rasporedu. Primjer
.d-inline Prisiljavanje elementa da generiše okvir na nivou reda. Primjer
.d-inline-block Prisiljavanje element da generiše blok-okvir koji će se preliti sa okolnim sadržajem, tj. u istom redu kao i sadržaj pored njega, poput umetnutog okvira. Primjer
.d-block Prisiljavanje elementa da generiše okvir na nivou bloka. Primjer
.d-table Prisiljavanje elementa da se ponaša kao element <table>. Primjer
.d-table-row Prisiljavanje elementa da se ponaša kao element <tr>. Primjer
.d-table-cell Prisiljavanje elementa da se ponaša kao element <td>. Primjer
.d-flex Prisiljavanje elementa da generiše okvir okvira za flex na nivou bloka. Primjer
.d-inline-flex Prisiljavanje elementa da generiše okvir okvira za inline-level flex kontejner. Primjer

Takođe možete koristiti responzivne tačke prekida (sm, md, lg i xl.) S ovim prikazima klasa uslužnih programa za prikaz ili skrivanje elemenata u zavisnosti od širine okvira prikaza koristeći, na primjer: format .d-{breakpoint}-{value}, for Primjer, .d-sm-none, .d-md-block, .d-xl-block i tako dalje.



Razne klase

Evo liste još nekih klasa uslužnih programa koje se mogu koristiti u razne svrhe.

Klasa Opis Test
.close Kreiranje generičke ikone zatvaranja za odbacivanje sadržaja poput modaliteta i upozorenja. Primjer
.overflow-auto Ako je potrebno, navedite trake za pomicanje za prikaz overflowed sadržaja elementa. Primjer
.overflow-hidden Sakrij overflowed sadržaj elementa. Primjer
.stretched-link Napravite element na koji možete kliknuti rastezanjem ugniježdenog linka. Primjer
.visible Učinite element vidljivim, bez mijenjanja prikaza. Primjer
.invisible Neka element bude nevidljiv, ali svejedno zauzima prostor na stranici. Primjer
.sr-only Sakrivanje elementa na svim uređajima, osim na čitačima zaslona. Primjer
.text-hide Zamijena tekstualnog sadržaj elementa pozadinskom slikom. Primjer