Come allineare il testo a sinistra e a destra all'interno di un div in bootstrap

La disposizione degli elementi dell'applicazione viene definita allineamento. Aiuta a creare un design pulito e li impedisce di essere un disordine disordinato. Bootstrap fornisce molte classi predefinite che vengono utilizzate a questo scopo. Queste classi includono "pull-sinistra","tirare a destra","float-sinistra", e molti altri.

Questo articolo spiegherà come impostare l'allineamento destro e sinistro del testo all'interno di un "" in bootstrap.

Come allineare il testo a destra e a sinistra all'interno di un div usando bootstrap?

Vengono utilizzati diversi modi per regolare l'allineamento del testo all'interno di a

contenitore. Tuttavia, discuteremo quanto segue:

• Metodo 1: impostare l'allineamento sinistro e destro usando "pull-sinistra" E "tirare a destra" Classe
• Metodo 2: impostare l'allineamento a destra e sinistra usando "Float-destra" E "float-sinistra" Classi
• Metodo 3: allineamento sinistro e destro usando il “Giustifica il contenuto di mezzo" Classe

Metodo 1: impostare il testo di allineamento a sinistra e a destra usando la classe "pull-sinistra" e "pull-righ"

In Bootstrap 3, il "tirare a destra" E "pull-sinistra"Le classi vengono utilizzate per impostare l'allineamento del testo sui lati destro e sinistro, rispettivamente.

L'esempio seguente mostra la dimostrazione pratica delle classi sopra discusse:

Innanzitutto, aggiungi un "" con il "ClearFix" E "BG-Info" classi.

All'interno del contenitore creato, aggiungi altri due ""Tag che contiene alcuni contenuti. Al primo viene assegnato la classe "pull-sinistra" e l'altra è assegnata la classe "pull-destra".

Html

Costo
$ 30

Qui:

• "ClearFix"La classe viene utilizzata per cancellare il contenuto galleggiato. Senza di essa, il layout sarebbe rotto.
• "pull-sinistra"La classe allinea il testo sul lato sinistro.
• "tirare a destra"La classe allinea il testo sul lato destro.

Si può osservare che il testo "Costo"Rimane allineato mentre il valore del dollaro rilevante è allineato a destra:

Metodo 2: impostare il testo di allineamento a destra e sinistra usando le classi "float-destra" e "float-left"

In Bootstrap 4, il "float-sinistra" E "Float-destra"Le classi vengono utilizzate per allineare gli elementi a sinistra e a destra. Per utilizzarli, prima:

• Aggiungi un elemento "" e assegnalo "BG-Warning" E "ClearFix" classi.
• All'interno di questo, aggiungi altri due elementi "" contenenti testo.
• Specificare la "float-sinistra"Classe per il primo contenitore che farà galleggiare il testo a sinistra.
• Assegna il "Float-destra"Al" "che galleggerà il testo a destra.

Ecco il codice HTML:

Punteggi
500

Produzione

Metodo 3: testo di allineamento sinistro e destro usando la classe "Justify-Content-mezzo"

In Bootstrap 4, il "Giustifica il contenuto di mezzo"La classe distribuisce uno spazio uguale tra gli elementi flessibili.

L'esempio seguente mostra una classe "" con "BG-Info","d-flex", E "Giustifica il contenuto di mezzo" classi:

Costo totale
$ 50

Produzione

Usando queste classi bootstrap, il testo all'interno del contenitore "" è destro e allineato a sinistra.

Suggerimento bonus
Se si desidera allineare tutti gli oggetti flessibili a sinistra, usa il bootstrap "Giustify-Content-Start"Classe e se gli articoli flessibili devono essere allineati a destra, usa il"giustificare il contenuto-end" classe.

Conclusione

A destra e sinistra allinea il testo all'interno di un elemento "", vengono utilizzate diverse classi. In Bootstrap 3, il "pull-sinistra" E "tirare a destra"Le lezioni sono utilizzate. In Bootstrap 4, il "float-sinistra" E "Float-destra"Le lezioni possono essere utilizzate. Gli elementi flessibili sono allineati utilizzando il "Giustifica il contenuto di mezzo" classe. Questo post ha spiegato come impostare l'allineamento sinistro e destro del testo all'interno di un contenitore "" in bootstrap.