Font Style
Dropdown Menu Icon
SubMenu List Icon
General Settings
- 11:00am
Attendance
Computer Class
- 11:30am
Added an interest
“Volunteer Activities”
- 12:00pm
Developer Team
Hangouts
- 2:00pm
Responded to need
“In-Kind Opportunity” - 1:30pm
Lunch Break
- 2:38pm
Finish
Go to Home
Light Version
Dark Version
RTL Version
Ericsson University
Sara Hopkins
Webdeveloper
Statistics
$545
27%
English
Spanish
japanese
FranceCards
A card is a flexible and extensible content container. It includes options for headers and footers,a wide variety of content,contextual background colors,and powerful display options.
The .cardelement is simply a container with a shadow,a border,a radius,and some padding. Built with flexbox,they offer easy alignment and mix well with other Bootstrap components.
Card title
Lorem ipsum dolor sit amet,consectetur adipisicing elit. Aperiam deleniti fugit incidunt,iste,itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur,deserunt eaque error nulla temporibus!
<divclass="card"><divclass="card-header"><h3class="card-title">Card title</h3></div><divclass="card-body">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Aperiam deleniti fugit incidunt,iste,itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur,deserunt eaque error nulla temporibus!</div></div>Advanced card
Card title
Lorem ipsum dolor sit amet,consectetur adipisicing elit. Aperiam deleniti fugit incidunt,iste,itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur,deserunt eaque error nulla temporibus!
<divclass="card"><divclass="card-header"><h3class="card-title">Card title</h3><divclass="card-options"><ahref="#"class="btn btn-primary btn-sm">Action 1</a><ahref="#"class="btn btn-secondary btn-sm ml-2">Action 2</a></div></div><divclass="card-body">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Aperiam deleniti fugit incidunt,iste,itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur,deserunt eaque error nulla temporibus!</div><divclass="card-footer">This is standard card footer </div></div>Blog post card
The best way to make your post eye-catching is adding an image to it. To do so,just add the image with the .card-img-topclass. We’ve added the .d-flex .flex-columnclasses to the .card-bodyto have the author details be on the bottom of the card.
And this isn't my nose. This is a false one.
Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...
<div class="card">
<a href="#"><img class="card-img-top" src="../assets/images/gallery/1.jpg" alt="And this isn't my nose. This is a false one."></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">And this isn't my nose. This is a false one.</a></h4><divclass="text-muted">Look,my liege!The Knights Who Say Ni demand a sacrifice!…Are you suggesting that coconuts migr...</div><divclass="d-flex align-items-center pt-5 mt-auto"><imgclass="avatar avatar-md mr-3"src="../assets/images/xs/avatar4.jpg"/><div><ahref="#"class=>Rose Bradley</a><smallclass="d-block text-muted">3 days ago</small></div><divclass="ml-auto text-muted"><ahref="#"class="icon d-none d-md-inline-block ml-3"><iclass="fe fe-heart mr-1"></i></a></div></div></div></div>Row deck
If you want to create a couple of posts next to each other,add the .row-deckclass to .row—then they will all have the same height.
Short content
Extra long content of card. Lorem ipsum dolor sit amet,consetetur sadipscing elitr
Short content
<divclass="row row-cards row-deck"><divclass="col-md-4"><divclass="card"><divclass="card-body">Short content</div></div></div><divclass="col-md-4"><divclass="card"><divclass="card-body">Extra long content of card. Lorem ipsum dolor sit amet,consetetur sadipscing elitr</div></div></div><divclass="col-md-4"><divclass="card"><divclass="card-body">Short content</div></div></div></div>Post card with aside image
You can also add the image on the left side of the card. All you need do to is:add the .card-asideclass to the element with the .cardclass. Then add the image in the .card-aside-columnelement. No worries,puffinwill automatically center it and scale to right size:
And this isn't my nose. This is a false one.
Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...
<div class="card card-aside">
<a href="#" class="card-aside-column" style="background-image: url(../assets/images/gallery/2.jpg)"></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">And this isn't my nose. This is a false one.</a></h4><divclass="text-muted">Look,my liege!The Knights Who Say Ni demand a sacrifice!…Are you suggesting that coconuts migr...</div><divclass="d-flex align-items-center pt-5 mt-auto"><imgclass="avatar avatar-md mr-3"src="../assets/images/xs/avatar4.jpg"/><div><ahref="#"class=>Rose Bradley</a><smallclass="d-block text-muted">3 days ago</small></div><divclass="ml-auto text-red"><ahref="#"class="icon d-none d-md-inline-block ml-3"><iclass="fe fe-heart mr-1"></i></a></div></div></div></div>Color variations
Card status
Lorem ipsum dolor sit amet,consectetur adipisicing elit. Aperiam deleniti fugit incidunt,iste,itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur,deserunt eaque error nulla temporibus!
Card status on left side
Lorem ipsum dolor sit amet,consectetur adipisicing elit. Aperiam deleniti fugit incidunt,iste,itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur,deserunt eaque error nulla temporibus!
<divclass="row row-cards row-deck"><divclass="col-md-6"><divclass="card"><divclass="card-status bg-purple"></div><divclass="card-header"><h3class="card-title">Card status</h3></div><divclass="card-body">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Aperiam deleniti fugit incidunt,iste,itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur,deserunt eaque error nulla temporibus!</div></div></div><divclass="col-md-6"><divclass="card"><divclass="card-status card-status-left bg-blue"></div><divclass="card-header"><h3class="card-title">Card status on left side</h3></div><divclass="card-body">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Aperiam deleniti fugit incidunt,iste,itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur,deserunt eaque error nulla temporibus!</div></div></div></div>Card with switch
Card with switch
Lorem ipsum dolor sit amet,consectetur adipisicing elit. Aperiam deleniti fugit incidunt,iste,itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur,deserunt eaque error nulla temporibus!
<divclass="card"><divclass="card-header"><h3class="card-title">Card with switch</h3><divclass="card-options"><labelclass="custom-switch m-0"><inputtype="checkbox"value="1"class="custom-switch-input"checked><spanclass="custom-switch-indicator"></span></label></div></div><divclass="card-body">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Aperiam deleniti fugit incidunt,iste,itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur,deserunt eaque error nulla temporibus!</div></div>Card with loader
Card with loader
Lorem ipsum dolor sit amet,consectetur adipisicing elit. Aperiam deleniti fugit incidunt,iste,itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur,deserunt eaque error nulla temporibus!
<divclass="card"><divclass="card-header"><h3class="card-title">Card with loader</h3></div><divclass="card-body"><divclass="dimmer active"><divclass="loader"></div><divclass="dimmer-content">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Aperiam deleniti fugit incidunt,iste,itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur,deserunt eaque error nulla temporibus!</div></div></div></div>