Ejupi contenido principal-pe Eike docs jeguatahápe
in English

Tarjeta-kuéra rehegua

Umi tarjeta Bootstrap rehegua omeꞌe peteĩ mbaꞌeryru contenido rehegua iflexible ha oñembotuicháva heta variante ha opción reheve.

Ko páhinape

Upéva rehegua

Peteĩ tarjeta haꞌehína peteĩ mbaꞌeryru contenido rehegua iflexible ha oñembotuicháva. Oike ipype opción iñakãrapuꞌa ha ipypegua, hetaiterei mbaꞌekuaarã, tapykuehoha saꞌi contextual ha opción jehechaukarã ipuꞌakapáva. Oiméramo reikuaa porã Bootstrap 3, umi tarjeta omyengovia ore panel, ykua ha ta’ãngamýi tuja. Funcionalidad ojoguáva umi componente-pe ojeguereko clase modificador ramo umi tarjeta-pe g̃uarã.

Tembiecharã

Umi tarjeta oñemopu’ã sa’ive marcado ha estilo ikatúva reheve, ha katu ohupyty gueteri ome’ẽ haĝua peteĩ tonelada control ha personalización. Oñemopu’ãva flexbox ndive, oikuave’ẽ hikuái alineación ndahasýiva ha oñembojehe’a porã ambue componente Bootstrap ndive. Ndorekói hikuái marginpor defecto, upévare eipuru umi utilidad espaciado rehegua oñeikotevẽháicha.

Aguĩve oĩ peteĩ techapyrã peteĩ tarjeta básica orekóva contenido mixto ha peteĩ ancho fijo. Umi tarjeta ndorekói ancho fijo oñepyrũ hag̃ua, upévare omyenyhẽta naturalmente pe ancho completo ielemento túva rehegua. Kóva ojejapo fácilmente ore opción opáichagua tamaño reheve .

Placeholder Image cap
Tarjeta título rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Tereho peteĩ hendápe 
<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>

Umi mba’ekuaarã ñemohenda

Umi tarjeta oipytyvõ heta mbaꞌekuaarã, umíva apytépe taꞌãngamýi, jehaipyre, lista aty, enlace ha hetave mbaꞌe. Aguĩve oĩ techapyrã mba’épa oipytyvõ.

Tete

Pe bloque de construcción peteĩ tarjeta rehegua ha’e pe .card-body. Eipuru reikotevẽ jave peteĩ sección acolchada peteĩ tarjeta ryepýpe.

Kóva haꞌehína peteĩ jehaipyre peteĩ tarjeta retepy ryepýpe. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Título, jehaipyre ha enlace-kuéra

Umi título de tarjeta ojepuru oñembojoapývo .card-titlepeteĩ <h*>etiqueta-pe. Upéicha avei, oñembojoapy ha oñemoĩ ojoykére umi joajuha oñembojoapývo .card-linkpeteĩ <a>etiqueta-pe.

Umi subtítulo ojepuru oñembojoapývo peteĩ .card-subtitlepeteĩ <h*>etiqueta-pe. Pe .card-titleha umi .card-subtitlemba’e oñemoĩramo peteĩ .card-bodymba’épe, pe tarjeta título ha subtítulo oñemohenda porã.

Tarjeta título rehegua
Tarjeta subtítulo rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Enlace tarjeta rehegua Ambue enlace 
<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>

Ta’ãngamýi

.card-img-topomoĩ peteĩ taꞌãngamýi tarjeta yvate gotyo. , rupive .card-textikatu oñembojoapy jehaipyre tarjeta-pe. Jehaipyre oĩva hyepýpe .card-textikatu avei oñemboheko umi etiqueta HTML jepivegua reheve.

Placeholder Image cap

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

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

Emoĩ lista umi aty rehegua

Ejapo lista contenido rehegua peteĩ tarjeta-pe peteĩ lista flush aty reheve.

  • Peteĩ mba’e
  • Peteĩ mba’e mokõiha
  • Mbohapyha mba’e
<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>
Ojekuaauka
  • Peteĩ mba’e
  • Peteĩ mba’e mokõiha
  • Mbohapyha mba’e
<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>
  • Peteĩ mba’e
  • Peteĩ mba’e mokõiha
  • Mbohapyha mba’e
Tarjeta py rehegua 
<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 rehegua

Embojehe’a ha embojoaju heta contenido tipo emoheñói hag̃ua tarjeta reikotevẽva, térã emombo opa mba’e upépe. Ojehechauka iguýpe taꞌãngamýi estilo, bloque, jehaipyre estilo ha peteĩ lista aty —opavave oñembojere peteĩ tarjeta ancho fijo-pe.

Placeholder Image cap
Tarjeta título rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

  • Peteĩ mba’e
  • Peteĩ mba’e mokõiha
  • Mbohapyha mba’e
