Kort

Bootstraps kort gir en fleksibel og utvidbar innholdsbeholder med flere varianter og alternativer.

Om

Et kort er en fleksibel og utvidbar innholdsbeholder. Den inkluderer alternativer for topp- og bunntekst, et bredt utvalg av innhold, kontekstuelle bakgrunnsfarger og kraftige visningsalternativer. Hvis du er kjent med Bootstrap 3, erstatter kort våre gamle paneler, brønner og miniatyrbilder. Tilsvarende funksjonalitet som disse komponentene er tilgjengelig som modifikasjonsklasser for kort.

Eksempel

Kort er bygget med så lite markup og stiler som mulig, men klarer likevel å levere massevis av kontroll og tilpasning. Bygget med flexbox, tilbyr de enkel justering og blandes godt med andre Bootstrap-komponenter. De har ingen marginsom standard, så bruk avstandsverktøy etter behov.

Nedenfor er et eksempel på et basiskort med blandet innhold og fast bredde. Kortene har ingen fast bredde for å starte, så de vil naturligvis fylle hele bredden av det overordnede elementet. Dette kan enkelt tilpasses med våre forskjellige størrelsesalternativer .

Korttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Gå et sted

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Innholdstyper

Kort støtter et bredt spekter av innhold, inkludert bilder, tekst, listegrupper, lenker og mer. Nedenfor er eksempler på hva som støttes.

Kropp

Byggesteinen til et kort er .card-body. Bruk den når du trenger en polstret seksjon i et kort.

Dette er litt tekst i en korttekst.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titler, tekst og lenker

Korttitler brukes ved å legge .card-titletil en <h*>tag. På samme måte legges lenker til og plasseres ved siden av hverandre ved å legge .card-linktil en <a>tag.

Undertekster brukes ved å legge til en .card-subtitlei en <h*>tag. Hvis elementene .card-titleog .card-subtitleer plassert i et .card-bodyelement, er kortets tittel og undertittel pent på linje.

Korttittel

Kort undertekst

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Kortlenke En annen lenke

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Bilder

.card-img-topplasserer et bilde øverst på kortet. Med .card-textkan tekst legges til kortet. Tekst innenfor .card-textkan også styles med standard HTML-tagger.

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

List grupper

Lag lister over innhold på et kort med en flush-listegruppe.

Cras justo odio
Dapibus ac facilisis i
Vestibulum ved eros

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Utvalgte

Cras justo odio
Dapibus ac facilisis i
Vestibulum ved eros

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Kjøkkenvask

Miks og match flere innholdstyper for å lage kortet du trenger, eller kast alt deri. Nedenfor vises bildestiler, blokker, tekststiler og en listegruppe – alt pakket inn i et kort med fast bredde.

Korttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Cras justo odio
Dapibus ac facilisis i
Vestibulum ved eros

Kortlenke En annen lenke

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Topptekst og bunntekst

Legg til en valgfri topp- og/eller bunntekst på et kort.

Utvalgte

Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Kortoverskrifter kan styles ved å legge .card-headertil <h*>elementer.

Utvalgte

Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Sitat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.

Noen kjent i kildetittelen

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Utvalgte

Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted

2 dager siden

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Dimensjonering

Kortene forutsetter ingen spesifikk widthstart, så de vil være 100 % brede med mindre annet er oppgitt. Du kan endre dette etter behov med tilpasset CSS, grid-klasser, grid Sass-mikser eller verktøy.

Bruker rutenettmarkering

Bruk rutenettet, pakk kortene inn i kolonner og rader etter behov.

Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted

Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Bruke verktøy

Bruk vår håndfull tilgjengelige størrelsesverktøy for raskt å angi bredden til et kort.

Korttittel

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Knapp

Korttittel

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Knapp

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Bruker tilpasset CSS

Bruk tilpasset CSS i stilarkene dine eller som innebygde stiler for å angi en bredde.

Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Tekstjustering

Du kan raskt endre tekstjusteringen til ethvert kort – i sin helhet eller spesifikke deler – med våre tekstjusteringsklasser .

Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted

Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted

Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Legg til litt navigering til et korts overskrift (eller blokk) med Bootstraps nav-komponenter .

Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Bilder

