<divclass="card"style="width: 400px;"> <imgclass="card-img-top"src="https://3rdwavemedia.com/demo-images/slides/maker-card-1.jpg"alt="Card image cap"/> <divclass="card-block"> <h4class="card-title">Card title</h4> <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <ahref="#"class="btn btn-primary">Go somewhere</a> </div> </div>
Card Decks
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
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.
Last updated 3 mins ago
ソースを表示する
<divclass="card-deck"> <divclass="card"> <imgclass="card-img-top"src="https://3rdwavemedia.com/demo-images/slides/maker-card-0.jpg"alt="Card image cap"/> <divclass="card-body"> <h5class="card-title">Card title</h5> <pclass="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> <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p> </div> </div> <divclass="card"> <imgclass="card-img-top"src="https://3rdwavemedia.com/demo-images/slides/maker-card-2.jpg"alt="Card image cap"/> <divclass="card-body"> <h5class="card-title">Card title</h5> <pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p> </div> </div> <divclass="card"> <imgclass="card-img-top"src="https://3rdwavemedia.com/demo-images/slides/maker-card-3.jpg"alt="Card image cap"/> <divclass="card-body"> <h5class="card-title">Card title</h5> <pclass="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> <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div>
Tip: You can change image size (eg .<img src="https://3rdwavemedia.com/demo-images/slides/maker-card-0.jpg" alt="Card image cap" width="200" height="113" class="img-fluid atto_image_button_text-bottom">).