Enlace tarjeta rehegua Ambue enlace 
<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>

Emoĩ peteĩ iñakãrapu’ã ha/térã ipypegua opcional peteĩ tarjeta ryepýpe.

Ojekuaauka
Tratamiento especial título rehegua

Orekóvo texto oipytyvõva iguýpe ha'éva peteî lead-in natural contenido adicional-pe.

Tereho peteĩ hendápe 
<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>

Umi tarjeta iñakãrapuꞌa ikatu oñembojegua oñembojoapývo .card-headerumi <h*>elemento rehe.

Ojekuaauka
Tratamiento especial título rehegua

Orekóvo texto oipytyvõva iguýpe ha'éva peteî lead-in natural contenido adicional-pe.

Tereho peteĩ hendápe 
<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>
Hysýi

Peteĩ cita ojekuaáva, oguerekóva peteĩ elemento blockquote-pe.

Alguien famoso en Título de Fuente 
<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>
Ojekuaauka
Tratamiento especial título rehegua

Orekóvo texto oipytyvõva iguýpe ha'éva peteî lead-in natural contenido adicional-pe.

Tereho peteĩ hendápe
Ojapóma 2 ára 
<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>

Dimensionamiento rehegua

Umi tarjeta oasumi ndaipóriha específico widthoñepyrũ haĝua, upévare ha’éta 100% ancho ndaha’éiramo oje’éva ambue mba’e. Ikatu emoambue kóva oñeikotevẽháicha CSS jeporupyre, mbo’esyry cuadrícula rehegua, mixin Sass rejilla rehegua térã tembipuru’ikuéra ndive.

Oipurúvo marcado cuadrícula rehegua

Eipuru cuadrícula, embojere umi tarjeta columna ha fila-pe tekotevẽháicha.

Tratamiento especial título rehegua

Orekóvo texto oipytyvõva iguýpe ha'éva peteî lead-in natural contenido adicional-pe.

Tereho peteĩ hendápe
Tratamiento especial título rehegua

Orekóvo texto oipytyvõva iguýpe ha'éva peteî lead-in natural contenido adicional-pe.

Tereho peteĩ hendápe 
<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>

Oipurúvo umi utilidad

Eipuru ore puñado umi utilidad tamaño rehegua ojeguerekóva emohenda pya’e hag̃ua peteĩ tarjeta ipekue.

Tarjeta título rehegua

Orekóvo texto oipytyvõva iguýpe ha'éva peteî lead-in natural contenido adicional-pe.

Votõ
Tarjeta título rehegua

Orekóvo texto oipytyvõva iguýpe ha'éva peteî lead-in natural contenido adicional-pe.

Votõ 
<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>

Oipurúvo CSS jeporupyre

Eipuru CSS jeporupyre nde kuatia’atýpe térã estilo línea ryepýpe ramo emohenda hag̃ua peteĩ ipekue.

Tratamiento especial título rehegua

Orekóvo texto oipytyvõva iguýpe ha'éva peteî lead-in natural contenido adicional-pe.

Tereho peteĩ hendápe 
<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>

Jehaipyre ñemohenda

Ikatu pya’e remoambue jehaipyre alineación oimeraẽ tarjeta rehegua —ipaite térã umi parte específica-pe— ore clase de texto alineación reheve .

Tratamiento especial título rehegua

Orekóvo texto oipytyvõva iguýpe ha'éva peteî lead-in natural contenido adicional-pe.

Tereho peteĩ hendápe
Tratamiento especial título rehegua

Orekóvo texto oipytyvõva iguýpe ha'éva peteî lead-in natural contenido adicional-pe.

Tereho peteĩ hendápe
Tratamiento especial título rehegua

Orekóvo texto oipytyvõva iguýpe ha'éva peteî lead-in natural contenido adicional-pe.

Tereho peteĩ hendápe 
<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>

Emoĩve peteĩ jeguata peteĩ tarjeta iñakãme (térã bloque) Bootstrap componente nav ndive .

Tratamiento especial título rehegua

Orekóvo texto oipytyvõva iguýpe ha'éva peteî lead-in natural contenido adicional-pe.

Tereho peteĩ hendápe 
<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 título rehegua

Orekóvo texto oipytyvõva iguýpe ha'éva peteî lead-in natural contenido adicional-pe.

Tereho peteĩ hendápe 
<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>

Ta’ãngamýi

Umi tarjeta oguereko mbovymi opción oñembaꞌapo hag̃ua taꞌãngamýi ndive. Eiporavo emoĩvo “ta’ãnga’i ryru” peteĩ tarjeta rembe’ýpe, emoĩ ta’ãngamýi tarjeta contenido reheve térã emoinge rei ta’ãngamýi peteĩ tarjeta-pe.

Ta’ãnga’i ryru

