Saltar al contenido principal Salta a docs navegación
Check
in English

Tarjetas

Bootstrap kaqpa tarjetakuna huk flexible chaymanta mast'arikuq contenido waqaychanata qun achka variantes kaqwan chaymanta akllanakunawan.

Kay p'anqapi

Sobre

Tarjeta nisqaqa huk flexible hinaspa extensible contenido nisqa waqaychanam. Umapaq chaymanta chakipaq akllanakunayuq, achka imaymana ruwanakuna, contextual qhipa llimp'ikuna chaymanta kallpasapa qhaway akllanakunayuq. Sichus Bootstrap 3 kaqwan riqsisqa kanki, tarjetakuna mawk'a panelesniykumanta, pukyuykumanta, chaymanta uchuy rikch'ayniykumanta tikranku. Chay componentekunaman rikchakuq ruwayqa tarjetakunapaq clasekuna modificador hinam kachkan.

Qatina

Tarjetakuna ruwasqa kanku aswan pisi marcawan chaymanta estilokunawan atikuq hina, ichaqa chaywanpas huk tonelada control chaymanta personalización quyta atinku. Flexbox kaqwan ruwasqa, paykunaqa mana sasa alineacionta qunku chaymanta wak Bootstrap componentes kaqwan allinta chaqrukunku. Paykunaqa mana marginñawpaqmanta churasqachu kanku, chayrayku espaciamiento utilidadkunata necesitasqanmanhina llamk'achiy.

Uraypi huk tarjeta básica kaqmanta huk ejemplo kachkan, chaqrusqa contenidoyuq chaymanta huk takyasqa anchoyuq. Tarjetakuna mana takyasqa anchoyuqchu kanku qallariypaq, chayrayku naturalmente hunt'achinqanku hunt'a anchunta tayta elementonmanta. Kayqa imaymana sayay akllanaykuwan mana sasachu ruwasqa kachkan .

Placeholder Image cap
Titulo de tarjeta

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Maymanpas riy
html nisqapi 
<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>

Tipos de contenido

Tarjetakuna achka imaymana ruwanakunata yanapan, siq'ikuna, qillqa, lista qutukuna, t'inkikuna chaymanta aswan. Uraypi imakuna yanapasqa kasqanmanta ejemplokuna kachkan.

Kurku

Tarjetapa wasichay bloquenmi .card-body. Chayta llamk’achiy mayk’aqllapis tarjeta ukhupi acolchado t’aqata necesitanki.

Kayqa huk tarjetapa cuerponpa ukunpi wakin qillqasqam.
html nisqapi 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titulokuna, qillqasqakuna, t’inkikuna ima

Tarjetapa titulonkunataqa .card-titlehuk <h*>etiquetaman yapaspam servichikunku. .card-linkChay hinallataqmi, t'inkikuna yapasqa, huk <a>etiquetaman yapaspa hukninpa ladunpi churasqa .

Subtítulos nisqakunataqa .card-subtitlehuk <h*>etiquetaman yapaspam llamk'achinku. Sichus chay .card-titlechaymanta .card-subtitleimakuna huk imapi churasqa kanku chayqa .card-body, tarjetapa titulonpas subtítulonpas sumaqllatam tupachisqa kachkan.

Titulo de tarjeta
Subtítulo de tarjeta

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Tarjeta link Huk t'inki
html nisqapi 
<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>

Imaykuna

.card-img-toptarjetapa hawanman huk rikchayta churan. , nisqawanqa .card-texttarjetamanmi qillqasqata yapayta atikunman. Ukhupi .card-textqillqasqapas HTML etiquetakuna estándar kaqwan estilochasqa kanman.

Placeholder Image cap

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

html nisqapi 
<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>

Huñukunata qillqay

Huk tarjetapi listakuna listakuna ruway huk flush lista huñuwan.

  • Huk imapas
  • Iskay kaq imapas
  • Kimsa kaq item
html nisqapi 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Riqsisqa
  • Huk imapas
  • Iskay kaq imapas
  • Kimsa kaq item
html nisqapi 
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Huk imapas
  • Iskay kaq imapas
  • Kimsa kaq item
Tarjeta de pie
html nisqapi 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Lavabo de cocina

