Ny karatra Bootstrap dia manome fitoerana votoaty mora azo sy azo avela miaraka amina karazany sy safidy maro.
About
Ny karatra dia fitahirizana votoaty mora azo sy azo itarina. Anisan'izany ny safidy ho an'ny lohapejy sy tongotra, votoaty isan-karazany, lokon'ny lafin-javatra manodidina, ary safidy fampisehoana mahery vaika. Raha zatra amin'ny Bootstrap 3 ianao, dia manolo ny takelaka, fantsakana, ary thumbnail taloha ny karatra. Ny fiasa mitovy amin'ireo singa ireo dia azo alaina amin'ny kilasy modifier ho an'ny karatra.
OHATRA
Ny karatra dia natsangana miaraka amin'ny marika sy fomba kely araka izay azo atao, saingy mbola mahavita manome fanaraha-maso sy fanamboarana taonina. Namboarina tamin'ny flexbox, manolotra fampifanarahana mora izy ireo ary mifangaro tsara amin'ny singa Bootstrap hafa. Tsy misy azy ireo margin
amin'ny alàlan'ny default, noho izany dia ampiasao ny fitaovana fanamafisam -peo raha ilaina.
Ity ambany ity ny ohatra iray momba ny karatra fototra misy votoaty mifangaro sy sakany raikitra. Tsy manana sakany raikitra hanombohana ny karatra, noho izany dia hofenoin'izy ireo ho azy ny sakan'ny singa ray aman-dreniny. Izany dia mora amboarina miaraka amin'ireo safidy habe isan-karazany .
Placeholder
Image cap
Lohateny karatra
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Mandehana any
dika mitovy
<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>
Karazana votoaty
Ny karatra dia manohana karazana votoaty marobe, ao anatin'izany ny sary, lahatsoratra, vondrona lisitra, rohy, sy ny maro hafa. Ireto ambany ireto ny ohatra amin'izay tohana.
-kevi-pitantanana
Ny fototry ny karatra dia ny .card-body
. Ampiasao izany isaky ny mila fizarana misy padded ao anaty karatra ianao.
Ity dia lahatsoratra sasantsasany ao anatin'ny vatan'ny karatra.
dika mitovy
<div class= "card" >
<div class= "card-body" >
This is some text within a card body.
</div>
</div>
Lohateny, lahatsoratra ary rohy
Ny lohatenin'ny karatra dia ampiasaina amin'ny fanampiana .card-title
amina <h*>
marika. Toy izany koa, ny rohy dia ampiana sy apetraka eo akaikin'ny tsirairay amin'ny fanampiana .card-link
amin'ny <a>
marika.
Ny dikanteny dia ampiasaina amin'ny fampidirana a .card-subtitle
amin'ny <h*>
marika. Raha apetraka ao anaty singa iray ny .card-title
sy ny entana, dia mifanaraka tsara ny lohatenin'ny karatra sy ny dikanteny..card-subtitle
.card-body
Lohateny karatra
dikanteny karatra
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Rohy karatra Rohy
hafa
dika mitovy
<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>
Sary
.card-img-top
mametraka sary eo an-tampon'ny karatra. Miaraka amin'ny .card-text
, dia azo ampiana lahatsoratra amin'ny karatra. Ny lahatsoratra ao anatiny .card-text
dia azo alaina miaraka amin'ny marika HTML mahazatra.
Placeholder
Image cap
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
dika mitovy
<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>
Tanisao ny vondrona
Mamorona lisitry ny atiny amin'ny karatra miaraka amin'ny vondrona lisitra flush.
Cras justo odio
Dapibus ac facilisis in
Vestibulum sy eros
dika mitovy
<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>
Cras justo odio
Dapibus ac facilisis in
Vestibulum sy eros
dika mitovy
<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>
Cras justo odio
Dapibus ac facilisis in
Vestibulum sy eros
dika mitovy
<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 class= "card-footer" >
Card footer
</div>
</div>
Lavin-dakozia
Afangaro ary ampifanaraho ireo karazana atiny maro mba hamoronana ny karatra ilainao, na atsipy ao daholo ny zava-drehetra. Aseho eto ambany ny endriky ny sary, ny sakana, ny endri-tsoratra, ary ny vondrona lisitra iray — nofonosina karatra mirefy raikitra avokoa.
Placeholder
Image cap
Lohateny karatra
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Cras justo odio
Dapibus ac facilisis in
Vestibulum sy eros
dika mitovy
<div class= "card" style= "width: 18rem;" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class= "list-group list-group-flush" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
<div class= "card-body" >
<a href= "#" class= "card-link" > Card link</a>
<a href= "#" class= "card-link" > Another link</a>
</div>
</div>
Manampia lohapejy sy/na tohin-tongony tsy voatery ho ao anaty karatra.
Fitsaboana titre manokana
Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
Mandehana any
dika mitovy
<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>
Ny lohatenin'ny karatra dia azo atao amin'ny alalan'ny fanampiana .card-header
ireo <h*>
singa.
Fitsaboana titre manokana
Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
Mandehana any
dika mitovy
<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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
dika mitovy
<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>
Fitsaboana titre manokana
Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
Mandehana any
dika mitovy
<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>
Famaritana
Ny karatra dia mihevitra fa tsy voafaritra width
ny fanombohana, ka ho 100% ny sakany raha tsy misy filazana hafa. Azonao atao ny manova izany araka izay ilaina amin'ny CSS mahazatra, kilasy grid, grid Sass mixins, na fitaovana.
Mampiasa marika marika
Amin'ny fampiasana ny tsipika, aforeto ny karatra amin'ny tsanganana sy andalana raha ilaina.
Fitsaboana titre manokana
Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
Mandehana any
Fitsaboana titre manokana
Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
Mandehana any
dika mitovy
<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>
Mampiasa fitaovana
Mampiasà fitaovana fandrefesana vitsivitsy azo atao mba hametrahana haingana ny sakan'ny karatra.
Lohateny karatra
Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
bokotra
Lohateny karatra
Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
bokotra
dika mitovy
<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>
Mampiasa CSS mahazatra
Mampiasà CSS mahazatra ao amin'ny stylesheets na amin'ny endrika inline mba hametrahana ny sakany.
Fitsaboana titre manokana
Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
Mandehana any
dika mitovy
<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>
Fandrindrana lahatsoratra
Azonao atao ny manova haingana ny fampifanarahana lahatsoratra amin'ny karatra rehetra — amin'ny ampahany manontolo na manokana — miaraka amin'ireo kilasy fampifanarahana lahatsoratra .
Fitsaboana titre manokana
Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
Mandehana any
Fitsaboana titre manokana
Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
Mandehana any
Fitsaboana titre manokana
Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
Mandehana any
dika mitovy
<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>
Fikarohana
Manampia fitetezana sasany amin'ny lohatenin'ny karatra (na sakana) miaraka amin'ireo singa nav an'ny Bootstrap .
Fitsaboana titre manokana
Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
Mandehana any
dika mitovy
<div class= "card text-center" >
<div class= "card-header" >
<ul class= "nav nav-tabs card-header-tabs" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" > Active</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" tabindex= "-1" aria-disabled= "true" > Disabled</a>
</li>
</ul>
</div>
<div class= "card-body" >
<h5 class= "card-title" > Special title treatment</h5>
<p class= "card-text" > With supporting text below as a natural lead-in to additional content.</p>
<a href= "#" class= "btn btn-primary" > Go somewhere</a>
</div>
</div>
Fitsaboana titre manokana
Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
Mandehana any
dika mitovy
<div class= "card text-center" >
<div class= "card-header" >
<ul class= "nav nav-pills card-header-pills" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" > Active</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" tabindex= "-1" aria-disabled= "true" > Disabled</a>
</li>
</ul>
</div>
<div class= "card-body" >
<h5 class= "card-title" > Special title treatment</h5>
<p class= "card-text" > With supporting text below as a natural lead-in to additional content.</p>
<a href= "#" class= "btn btn-primary" > Go somewhere</a>
</div>
</div>
Sary
Misy safidy vitsivitsy amin'ny fiasana sary ny karatra. Misafidiana amin'ny fanampina "satroka sary" amin'ny faran'ny karatra iray, manarona sary miaraka amin'ny atiny karatra, na mampiditra fotsiny ny sary ao anaty karatra.
Satroka sary
Mitovy amin'ny lohapejy sy tongo-tongotra, ny karatra dia mety ahitana “satroka satroka” ambony sy ambany — sary eo ambony na ambany amin'ny karatra.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
Nohavaozina farany 3 min lasa izay
Lohateny karatra
Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
Nohavaozina farany 3 min lasa izay
Placeholder
Image cap
dika mitovy
<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>
Fisompiana sary
Avadiho ho lafin'ny karatra ny sary iray ary apetaho ny lahatsoratry ny karatrao. Miankina amin'ny sary, mety mila endrika na fitaovana fanampiny ianao.
Placeholder
Card image
Lohateny karatra
Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
Nohavaozina farany 3 min lasa izay
dika mitovy
<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>
Mariho fa tsy tokony ho lehibe noho ny haavon'ny sary ny atiny. Raha lehibe noho ny sary ny atiny dia haseho ivelan'ny sary ny atiny.
Marindrano
Amin'ny alalan'ny fitambaran'ny kilasy grid sy utility, ny karatra dia azo atao marindrano amin'ny fomba mora sy mora raisina. Ao amin'ny ohatra etsy ambany, dia esorintsika ny tata-drano miaraka amin'ny tsipika .no-gutters
ary mampiasa .col-md-*
kilasy hanaovana ny karatra mitsivalana eo amin'ny md
teboka tapaka. Mety ilaina ny fanitsiana fanampiny arakaraka ny votoatin'ny karatrao.
Placeholder
Image
Lohateny karatra
Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
Nohavaozina farany 3 min lasa izay
dika mitovy
<div class= "card mb-3" style= "max-width: 540px;" >
<div class= "row no-gutters" >
<div class= "col-md-4" >
<img src= "..." class= "card-img" alt= "..." >
</div>
<div class= "col-md-8" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
Karazana fomba
Ny karatra dia misy safidy isan-karazany amin'ny fanamboarana ny fiaviany, ny sisintany ary ny lokony.
Background sy loko
Mampiasà fitaovana an-tsoratra sy ambadika hanovana ny endriky ny karatra.
Lohatenin'ny karatra voalohany
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Lohatenin'ny karatra faharoa
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Lohateny karatra fahombiazana
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Lohateny karatra loza
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Lohatenin'ny karatra fampitandremana
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Lohatenin'ny karatra fampahalalana
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Lohateny karatra maivana
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Lohatenin'ny karatra maizina
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
dika mitovy
<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>
Fampitaovana ny dikan'ny teknôlôjia manampy
Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .sr-only
kilasy.
Sisintany
Mampiasà fampiasa sisintany hanovana ny border-color
karatra fotsiny. Mariho fa azonao atao ny mametraka .text-{color}
kilasy amin'ny ray aman-dreny .card
na ampahany amin'ny votoatin'ny karatra araka ny aseho etsy ambany.
Lohatenin'ny karatra voalohany
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Lohatenin'ny karatra faharoa
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Lohateny karatra fahombiazana
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Lohateny karatra loza
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Lohatenin'ny karatra fampitandremana
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Lohatenin'ny karatra fampahalalana
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Lohateny karatra maivana
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
Lohatenin'ny karatra maizina
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
dika mitovy
<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 utilities
Azonao atao ihany koa ny manova ny sisin-tany amin'ny lohatenin'ny karatra sy ny footer raha ilaina, ary esorinao background-color
miaraka amin'ny .bg-transparent
.
Lohateny karatra fahombiazana
Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.
dika mitovy
<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>
Fametrahana karatra
Ho fanampin'ny famolavolana ny atiny ao anaty karatra, ny Bootstrap dia misy safidy vitsivitsy amin'ny fametrahana andiana karatra. Amin'izao fotoana izao, tsy mbola mamaly ireo safidy fandrindrana ireo .
Vondrona karatra
Mampiasà vondrona karatra hamadika karatra ho singa tokana mifamatotra miaraka amin'ny tsanganana mitovy sakany sy haavony. Ny vondrona karatra dia manomboka mivondrona ary ampiasaina display: flex;
mba hiraikitra amin'ny refy fanamiana manomboka eo amin'ny sm
teboka tapaka.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
Nohavaozina farany 3 min lasa izay
Placeholder
Image cap
Lohateny karatra
Ity karatra ity dia manana lahatsoratra manohana eto ambany ho toy ny fitarihana voajanahary amin'ny atiny fanampiny.
Nohavaozina farany 3 min lasa izay
Placeholder
Image cap
Lohateny karatra
Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Ity karatra ity dia manana atiny lava kokoa noho ny voalohany mampiseho an'io hetsika mitovy amin'ny haavony io.
Nohavaozina farany 3 min lasa izay
dika mitovy
<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>
Rehefa mampiasa vondrona karatra misy footers dia milahatra ho azy ny votoatiny.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
Placeholder
Image cap
Lohateny karatra
Ity karatra ity dia manana lahatsoratra manohana eto ambany ho toy ny fitarihana voajanahary amin'ny atiny fanampiny.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Ity karatra ity dia manana atiny lava kokoa noho ny voalohany mampiseho an'io hetsika mitovy amin'ny haavony io.
dika mitovy
<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>
Decks karatra
Mila karazana karatra mitovy sakany sy haavony izay tsy mifamatotra? Mampiasà karatra karatra.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
Nohavaozina farany 3 min lasa izay
Placeholder
Image cap
Lohateny karatra
Ity karatra ity dia manana lahatsoratra manohana eto ambany ho toy ny fitarihana voajanahary amin'ny atiny fanampiny.
Nohavaozina farany 3 min lasa izay
Placeholder
Image cap
Lohateny karatra
Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Ity karatra ity dia manana atiny lava kokoa noho ny voalohany mampiseho an'io hetsika mitovy amin'ny haavony io.
Nohavaozina farany 3 min lasa izay
dika mitovy
<div class= "card-deck" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has supporting text below as a natural lead-in to additional content.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Tahaka ny amin'ny vondrona karatra, ny tongotry ny karatra ao amin'ny decks dia milahatra ho azy.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
Placeholder
Image cap
Lohateny karatra
Ity karatra ity dia manana lahatsoratra manohana eto ambany ho toy ny fitarihana voajanahary amin'ny atiny fanampiny.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Ity karatra ity dia manana atiny lava kokoa noho ny voalohany mampiseho an'io hetsika mitovy amin'ny haavony io.
dika mitovy
<div class= "card-deck" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class= "card-footer" >
<small class= "text-muted" > Last updated 3 mins ago</small>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class= "card-footer" >
<small class= "text-muted" > Last updated 3 mins ago</small>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class= "card-footer" >
<small class= "text-muted" > Last updated 3 mins ago</small>
</div>
</div>
</div>
Karatra Grid
Ampiasao ny rafitra grid Bootstrap sy ny .row-cols
kilasiny hifehezana ny isan'ny tsanganana grid (mihodidina manodidina ny karatrao) asehonao isaky ny andalana. Ohatra, eto ny .row-cols-1
fametrahana ny karatra amin'ny tsanganana iray, ary .row-cols-md-2
mizara karatra efatra amin'ny sakany mitovy amin'ny andalana maromaro, manomboka amin'ny tsipika antonony miakatra.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
dika mitovy
<div class= "row row-cols-1 row-cols-md-2" >
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Ovay izany .row-cols-3
ary ho hitanao ny fonon'ny karatra fahefatra.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
dika mitovy
<div class= "row row-cols-1 row-cols-md-3" >
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Rehefa mila haavony mitovy ianao dia ampio .h-100
amin'ny karatra. Raha mila haavony mitovy amin'ny default ianao dia azonao atao ny mametraka $card-height: 100%
ao amin'ny Sass.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
Placeholder
Image cap
Lohateny karatra
Karatra fohy ity.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.
Placeholder
Image cap
Lohateny karatra
Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
dika mitovy
<div class= "row row-cols-1 row-cols-md-3" >
<div class= "col mb-4" >
<div class= "card h-100" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card h-100" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a short card.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card h-100" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card h-100" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Andry karatra
Ny karatra dia azo alamina amin'ny tsanganana toy ny Masonry miaraka amin'ny CSS fotsiny amin'ny famenoana azy ireo amin'ny .card-columns
. Ny karatra dia naorina miaraka amin'ny column
fananana CSS fa tsy flexbox ho an'ny fampifanarahana mora kokoa. Ny karatra dia milahatra avy any ambony ka hatrany ambany ary havia miankavanana.
Fampitandremana! Mety hiovaova ny halaviranao miaraka amin'ny tsanganana karatra. Mba hisorohana ny karatra miparitaka manerana ny tsanganana, dia tsy maintsy ataontsika ho display: inline-block
toy column-break-inside: avoid
ny tsy vahaolana amin'ny bala izany.
Placeholder
Image cap
Lohatenin'ny karatra mifono andalana vaovao
Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Placeholder
Image cap
Lohateny karatra
Ity karatra ity dia manana lahatsoratra manohana eto ambany ho toy ny fitarihana voajanahary amin'ny atiny fanampiny.
Nohavaozina farany 3 min lasa izay
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Lohateny karatra
Ity karatra ity dia manana lohateny mahazatra sy andinin-tsoratra fohy eo ambaniny.
Nohavaozina farany 3 min lasa izay
Placeholder
Card image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lohateny karatra
Ity dia karatra hafa misy lohateny sy lahatsoratra manohana eto ambany. Ity karatra ity dia manana atiny fanampiny mba hahatonga azy ho lava kokoa amin'ny ankapobeny.
Nohavaozina farany 3 min lasa izay
dika mitovy
<div class= "card-columns" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title that wraps to a new line</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class= "card p-3" >
<blockquote class= "blockquote mb-0 card-body" >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class= "blockquote-footer" >
<small class= "text-muted" >
Someone famous in <cite title= "Source Title" > Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has supporting text below as a natural lead-in to additional content.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card bg-primary text-white text-center p-3" >
<blockquote class= "blockquote mb-0" >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class= "blockquote-footer text-white" >
<small>
Someone famous in <cite title= "Source Title" > Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class= "card text-center" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has a regular title and short paragraphy of text below it.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
</div>
<div class= "card p-3 text-right" >
<blockquote class= "blockquote mb-0" >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class= "blockquote-footer" >
<small class= "text-muted" >
Someone famous in <cite title= "Source Title" > Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class= "card" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Ny tsanganana karatra dia azo ampitomboina sy amboarina miaraka amin'ny code fanampiny. Aseho eto ambany ny fanitarana ny .card-columns
kilasy mampiasa ny CSS mitovy amin'ny ampiasaintsika — tsanganana CSS — mba hamoronana andian-dahatsary mandray andraikitra hanovana ny isan'ny tsanganana.
dika mitovy
.card-columns {
@include media-breakpoint-only ( lg ) {
column-count : 4 ;
}
@include media-breakpoint-only ( xl ) {
column-count : 5 ;
}
}