Ojogua umi iñakã ha ipypegua, umi tarjeta ikatu oguereko “ta’ãnga’i yvate ha iguypegua” —ta’ãnga oĩva peteĩ tarjeta yvate térã iguype.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta tuichavéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko contenido ipukuve’imi.

Oñemoambue ipahaitépe 3 mins ohasava'ekuépe

Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta tuichavéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko contenido ipukuve’imi.

Oñemoambue ipahaitépe 3 mins ohasava'ekuépe

Placeholder Image cap 
<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>

Ta’ãngamýi ñemoĩha

Embohasa peteĩ taꞌãngamýi peteĩ tarjeta fondo-pe ha emoĩ nde tarjeta jehaipyre. Ojesarekóva taꞌãngamýire, ikatu térã natekotevẽi reikotevẽ estilo térã utilidad ambuéva.

Placeholder Card image
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta tuichavéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko contenido ipukuve’imi.

Oñemoambue ipahaitépe 3 mins ohasava'ekuépe

<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>
Ñañamindu’u contenido ndaha’éi va’erãha tuichavéva ta’ãngamýi yvateguágui. Contenido tuichavéramo taꞌãngamýigui ojehechaukáta contenido taꞌãngamýi okaháre.

Ipekuévo

Oipurúvo peteĩ combinación clase cuadrícula ha utilidad rehegua, umi tarjeta ikatu ojejapo horizontal peteĩ manera móvil-pe g̃uarã ha ombohováiva. Pe techapyrá iguýpe, jaipe a umi canalización cuadrícula rehegua .g-0ha jaipuru .col-md-*clase jajapo hagua pe tarjeta horizontal punto de mdrupturape. Ikatu oñeikotevẽve kámbio odependévo umi mbaʼe oĩvare nde tarhétape.

Placeholder Image
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta tuichavéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko contenido ipukuve’imi.

Oñemoambue ipahaitépe 3 mins ohasava'ekuépe

<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 tarjeta rehegua

Umi tarjeta oguereko opaichagua opción ojepersonaliza hag̃ua ifondo, ifrontera ha ikolor.

Fondo ha color rehegua

Eipuru umi utilidad jehaipyre color ha fondo rehegua emoambue hag̃ua peteĩ tarjeta jehechauka.

Akãrapu’ã
Título de tarjeta primaria rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Akãrapu’ã
Título de tarjeta secundaria rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Akãrapu’ã
Título de tarjeta de éxito rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Akãrapu’ã
Título de tarjeta de peligro rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Akãrapu’ã
Título de tarjeta de advertencia rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Akãrapu’ã
Título tarjeta de info rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Akãrapu’ã
Título de tarjeta de luz rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Akãrapu’ã
Título de tarjeta oscura

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

<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-dark 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-dark 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-dark 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>
Ombohasávo he’iséva umi tecnología oipytyvõvape

Oipurúvo saꞌi omoĩ hag̃ua heꞌiséva omeꞌe peteĩ jehechaukarãnte, noñembohasamoꞌãiva umi oiporúvape umi tecnología oipytyvõva – haꞌeháicha umi pantalla moñeꞌerã. Ejesareko marandu ojehechaukáva saꞌi rupive ojehecha porãha pe contenido-gui voi (techapyrã, jehaipyre ojehecháva), térã oikeha ambue tape rupive, haꞌeháicha jehaipyre adicional oñeñomivaꞌekue .visually-hiddenmboꞌepy ndive.

Tetãkorapy

Eipuru umi utilidad frontera rehegua emoambue border-colorhag̃ua peteĩ tarjeta rehegua añoite. Eñamindu’u ikatuha emoĩ .text-{color}mbo’esyry túva ári .cardtérã peteĩ subconjunto tarjeta contenido rehegua ojehechaukaháicha ko’ápe.

Akãrapu’ã
Título de tarjeta primaria rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Akãrapu’ã
Título de tarjeta secundaria rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Akãrapu’ã
Título de tarjeta de éxito rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Akãrapu’ã
Título de tarjeta de peligro rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Akãrapu’ã
Título de tarjeta de advertencia rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Akãrapu’ã
Título tarjeta de info rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Akãrapu’ã
Título de tarjeta de luz rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Akãrapu’ã
Título de tarjeta oscura

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

<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 rehegua

Ikatu avei remoambue umi rembe’y tarjeta iñakã ha ipypegua tekotevẽháicha, ha jepe reipe’a ikuéra background-colororekóva .bg-transparent.

Akãrapu’ã
Título de tarjeta de éxito rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Ñepyrũrã 
<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>

Tarjeta ñemohenda

Ojejapo rire estilo contenido tarjeta ryepýpe, Bootstrap oike mbovymi opción oñemohenda hag̃ua serie tarjeta rehegua. Ko’áĝa g̃uarã, ko’ã opción diseño rehegua ne’ĩra gueteri ombohovái .