Chaqruy chaymanta tupachiy achka contenido layakuna tarjetata ruwanapaq necesitasqaykita, utaq tukuy imata chaypi wikch'uy. Uraypi rikuchisqa siq'i estilokuna, bloquekuna, qillqa estilokuna chaymanta huk lista huñu —llapan huk takyasqa ancho tarjetawan p'istuykusqa.

Placeholder Image cap
Titulo de tarjeta

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

  • Huk imapas
  • Iskay kaq imapas
  • Kimsa kaq item
Tarjeta link Huk t'inki
html nisqapi 
<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">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Huk tarjeta ukhupi huk akllana umalliq chaymanta/utaq chaki yapay.

Riqsisqa
Tratamiento especial de títulos nisqa

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Maymanpas riy
html nisqapi 
<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>

Tarjeta umalliqkunataqa elementokunaman yapaspa estiloyuqmi kanman .card-header.<h*>

Riqsisqa
Tratamiento especial de títulos nisqa

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Maymanpas riy
html nisqapi 
<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>
Cita

Allin riqsisqa cita, huk elemento blockquote nisqapi tarikuq.

Pipas riqsisqa Fuente Titulo nisqapi
html nisqapi 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Riqsisqa
Tratamiento especial de títulos nisqa

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Maymanpas riy
2 punchaw ñawpaqta
html nisqapi 
<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>

Tamaño

Tarjetakuna mana específico widthqallariypaq suyanku, chayrayku 100% ancho kanqa mana wakhina nisqa kaqtin. Kayta tikrayta atikunki munasqamanhina sapanchasqa CSS kaqwan, llika clasekunawan, llika Sass mixins kaqwan utaq yanapakuykunawan.

Rejilla marcado nisqawan

Rejilla nisqawanmi tarjetakunata necesitasqanman hina columnakunapi, filakunapi ima p’istuy.

Tratamiento especial de títulos nisqa

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Maymanpas riy
Tratamiento especial de títulos nisqa

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Maymanpas riy
html nisqapi 
<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>

Utilidades nisqawan yanapachikuspa

Huk tarjeta anchonta usqhaylla churanapaq makilla tarikuq sayay yanapakuyniykuwan llamk'achiy.

Titulo de tarjeta

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Ñitina
Titulo de tarjeta

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Ñitina
html nisqapi 
<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>

Sapanchasqa CSS nisqawan

Sapanchasqa CSS llamk'achiy estilo raphiykikunapi utaq chiru ukhupi estilokuna hina anchota churanaykipaq.

Tratamiento especial de títulos nisqa

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Maymanpas riy
html nisqapi 
<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>

Qillqasqa chiqanchay

Mayqin tarjetapa qillqa chiqanchayta usqhaylla tikrayta atikunki —tukuyninpi utaq wakin rakikunapi— qillqa chiqanchay claseykuwan .

Tratamiento especial de títulos nisqa

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Maymanpas riy
Tratamiento especial de títulos nisqa

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Maymanpas riy
Tratamiento especial de títulos nisqa

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Maymanpas riy
html nisqapi 
<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-end" 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>

