Source

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.

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 .

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 class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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.

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 class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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.

Cras justo odio rehegua
Dapibus ac facilisis rehegua
Vestibulo en eros rehegua

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

Ojekuaauka

Cras justo odio rehegua
Dapibus ac facilisis rehegua
Vestibulo en eros rehegua

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

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.

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.

Cras justo odio rehegua
Dapibus ac facilisis rehegua
Vestibulo en eros rehegua

Enlace tarjeta rehegua Ambue enlace

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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>

Akã ha ipypegua

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

Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante.

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

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

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" 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="#">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" href="#">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.

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

<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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 class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</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.

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 class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <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>

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 ha fondo rehegua emoambue hag̃ua peteĩ tarjeta jehecha.

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

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 .sr-onlymboꞌ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 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 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 oipuru display: flex;ohupyty hagua idimension uniforme.

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

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

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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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.

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

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

Tarjeta título rehegua

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

Umi mazo de tarjeta rehegua

¿Reikotevẽ peteĩ conjunto de tarjetas de ancho ha altura joja ndojejokóiva ojuehe? Eipuru umi baraja de tarjeta.

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.

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

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

Tarjeta título rehegua

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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>

Ojoguaite umi tarjeta aty ndive, umi tarjeta py rehegua oĩva umi mazo-pe oñemohenda jeýta ijeheguiete.

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

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

Tarjeta título rehegua

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

Umi columna tarjeta rehegua

Umi tarjeta ikatu oñemboheko umi columna Masonería - ichagua CSS-pe añoite reheve oñembojere rupi .card-columns. Umi tarjeta oñemopuꞌa CSS columnmbaꞌekuaarã reheve flexbox rangue oñemboheko porãve hag̃ua. Umi tarjeta ojeordena yvate guive yvy gotyo ha izquierda guive derecha peve.

¡Akã yvate! Ikatu iñambue nde kilometraje orekóva umi columna de tarjeta. Ani hag̃ua umi tarjeta oñembyai umi columna rupi, ñamohendavaꞌerã chupekuéra display: inline-blockndahaꞌeiháicha column-break-inside: avoidgueteri peteĩ solución a prueba de balas.

Tarjeta título ombojeguáva peteĩ línea pyahúpe

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.

Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante.

Alguien famoso en Título de Fuente

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

Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat rehegua.

Alguien famoso en Título de Fuente

Tarjeta título rehegua

Ko tarhéta oreko peteĩ título regular ha peteĩ párrafo mbykymi de téxto iguýpe.

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

Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante.

Alguien famoso en Título de Fuente

Tarjeta título rehegua

Kóva ha’e ambue tarjeta orekóva título ha texto oipytyvõva iguýpe. Ko tarjeta oreko algún contenido adicional ikatu hag̃uáicha ijyvateveʼimi en general.

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

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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">
        <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 class="card-img" src=".../100px260/" alt="Card image">
  </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>

Umi columna tarjeta rehegua ikatu avei oñembotuichave ha oñemboheko peteĩ código adicional reheve. Ojehechauka iguýpe peteĩ mbo’esyry ñembotuichave .card-columnsoipurúva peteĩchagua CSS jaipurúva—CSS vore— omoheñói hag̃ua peteĩ aty nivel ombohováiva oñemoambue hag̃ua mboýpa oĩ vore.

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

Tarjeta-kuéra rehegua

Upéva rehegua

Tembiecharã

Tarjeta título rehegua

Umi mba’ekuaarã ñemohenda

Tete

Título, jehaipyre ha enlace-kuéra

Tarjeta título rehegua

Tarjeta subtítulo rehegua

Ta’ãngamýi

Emoĩ lista umi aty rehegua

Lavabo de cocina rehegua

Tarjeta título rehegua

Akã ha ipypegua

Tratamiento especial título rehegua

Ojekuaauka

Tratamiento especial título rehegua

Tratamiento especial título rehegua

Dimensionamiento rehegua

Oipurúvo marcado cuadrícula rehegua

Tratamiento especial título rehegua

Tratamiento especial título rehegua

Oipurúvo umi utilidad

Tarjeta título rehegua

Tarjeta título rehegua

Oipurúvo CSS jeporupyre

Tratamiento especial título rehegua

Jehaipyre ñemohenda

Tratamiento especial título rehegua

Tratamiento especial título rehegua

Tratamiento especial título rehegua

Navegación rehegua

Tratamiento especial título rehegua

Tratamiento especial título rehegua

Ta’ãngamýi

Ta’ãnga’i ryru

Tarjeta título rehegua

Tarjeta título rehegua

Ta’ãngamýi ñemoĩha

Tarjeta título rehegua

Estilos de tarjeta rehegua

Fondo ha color rehegua

Título de tarjeta primaria rehegua

Título de tarjeta secundaria rehegua

Título de tarjeta de éxito rehegua

Título de tarjeta de peligro rehegua

Título de tarjeta de advertencia rehegua

Título tarjeta de info rehegua

Título de tarjeta de luz rehegua

Título de tarjeta oscura

Ombohasávo he’iséva umi tecnología oipytyvõvape

Tetãkorapy

Título de tarjeta primaria rehegua

Título de tarjeta secundaria rehegua

Título de tarjeta de éxito rehegua

Título de tarjeta de peligro rehegua

Título de tarjeta de advertencia rehegua

Título tarjeta de info rehegua

Título de tarjeta de luz rehegua

Título de tarjeta oscura

Mixins servicios públicos rehegua

Título de tarjeta de éxito rehegua

Tarjeta ñemohenda

Tarjeta atykuéra rehegua

Tarjeta título rehegua

Tarjeta título rehegua

Tarjeta título rehegua

Tarjeta título rehegua

Tarjeta título rehegua

Tarjeta título rehegua

Umi mazo de tarjeta rehegua

Tarjeta título rehegua

Tarjeta título rehegua

Tarjeta título rehegua

Tarjeta título rehegua

Tarjeta título rehegua

Tarjeta título rehegua

Umi columna tarjeta rehegua

Tarjeta título ombojeguáva peteĩ línea pyahúpe

Tarjeta título rehegua