Maqueta gràfica de la Diputació de Barcelona
Escut de la Diputació de Barcelona

Logos

Per a logos o imatges en diferents mides pots utilitzar les classes CSS .logo-{size} i/o .height-{size} per fixar la mida de les imatges. La classe .logo-{size} defineix una mida màxima, però la imatge es pot adaptar a mides més petites, i la classe .height-{size} fixa la mida. La mida per defecte d'un logo és: md.

Diputació de Barcelona
20px
.logo-xxs
.height-xxs
Diputació de Barcelona
30px
.logo-xs
.height-xs
Diputació de Barcelona
40px
.logo-sm
.height-sm
Diputació de Barcelona
50px
.logo-md
.height-md
Diputació de Barcelona
80px
.logo-lg
.height-lg
Diputació de Barcelona
100px
.logo-xl
.height-xl
Diputació de Barcelona
150px
.logo-xxl
.height-xxl

Zoom hover

Els components poden utilitzar la classe .zoom-hover per destacar-los quan es passa el ratolí per sobre.

Diputació de Barcelona
Botó amb zoom hover
Pots forçar que surti el cursor de mà quan es passa el ratolí per sobre d'un element. Per fer-ho, afegeix la classe .cursor-pointer a l'element que vulguis:
Cursor

Spinner

Les pantalles de càrrega o els processos asíncrons hauríen d'incorporar un spinner de càrrega.

Carregant...
Carregant...
Carregant...
Carregant...

Textos i apartats

Boostrap no ofereix classes d'utilitat per a text justificat. Tot i que, estèticament, el text justificat pot semblar més atractiu, fa que l'espai entre paraules sigui més aleatori i, per tant, més difícil de llegir. Tot i així la maqueta diba inclou la classe .text-justify per justificar el text si realment ho necessites.


Utilitza la classe .separador (gris) o .separador border-primary (color diba) juntament amb l'etiqueta hr o div o span per generar separadors entre diferents apartats.


Altres

Com que Bootstrap no permet definir border en funció del dispositiu s'ha creat la classe: .border-0-mobile per treure els borders en dispositius mòbils (<768px). Pots veure la seva aplicació en la caixa de cerca superior.