Wakin puriyta huk tarjeta umalliqman (utaq hark'aman) yapay Bootstrappa nav componentesninwan .

Tratamiento especial de títulos nisqa

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Maymanpas riy
html nisqapi 
<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" aria-current="true" 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">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>
Tratamiento especial de títulos nisqa

Uraypi yanapaq qillqawan huk natural pusaq hina huk contenido yapasqaman.

Maymanpas riy
html nisqapi 
<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">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>

Imaykuna

Tarjetakunapiqa huk iskay kimsa akllanakuna kachkan siq’ikunawan llamk’anapaq. Akllay huk tarjetapa huknin puntanpi “imagen tapakuna” yapaymanta, tarjetapa contenidowan dibujokunata tapay utaq tarjetapi imagenta churaylla.

Imagen tapakuna

Umachakuna, chaki qillqakuna hina, tarjetakunapiqa kanmanmi hawanpi urayninpi “imagenkuna tapakuna”, tarjetapa hawanpi utaq urayninpi kaq dibujokuna.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.

Qhipa kutita 3 mins ñawpaqta musuqchasqa

Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.

Qhipa kutita 3 mins ñawpaqta musuqchasqa

Placeholder Image cap
html nisqapi 
<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-bottom" alt="...">
</div>

Imahina llanthukuna

Huk rikchayta tarjetapa qipanman tikray hinaspa tarjetaykipa qillqanta llanthuy. Siqimanhina, huk estilokunata utaq yanapakuykunata necesitanki utaq mana necesitanki.

Placeholder Card image
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.

Qhipa kutita 3 mins ñawpaqta musuqchasqa

html nisqapi 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
Reparay, contenidoqa manam aswan hatunchu kanan siq'ipa sayayninmanta. Sichus contenido aswan hatun kanman siq'imanta chay contenido rikuchikunqa hawa siq'imanta.

Kinranpa

Huk huñusqa rejilla chaymanta utilidad clasekuna llamk'achispa, tarjetakuna horizontal ruwayta atikunku huk movil-amigable chaymanta kutichiq ñanpi. Uraypi ejemplopi, canales de rejilla nisqakunata hurquyku .g-0chaymanta .col-md-*clasekunawan tarjetata horizontalta ruwanapaq chay punto de mdruptura nisqapi. Tarjetaykipi imakuna kasqanmantam astawan allichakunayki kanqa.

Placeholder Image
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.

Qhipa kutita 3 mins ñawpaqta musuqchasqa

html nisqapi 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" 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>

Estilos de tarjetas

Tarjetakunapiqa imaymana akllanakunam kachkan, chaynapi ñawpaqninpi, bordesninkuta hinaspa colorninkuta ruwanankupaq.

Fondo y color

v5.2.0 nisqapi yapasqa

Yanapakuqniykuwan huk background-colorcontrastante ñawpaqcolor planowan churay . Ñawpaqqa makiwan tupachiy akllasqaykimanta chaymanta utilidadkuna estilopaq, mayqinkunatachus kunankamapas llamk'achiy atikunki sichus munanki..text-bg-{color}.text-{color}.bg-{color}

Uma
Titulo de tarjeta primaria

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma
Titulo de tarjeta secundaria

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma
Titulo de tarjeta de éxito

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma
Titulo de tarjeta de peligro

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma
Titulo de tarjeta de advertencia

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma
Titulo de tarjeta de info

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma
Titulo de tarjeta de luz

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma
Titulo de tarjeta oscura

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

html nisqapi 
<div class="card text-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-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-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-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-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-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 text-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-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>
Yanapakuq tecnologiakunaman significadota apachiy

Color llamk'achiyta significado yapanapaq huk rikuy rikuchiyllata qun, mayqinchus mana yanapakuq tecnologiakuna llamk'aqkunaman chayachikunqachu – pantalla ñawiriqkuna hina. Aseguray willayta llimp'iwan riqsichisqa kikin contenidomanta sut'i kaqta (kayhina rikukuq qillqa), utaq huk ñankunawan churasqa kaqta, kayhina yapasqa qillqa .visually-hiddenclasewan pakasqa.

Pata

Utilizar utilidades de frontera para cambiar solo el border-colorde una tarjeta. Reparay .text-{color}clasekunata tayta mamapi .cardutaq huk subconjunto tarjetapa contenidomanta churayta atikunki kay urapi rikusqa hina.

Uma
Titulo de tarjeta primaria

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma
Titulo de tarjeta secundaria

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma
Titulo de tarjeta de éxito

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma
Titulo de tarjeta de peligro

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma
Titulo de tarjeta de advertencia

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma
Titulo de tarjeta de info

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma
Titulo de tarjeta de luz

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma
Titulo de tarjeta oscura

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

html nisqapi 
<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">
    <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">
    <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 servicios públicos

Chaymantapas tarjetapa umanpi hinaspa chakinpi kaq fronterakunatam cambiawaq necesitasqaykiman hina, chaymantapas chaywanpas hurquwaqmi background-color..bg-transparent

Uma
Titulo de tarjeta de éxito

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Chaki
html nisqapi 
<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>

Diseño de tarjetas

Tarjetakuna ukhupi contenido estilomanta aswan, Bootstrap huk pisi akllanakuna serie tarjetakuna churanapaq churan. Kunankamaqa, kay churana akllanakuna manaraq kutichinchu .

Tarjeta qutukuna

Tarjeta huñukunata llamk'achiy tarjetakunata huklla, k'askasqa elemento hina kaqlla anchoyuq, sayayniyuq columnakuna hina ruwanapaq. Tarjeta qutukuna pilasqamanta qallarinku chanta llamk’achinku display: flex;k’askasqa kanankupaq dimensiones uniformes kaqwan qallarispa chay punto de smruptura kaqmanta.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.

Qhipa kutita 3 mins ñawpaqta musuqchasqa

Placeholder Image cap
Titulo de tarjeta

Kay tarjetaqa uraypi yanapaq qillqayuqmi huk natural pusaq hina huk contenido yapasqaman.

Qhipa kutita 3 mins ñawpaqta musuqchasqa

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay tarjetaqa aswan unay contenidoyuqraqmi ñawpaq kaqmanta chay kaqlla sayay ruwayta qawachinanpaq.

Qhipa kutita 3 mins ñawpaqta musuqchasqa

html nisqapi 
<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>

Chakiyuq tarjeta qutukunata llamk'achkaspa, contenidonku kikinmanta filasqa kanqa.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.

Qhipa kutita 3 mins ñawpaqta musuqchasqa
Placeholder Image cap
Titulo de tarjeta

Kay tarjetaqa uraypi yanapaq qillqayuqmi huk natural pusaq hina huk contenido yapasqaman.

Qhipa kutita 3 mins ñawpaqta musuqchasqa
Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay tarjetaqa aswan unay contenidoyuqraqmi ñawpaq kaqmanta chay kaqlla sayay ruwayta qawachinanpaq.

Qhipa kutita 3 mins ñawpaqta musuqchasqa
html nisqapi 
<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>

Tarjetas de rejilla

Bootstrap rejilla sistemata chaymanta .row-colsclasenkunata llamk'achiy hayk'a rejilla columnakuna (tarjetakunayki muyuriqpi p'istuykusqa) sapa filapi rikuchisqaykita kamachinaykipaq. Ejemplopaq, kaypi .row-cols-1huk columnapi tarjetakunata churay, hinaspa .row-cols-md-2tawa tarjetakunata rakispa kaqlla anchoman achka filakunapi, chawpi rakiymanta wichayman.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.

html nisqapi 
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

Chayman tikray chaymanta .row-cols-3tawa kaq tarjeta p’istuta rikunki.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.

html nisqapi 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

Igual sayayniyuq kachkaspaykiqa, .h-100tarjetakunaman yapay. Sichus ñawpaqmanta kaqlla sayaykunata munanki $card-height: 100%, Sass nisqapi churayta atinki.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk pisi tarjeta.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusay hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.

html nisqapi 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

Imaynan tarjeta huñukunawanpas, tarjetapa chakinkuna kikinmanta filasqa kanqa.

Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay contenidoqa aswan unaymi.

Qhipa kutita 3 mins ñawpaqta musuqchasqa
Placeholder Image cap
Titulo de tarjeta

Kay tarjetaqa uraypi yanapaq qillqayuqmi huk natural pusaq hina huk contenido yapasqaman.

Qhipa kutita 3 mins ñawpaqta musuqchasqa
Placeholder Image cap
Titulo de tarjeta

Kayqa huk aswan hatun tarjeta yanapaq qillqawan uraypi huk natural pusaq hina yapasqa contenidoman. Kay tarjetaqa aswan unay contenidoyuqraqmi ñawpaq kaqmanta chay kaqlla sayay ruwayta qawachinanpaq.

Qhipa kutita 3 mins ñawpaqta musuqchasqa
html nisqapi 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
</div>

Albañilería

In huk CSS-lla técnica llamk'achirqayku Masoneríav4 -hina columnakunap ruwayninta qatipanaykupaq , ichaqa kay técnica achka mana allin efectos secundarios kaqwan hamurqan . Sichus munanki kay laya churayta kaypi , qamlla ruwayta atinki Masonry plugin kaqwan. Albañilería mana Bootstrap kaqpichu kachkan , ichaqa huk demo ejemplota ruwarqayku qallariypaq yanapasunaykipaq.v5

CSS nisqa

Variables nisqakuna

v5.2.0 nisqapi yapasqa

Bootstrap kaqpa wiñaq CSS tikraqkuna asuykuyninmanta huknin hina, tarjetakuna kunan llaqta CSS tikraqkunata llamk'achinku .cardallinchasqa chiqa pacha ruwanapaq. CSS tikraqkunapaq chanikuna Sass kaqnintakama churasqa, chayrayku Sass ruwanakuna yanapasqaraq kachkan, chaymanta.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass variables nisqakuna

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;