Hvordan du kan til venstre og høyre justere tekst i en div i bootstrap

Arrangementet av elementene i applikasjonen blir referert til som justering. Det hjelper med å lage en pent design og holder dem borte fra å være et uordnet rot. Bootstrap gir mange forhåndsdefinerte klasser som brukes til dette formålet. Disse klassene inkluderer "Pull-venstre”,“trekk-høyre”,“Float-Left", og mange flere.

Denne oppskrivningen vil forklare hvordan du angir høyre og venstre justering av teksten i en "" i Bootstrap.

Hvordan høyre og venstre justere tekst i en div ved hjelp av bootstrap?

Flere måter brukes til å justere tekstjusteringen i en

container. Vi vil imidlertid diskutere følgende:

• Metode 1: Sett til venstre og høyre justering ved å bruke “Pull-venstre”Og“trekk-høyre”Klasse
• Metode 2: Sett høyre og venstre justering ved hjelp av “flyte-høyre”Og“Float-Left”Klasser
• Metode 3: Venstre og høyre justering ved bruk av “Justify-Content-mellom”Klasse

Metode 1: Sett til venstre og høyre juster tekst ved å bruke "Pull-Left" og "Pull-høyre" -klasse "

I bootstrap 3, "trekk-høyre”Og“Pull-venstre”Klasser brukes til å stille inn tekstens justering på henholdsvis høyre og venstre side.

Eksemplet nedenfor viser den praktiske demonstrasjonen av de ovennevnte klassene:

Først, legg til en "" med "ClearFix”Og“BG-Info”Klasser.

Inne i den opprettede beholderen, tilsett to til "”Tagger som holder litt innhold. Den første tildeles "Pull-venstre" -klassen, og den andre tildeles "Pull-høyre" -klassen.

Html

Koste
$ 30

Her:

• “ClearFix”Klassen brukes til å fjerne flytende innhold. Uten det ville oppsettet bli brutt.
• “Pull-venstre”Klassen justerer teksten på venstre side.
• “trekk-høyre”Klassen justerer teksten på høyre side.

Det kan observeres at teksten “Koste”Blir liggende på linje mens den aktuelle dollarverdien er rettet mot høyre:

Metode 2: Sett høyre og venstre juster tekst ved å bruke "Float-Right" og "Float-Left" -klassene

I bootstrap 4, "Float-Left”Og“flyte-høyre”Klasser brukes til å justere elementene til venstre og høyre. For å utnytte dem, vil vi først:

• Legg til et "" element og tilordne det "BG-advarsel”Og“ClearFix”Klasser.
• Inne i dette, legg til to "" "elementer som inneholder tekst.
• Spesifiser “Float-Left”Klasse til den første beholderen som flyter teksten til venstre.
• Tilordne “flyte-høyre”Til“ ”som vil flyte teksten til høyre.

Her er HTML -koden:

Score
500

Produksjon

Metode 3: Venstre og høyre juster tekst ved hjelp av "Justify-Content-Between" -klassen

I bootstrap 4, "Justify-Content-mellom”Klasse distribuerer like mellomrom mellom de fleksible elementene.

Eksemplet nedenfor viser en "" klasse som har "BG-Info”,“d-flex”, Og“Justify-Content-mellom”Klasser:

Totalkostnad
$ 50

Produksjon

Ved hjelp av disse bootstrap-klassene er teksten i "" -beholderen høyre og venstrejustert.

Bonus tips
Hvis du vil justere alle fleksible gjenstander til venstre, bruk bootstrap "Justify-Content-Start”Klasse, og hvis de fleksible varene må justeres riktig, bruk“Justify-Content-End”Klasse.

Konklusjon

Til høyre og venstre justere tekst i et "" element, blir flere klasser brukt. I bootstrap 3, "Pull-venstre”Og“trekk-høyre”Klasser brukes. I bootstrap 4, "Float-Left”Og“flyte-høyre”Klasser kan brukes. De fleksible elementene er justert ved å bruke “Justify-Content-mellom”Klasse. Dette innlegget har forklart hvordan du angir venstre og høyre innretting av tekst i en "" beholder i Bootstrap.