Tarjeta atykuéra rehegua

Eipuru tarjeta aty ehechauka hag̃ua tarjeta peteĩ elemento peteĩvaicha, oñembojoajúva, oguerekóva columna ipekue ha ijyvate joja. Umi aty tarjeta rehegua oñepyrü apilado ha oipuru display: flex;oñembojoaju hagua dimensión uniforme reheve oñepyrüva punto de smruptura-pe.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta tuichavéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko contenido ipukuve’imi.

Oñemoambue ipahaitépe 3 mins ohasava'ekuépe

Placeholder Image cap
Tarjeta título rehegua

Ko tarjeta oreko texto de apoyo iguýpe peteî lead-in natural ramo contenido adicional-pe.

Oñemoambue ipahaitépe 3 mins ohasava'ekuépe

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta tuichavéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko tarjeta oguereko contenido ipukuvéva jepe pe peteîhagui ohechauka hagua upe acción altura joja rehegua.

Oñemoambue ipahaitépe 3 mins ohasava'ekuépe

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

Oipurúvo umi aty tarjeta rehegua oguerekóva ipype, ikonteído oñemohendavaꞌerã ijeheguiete.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta tuichavéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko contenido ipukuve’imi.

Oñemoambue ipahaitépe 3 mins ohasava'ekuépe
Placeholder Image cap
Tarjeta título rehegua

Ko tarjeta oreko texto de apoyo iguýpe peteî lead-in natural ramo contenido adicional-pe.

Oñemoambue ipahaitépe 3 mins ohasava'ekuépe
Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta tuichavéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko tarjeta oguereko contenido ipukuvéva jepe pe peteîhagui ohechauka hagua upe acción altura joja rehegua.

Oñemoambue ipahaitépe 3 mins ohasava'ekuépe 
<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>

Tarjeta de rejilla rehegua

Eipuru sistema cuadrícula Bootstrap ha .row-colsiclasekuéra econtrola hag̃ua mboy columna cuadrícula rehegua (oñembojeguáva nde tarjetakuéra jerére) rehechauka peteĩ fila-pe. Techapyrã, .row-cols-1koꞌape oñemboguapy umi tarjeta peteĩ columna ári, ha .row-cols-md-2oñembojaꞌo irundy tarjeta ipukukue joja hag̃ua heta fila rupi, punto de ruptura media guive yvate gotyo.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta ipukuvéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko contenido ipukuve’imi.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta ipukuvéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko contenido ipukuve’imi.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta ipukuvéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta ipukuvéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko contenido ipukuve’imi.

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

Emoambue .row-cols-3ha rehecháta irundyha tarjeta envoltura.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta ipukuvéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko contenido ipukuve’imi.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta ipukuvéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko contenido ipukuve’imi.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta ipukuvéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta ipukuvéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko contenido ipukuve’imi.

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

Reikotevẽ jave peteĩchaite ijyvatekue, emoĩve .h-100umi tarjeta rehe. Oipotáramo yvate joja por defecto, ikatu emohenda $card-height: 100%Sass-pe.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta ipukuvéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko contenido ipukuve’imi.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta mbykymi.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta ipukuvéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta ipukuvéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko contenido ipukuve’imi.

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

Ojejapoháicha umi tarjeta aty rehe, umi tarjeta pypegua oñemohendavaꞌerã ijeheguiete.

Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta tuichavéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko contenido ipukuve’imi.

Oñemoambue ipahaitépe 3 mins ohasava'ekuépe
Placeholder Image cap
Tarjeta título rehegua

Ko tarjeta oreko texto de apoyo iguýpe peteî lead-in natural ramo contenido adicional-pe.

Oñemoambue ipahaitépe 3 mins ohasava'ekuépe
Placeholder Image cap
Tarjeta título rehegua

Kóva ha’e peteĩ tarjeta tuichavéva orekóva texto oipytyvõva iguýpe peteĩ lead-in natural ramo contenido adicional-pe. Ko tarjeta oguereko contenido ipukuvéva jepe pe peteîhagui ohechauka hagua upe acción altura joja rehegua.

Oñemoambue ipahaitépe 3 mins ohasava'ekuépe 
<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 rehegua

En v4roipuru peteĩ técnica CSS-pe g̃uarãnte roimita hag̃ua umi columna Masonería -ichagua reko, ha katu ko técnica ou heta efecto secundario ndogustáiva reheve . Oguerekoséramo ko’ãichagua ñemohenda v5, ikatu reipurunte Masonry plugin. Albañilería ndoikéi Bootstrap -pe , ha katu rojapo peteĩ techapyrã demostración rehegua nepytyvõ hag̃ua reñepyrũ hag̃ua.

Sass rehegua

Variables rehegua

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$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;