Kort inneholder noen få alternativer for å jobbe med bilder. Velg mellom å legge til "bildekapsler" i hver ende av et kort, overlegge bilder med kortinnhold, eller bare legge inn bildet i et kort.

Bildekapsler

I likhet med topptekster og bunntekster kan kort inneholde topp og bunn "bildekapsler" - bilder øverst eller nederst på et kort.

Korttittel

Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Sist oppdatert for 3 minutter siden

Korttittel

Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Sist oppdatert for 3 minutter siden

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-top" alt="...">
</div>

Bildeoverlegg

Gjør et bilde til en kortbakgrunn og overlegg kortets tekst. Avhengig av bildet kan det hende du trenger flere stiler eller verktøy.

Korttittel

Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Sist oppdatert for 3 minutter siden

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Merk at innholdet ikke skal være større enn høyden på bildet. Hvis innholdet er større enn bildet, vil innholdet vises utenfor bildet.

Horisontal

Ved å bruke en kombinasjon av rutenett og bruksklasser kan kort gjøres horisontale på en mobilvennlig og responsiv måte. I eksemplet under fjerner vi grid-rennene med .no-guttersog bruker .col-md-*klasser for å gjøre kortet horisontalt ved mdbruddpunktet. Ytterligere justeringer kan være nødvendig avhengig av innholdet på kortet ditt.

Korttittel

Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Sist oppdatert for 3 minutter siden

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Kortstiler

Kortene inneholder ulike alternativer for å tilpasse bakgrunn, kantlinjer og farge.

Bakgrunn og farge

Bruk tekst- og bakgrunnsverktøy for å endre utseendet til et kort.

Overskrift

Primærkorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift

Sekundærkorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift

Tittel på suksesskortet

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift

Tittel på farekort

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift

Advarselskorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift

Infokorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift

Lyskorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift

Mørk korttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Formidle mening til hjelpeteknologier

Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .sr-onlyklassen.

Grense

Bruk grenseverktøy for å endre bare på border-coloret kort. Merk at du kan legge .text-{color}klasser på forelderen .cardeller en undergruppe av kortets innhold som vist nedenfor.

Overskrift

Primærkorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift

Sekundærkorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift

Tittel på suksesskortet

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift

Tittel på farekort

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift

Advarselskorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift

Infokorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift

Lyskorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift

Mørk korttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins-verktøy

Du kan også endre grensene på kortets topp- og bunntekst etter behov, og til og med fjerne dem background-colormed .bg-transparent.

Overskrift

Tittel på suksesskortet

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Bunntekst

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Kortoppsett

I tillegg til å style innholdet på kort, inkluderer Bootstrap noen få alternativer for å legge ut serier med kort. Foreløpig er disse layoutalternativene ennå ikke responsive .

Kortgrupper

Bruk kortgrupper til å gjengi kort som et enkelt, festet element med samme bredde og høyde kolonner. Kortgrupper bruker display: flex;for å oppnå sin ensartede størrelse.

Korttittel

Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Sist oppdatert for 3 minutter siden

Korttittel

Dette kortet har støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Sist oppdatert for 3 minutter siden

Korttittel

Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette kortet har enda lengre innhold enn det første som viser den samme høyden.

Sist oppdatert for 3 minutter siden

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Når du bruker kortgrupper med bunntekst, vil innholdet deres automatisk stilles opp.

Korttittel

Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Sist oppdatert for 3 minutter siden

Korttittel

Dette kortet har støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Sist oppdatert for 3 minutter siden

Korttittel

Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette kortet har enda lengre innhold enn det første som viser den samme høyden.

Sist oppdatert for 3 minutter siden

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Kortstokker

Trenger du et sett med like bredde- og høydekort som ikke er festet til hverandre? Bruk kortstokker.

Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Sist oppdatert for 3 minutter siden

Korttittel

Dette kortet har støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Sist oppdatert for 3 minutter siden

Korttittel

Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette kortet har enda lengre innhold enn det første som viser den samme høyden.

Sist oppdatert for 3 minutter siden

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Akkurat som med kortgrupper, vil kortbunntekster i kortstokker automatisk stå på linje.

