Hvordan du plasserer to bootstrap -kort ved siden av hverandre

Kortene er en av de vanlige komponentene i enhver applikasjon. De gir designmønstre for å kompilere relaterte data. Mer spesifikt tilbyr Bootstrap forskjellige klasser for å lage og justere kort, for eksempel "Korttekst”,“Korthode”,“Kortfoter”,“Kort-img-top", og mange flere. “Korttekst”Brukes til å spesifisere litt tekst på kortet, og“Kort-img-top”Justerer bildet på toppen av kortet.

For å justere plasseringen av varene ved hjelp av bootstrap, "rad”Og“col”Klasser kan vurderes. "Raden" i Bootstrap inneholder 12 virtuelle kolonner, og "COL" bestemmer hvor mange av de 12 mulige kolonnene du vil bruke for hvert element.

Dette innlegget vil lære om å justere to bootstrap -kort på en webside side om side.

Hvordan du plasserer to bootstrap -kort ved siden av hverandre?

Følg trinnene som er angitt nedenfor for å legge to bootstrap -kort side om side.

Trinn 1: Lag "container" -oppsett

En bootstrap “container”Er en grunnleggende komponent som inneholder polstring og justering for innholdet i en bestemt enhet.

I HTML -filen, først, legg til en "”Element og tilordne det en klasse”container”:

Trinn 2: Lag en "rad"

“rad”Klasse brukes til å inneholde kolonner. Hver rad er delt inn i et rutenett med 12 virtuelle kolonner.

Innenfor beholderen, plasser en div med klassen “rad" følgende:

Trinn 3: Angi to kolonner for to kort

Innen "”Element som har klasse“rad”, Spesifiser to kolonner for to kort.

For å lage et kort, følg de gitte instruksjonene:

• Sett en “”Tag med klassen”col-6”. Denne klassen justerer en kolonne ved å angi antall kolonner for at elementet skal spenner.
• Inne i elementet, legg til en annen “”Element med klassen“kort”. Det er en utvidbar og fleksibel beholder som tilbyr en rekke innhold som overskrifter, bunntekst, bakgrunnsfarge og mange flere.
• Bredden justeres ved å bruke breddeegenskapen.
• Inkluderer "”Tag med klassen”Kort-img-top”, Som brukes til å sette et bilde til kortets topp. “src”Attributt spesifiserer bildebanen.
• For å legge til innholdet på kortet, implementer "Kortkropp”Klasse, som inneholder“

  ”,“

  ”, Og“”Tagger.

• “

  ”Justerer korttittelen ved å bruke“Korttittel”Klasse.

• “

  ”Element er tildelt med“Korttekst”Klasse for å angi avsnittet på kortet.

• Deretter, for å stille en knapp, bruk "btn”,“BTN-UTLINE-PRIMARI”, Og“Btn-SM”Klasser for å lage en knapp med en oversikt:

Linuxhint -artikler

Vi skriver artikler for å utdanne verden!

Besøk lenke

Lag det andre kortet på en lignende måte som det første kortet opprettes. Dette kortet må justeres i neste kolonne for å plassere det andre kortet ved siden av det første. For dette formålet, lage en egen “”Container sammen med“col-6”Klasse:

Linuxhint -videoer

Se selvfølgelig videoopplæringer!

Besøk lenke

Her er utdataene generert ved å implementere koden ovenfor:

Her er den komplette koden:

Linuxhint -artikler

Vi skriver artikler for å utdanne verden!

Besøk lenke

Linuxhint -videoer

Se selvfølgelig videoopplæringer!

Besøk lenke

Vi har demonstrert prosedyren for å plassere de to bootstrap -kortene ved siden av hverandre.

Konklusjon

For å plassere to kort ved siden av hverandre, først, lage en "”Element sammen med“rad”Klasse. Tildel deretter to til "”Elementer og tilordne dem en kolonneklasse”col-6”. Dette vil tilordne seks kolonner til hvert kort. For å lage et kort i Bootstrap, “kort”Klasse brukes. Denne studien har forklart prosedyren for å justere to bootstrap -kort side om side.