Utilità per il layout

Per uno sviluppo più rapido e reattivo per dispositivi mobili, Bootstrap include dozzine di classi di utilità per mostrare, nascondere, allineare e spaziare i contenuti.

Mutevoledisplay

Utilizza le nostre utilità di visualizzazione per alternare in modo reattivo i valori comuni della displayproprietà. Combinalo con il nostro sistema di griglia, contenuto o componenti per mostrarli o nasconderli in finestre specifiche.

Opzioni Flexbox

Bootstrap 4 è costruito con flexbox, ma non tutti gli elementi displaysono stati modificati in display: flexquanto ciò aggiungerebbe molte sostituzioni non necessarie e cambierebbe inaspettatamente i comportamenti chiave del browser. La maggior parte dei nostri componenti sono costruiti con flexbox abilitato.

Se hai bisogno di aggiungere display: flexun elemento, fallo con .d-flexo con una delle varianti responsive (ad esempio, .d-sm-flex). Avrai bisogno di questa classe o displayvalore per consentire l'uso delle nostre utilità flexbox extra per il dimensionamento, l'allineamento, la spaziatura e altro ancora.

Margine e riempimento

Utilizzare le utilità di spaziaturamargin e per controllare la modalità di spaziatura e dimensioni degli elementi e dei componenti. Bootstrap 4 include una scala a cinque livelli per le utilità di spaziatura, basata su una variabile predefinita di valore . Scegli i valori per tutte le finestre (ad es. per ) o scegli le varianti reattive per scegliere come target finestre specifiche (ad es. per iniziare dal punto di interruzione).padding 1rem$spacer.mr-3margin-right: 1rem.mr-md-3margin-right: 1remmd

Attiva/disattivavisibility

Quando la commutazione displaynon è necessaria, puoi attivare o disattivare l' visibilityelemento di un elemento con le nostre utilità di visibilità . Gli elementi invisibili influenzeranno comunque il layout della pagina, ma sono visivamente nascosti ai visitatori.