Korttittel

Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Sist oppdatert for 3 minutter siden

Korttittel

Dette kortet har støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Sist oppdatert for 3 minutter siden

Korttittel

Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette kortet har enda lengre innhold enn det første som viser den samme høyden.

Sist oppdatert for 3 minutter siden

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Rutenettkort

Bruk Bootstrap-rutenettsystemet og dets .row-colsklasser for å kontrollere hvor mange rutenettkolonner (viklet rundt kortene dine) du viser per rad. For eksempel, her .row-cols-1legger du ut kortene på én kolonne, og .row-cols-md-2deler fire kort til lik bredde over flere rader, fra middels brytepunkt og opp.

Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Endre den til .row-cols-3og du vil se det fjerde kortet.

Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Når du trenger lik høyde, legg .h-100til kortene. Hvis du vil ha like høyder som standard, kan du stille $card-height: 100%inn i Sass.

Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Korttittel

Dette er et kort kort.

Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Kortkolonner

Kort kan organiseres i Masonry -lignende kolonner med bare CSS ved å pakke dem inn .card-columns. Kort er bygget med CSS column-egenskaper i stedet for flexbox for enklere justering. Kortene er sortert fra topp til bunn og venstre til høyre.

Vær oppmerksom! Kilometerstanden din med kortkolonner kan variere. For å forhindre at kort brytes på tvers av kolonner, må vi angi at de ikke display: inline-blocker column-break-inside: avoiden skuddsikker løsning ennå.

Korttittel som omsluttes til en ny linje

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.

Noen kjent i kildetittelen

Korttittel

Dette kortet har støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Sist oppdatert for 3 minutter siden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat.

Noen kjent i kildetittelen

Korttittel

Dette kortet har en vanlig tittel og et kort avsnitt med tekst under.

Sist oppdatert for 3 minutter siden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.

Noen kjent i kildetittelen

Korttittel

Dette er nok et kort med tittel og støttetekst nedenfor. Dette kortet har noe ekstra innhold for å gjøre det litt høyere totalt sett.

Sist oppdatert for 3 minutter siden

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Kortkolonner kan også utvides og tilpasses med litt tilleggskode. Nedenfor vises en utvidelse av .card-columnsklassen som bruker den samme CSS-en vi bruker – CSS-kolonner – for å generere et sett med responsive nivåer for å endre antall kolonner.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

Kort

Om

Eksempel

Korttittel

Innholdstyper

Kropp

Titler, tekst og lenker

Korttittel

Kort undertekst

Bilder

List grupper

Kjøkkenvask

Korttittel

Topptekst og bunntekst

Spesiell tittelbehandling

Utvalgte

Spesiell tittelbehandling

Spesiell tittelbehandling

Dimensjonering

Bruker rutenettmarkering

Spesiell tittelbehandling

Spesiell tittelbehandling

Bruke verktøy

Korttittel

Korttittel

Bruker tilpasset CSS

Spesiell tittelbehandling

Tekstjustering

Spesiell tittelbehandling

Spesiell tittelbehandling

Spesiell tittelbehandling

Navigasjon

Spesiell tittelbehandling

Spesiell tittelbehandling

Bilder

Bildekapsler

Korttittel

Korttittel

Bildeoverlegg

Korttittel

Horisontal

Korttittel

Kortstiler

Bakgrunn og farge

Primærkorttittel

Sekundærkorttittel

Tittel på suksesskortet

Tittel på farekort

Advarselskorttittel

Infokorttittel

Lyskorttittel

Mørk korttittel

Formidle mening til hjelpeteknologier

Grense

Primærkorttittel

Sekundærkorttittel

Tittel på suksesskortet

Tittel på farekort

Advarselskorttittel

Infokorttittel

Lyskorttittel

Mørk korttittel

Mixins-verktøy

Tittel på suksesskortet

Kortoppsett

Kortgrupper

Korttittel

Korttittel

Korttittel

Korttittel

Korttittel

Korttittel

Kortstokker

Korttittel

Korttittel

Korttittel

Korttittel

Korttittel

Korttittel

Rutenettkort