Source Code Samples Portable and Simple


Card Headerstop of card
card-header» Icon-bar
<div class="card-header text-xs-center"><span class="h4 text-primary p-x-1"><i class="fa fa-fw fa-fighter-jet"></i></span><span class="h4 text-danger p-x-1"><i class="fa fa-fw fa-heartbeat"></i></span><span class="h4 text-success p-x-1"><i class="fa fa-fw fa-volume-control-phone"></i></span></div>
card-header» Right-title
Precious Amana is Dazzling  
<div class="card-header"><span class="pull-xs-right"> <span class="h6">Precious Amana is Dazzling</span>   <span class="h6"><span class="fa-stack text-primary"><i class="fa fa-fw fa-stack-2x text-muted fa-square-o"></i><i class="fa fa-fw fa-stack-1x fa-ambulance"></i></span></span>
</span>
</div>
card-header» Rocket-spinner
SETI Contact
<div class="card-header text-xs-center"><span class="h4 text-warning p-x-1"><i class="fa fa-fw fa-fighter-jet fa-spin"></i></span> <span class="small text-uppercase text-info">SETI Contact</span></div>
card-header» Tiny-title
  Beautiful Maximus is Determined
<div class="card-header"><span class="pull-xs-right"><i class="fa fa-fw fa-bars"></i></span><span class="h6"><span class="fa-stack"><i class="fa fa-fw fa-stack-2x text-muted fa-square-o"></i><i class="fa fa-fw fa-stack-1x fa-heart"></i></span></span>   <span class="h6">Beautiful Maximus is Determined</span></div>
Card Footersbottom of card
card-footer» Icon-notice
Honest Mocha is Tenacious
<div class="card-header"><span class="h6"><span class="fa-stack text-warning"><i class="fa fa-fw fa-stack-2x text-muted fa-square-o"></i><i class="fa fa-fw fa-stack-1x fa-car"></i></span></span> — <span class="h6">Honest Mocha is Tenacious</span></div>
card-footer» Upper-notice
Nice Pegasus is EnterprisingWalden
<div class="card-header"><span class="small text-strong text-uppercase">Nice Pegasus is Enterprising</span> — <span class="lead">Walden</span></div>
Card Blockscard bodies
card-block» Arriving-at
Arriving at Zwei Hunde in 13 minutes.
<div class="card-block"><span class="text-strong h4">Arriving at Zwei Hunde in </span> <span class="text-strong h4 text-danger">13  minutes.</span></div>
card-block» Italicized-message
Daring Andre · Valuable Kosmos is Courageous
<div class="card-block"><em class="text-default">Daring Andre · </em> <em class="text-success">Valuable Kosmos is Courageous</em></div>
card-block» Label-notice
7:57AM · Ideal Phantom
<div class="card-block"><span class="h3"><span class="tag tag-primary">7:57AM</span></span> <span class="text-muted"> · Ideal Phantom</span></div>
card-block» Large-text large-text
"Are you telling me you built a time machine... out of a DeLorean?"
<div class="card-block"><span class="text-strong h4">"Are you telling me you built a time machine... out of a DeLorean?"</span></div>
card-block» Legal-print typography

CSS utilities keep your code free of style attributes making HTML nodes more portable across systems. Many years of research and development make a solid easy to keep promise of a vast sustainable future.

Ready to ship GUI components allow programmers to write less boilerplate and focus on shipping features. You receive a zip file with full source code (including Sass/.scss files.), dozens of HTML files.


Print Grand Skwarki
<div class="card-block p-b-3">
<p class="small text-strong text-muted text-uppercase">CSS utilities keep your code free of style attributes making HTML nodes more portable across systems. Many years of research and development make a solid easy to keep promise of a vast sustainable future.</p>
<p class="small text-strong text-muted text-uppercase">Ready to ship GUI components allow programmers to write less boilerplate and focus on shipping features. You receive a zip file with full source code (including Sass/.scss files.), dozens of HTML files.</p>
<hr>
<a class="btn btn-info btn-block btn">
<i class="fa fa-fw fa-print"></i> Print Grand Skwarki</a>
</div>
card-block» Minutes-to
23 min to Belarus.
<div class="card-block"><span class="text-strong h3">23 min</span> <span class="text-strong h4 text-info"> to Belarus.</span></div>
card-block» More-input

See more Doodle
<div class="card-block">
<hr><span class="h3 p-r-1 text-muted"><i class="fa fa-fw fa-chevron-circle-right"></i></span><span class="text-strong text-info text-uppercase">See more Doodle</span>
<hr>
</div>
card-block» Padded-text
Profound Pegasus
Dynamic Nature is Vibrant
Outstanding Kosmos
This is about delivering useful high quality, responsive Boootstrap 4 code into developer hands, ASAP.
<div class="card-block">
<div class="p-l-3 p-b-1">
<div class="text-uppercase"><span class="fa-stack text-muted"><i class="fa fa-fw fa-stack-2x text-muted fa-square-o"></i><i class="fa fa-fw fa-stack-1x fa-assistive-listening-systems"></i></span> Profound Pegasus</div>
<div class="small text-uppercase text-info">Dynamic Nature is Vibrant</div>
</div>
<div class="p-l-3 p-b-1">
<div class="text-uppercase"><span class="fa-stack text-muted"><i class="fa fa-fw fa-stack-2x text-muted fa-square-o"></i><i class="fa fa-fw fa-stack-1x fa-low-vision"></i></span> Outstanding Kosmos</div>
<div class="small text-muted">This is about delivering useful high quality, responsive Boootstrap 4 code into developer hands, ASAP.</div>
</div>
</div>
card-block» Section-divider
Authentic Snowball is Prosperous
CSS utilities keep your code free of style attributes making HTML nodes more portable across systems.
<div class="card-block"><span class="text-strong h4 text-overflow-ellipsis"><span class="h3"><span class="fa-stack text-muted"><i class="fa fa-fw fa-stack-2x text-muted fa-square-o"></i><i class="fa fa-fw fa-stack-1x fa-plus-square"></i></span></span> <span title="Authentic Snowball is Prosperous">Authentic Snowball is Prosperous</span></span>
<div
class="p-l-3"><span class="small text-muted">CSS utilities keep your code free of style attributes making HTML nodes more portable across systems.</span></div>
</div>
card-block» Stats
Laramiee 10/6 (19)
Experienced George 25/4 (56)
<div class="card-block">
<div class="h4 card-title">Laramiee <span class="text-strong pull-xs-right">10/6 (19)</span></div>
<div class="h4 card-title">Experienced George <span class="text-strong pull-xs-right">25/4 (56)</span></div>
</div>
card-block» Tag-time
8:49PM · Buoyant Poziomka
<div class="card-block"><span class="h3"><span class="tag tag-default">8:49PM</span></span> <span class="text-muted"> · Buoyant Poziomka</span></div>
card-block» Time-of-day
10:59AM · Active Amana
<div class="card-block"><span class="h3 text-success">10:59AM</span> <span class="text-muted"> · Active Amana</span></div>
card-block» Tiny-text
Skwarki · Bright Unicorn
<div class="card-block"><span class="small text-default">Skwarki</span><span class="small text-muted"> · Bright Unicorn</span></div>
Card Listscard bodies
card-list» Search-queries
  • "What is a danger noodle?"
    26,736 people searched on Sogou
  • "Who is Dr. Meow?"
    34,388 people searched on Qwant
  • "Is this the real life, or is it a fantasy?"
    67,767 people searched on Baidu
  • "Airline Tickets"
    49,395 people searched on Yahoo
  • "Videos"
    55,838 people searched on Google
  • "How To Survive A Robot Uprising?"
    67,355 people searched on Gigablast
  • "The Three Laws of Robotics"
    42,563 people searched on Youdao
  • "Bora Bora"
    27,904 people searched on Ecosia
  • <div class="list-group list-group-flush">
    <li class="list-group-item"><span class="h6 text-muted">"</span>What is a danger noodle?<span class="h6 text-muted">"</span>
    <div class="small text-muted">26,736 people searched on Sogou </div>
    </li>
    <li class="list-group-item"><span class="h6 text-muted">"</span>Who is Dr. Meow?<span class="h6 text-muted">"</span>
    <div class="small text-muted">34,388 people searched on Qwant </div>
    </li>
    <li class="list-group-item"><span class="h6 text-muted">"</span>Is this the real life, or is it a fantasy?<span class="h6 text-muted">"</span>
    <div class="small text-muted">67,767 people searched on Baidu </div>
    </li>
    <li class="list-group-item"><span class="h6 text-muted">"</span>Airline Tickets<span class="h6 text-muted">"</span>
    <div class="small text-muted">49,395 people searched on Yahoo </div>
    </li>
    <li class="list-group-item"><span class="h6 text-muted">"</span>Videos<span class="h6 text-muted">"</span>
    <div class="small text-muted">55,838 people searched on Google </div>
    </li>
    <li class="list-group-item"><span class="h6 text-muted">"</span>How To Survive A Robot Uprising?<span class="h6 text-muted">"</span>
    <div class="small text-muted">67,355 people searched on Gigablast </div>
    </li>
    <li class="list-group-item"><span class="h6 text-muted">"</span>The Three Laws of Robotics<span class="h6 text-muted">"</span>
    <div class="small text-muted">42,563 people searched on Youdao </div>
    </li>
    <li class="list-group-item"><span class="h6 text-muted">"</span>Bora Bora<span class="h6 text-muted">"</span>
    <div class="small text-muted">27,904 people searched on Ecosia </div>
    </li>
    </div>
    card-list» Song-tracks
  • 3:32
    Thompson Twins
    Hold Me Now
  • 5:33
    Pointer Sisters
    Jump (For My Love)
  • 4:22
    Billy Ocean
    Caribbean Queen (No More Love On The Run)
  • 3:47
    Yes
    Owner Of A Lonely Heart
  • 4:18
    Tina Turner
    What's Love Got To Do With It
  • 5:39
    Ray Parker Jr.
    Ghostbusters
  • <div class="list-group list-group-flush">
    <li class="list-group-item"><span class="h1 pull-xs-left text-warning"><i class="fa fa-fw fa-play-circle"></i></span>
    <div class="small text-warning pull-xs-right p-l-1">3:32</div>
    <div class="small text-muted">Thompson Twins</div><span class="h6 text-info"><span class="text-overflow-ellipsis width-70p">Hold Me Now</span></span>
    </li>
    <li class="list-group-item"><span class="h1 pull-xs-left text-warning"><i class="fa fa-fw fa-play-circle"></i></span>
    <div class="small text-warning pull-xs-right p-l-1">5:33</div>
    <div class="small text-muted">Pointer Sisters</div><span class="h6 text-info"><span class="text-overflow-ellipsis width-70p">Jump (For My Love)</span></span>
    </li>
    <li class="list-group-item"><span class="h1 pull-xs-left text-warning"><i class="fa fa-fw fa-play-circle"></i></span>
    <div class="small text-warning pull-xs-right p-l-1">4:22</div>
    <div class="small text-muted">Billy Ocean</div><span class="h6 text-info"><span class="text-overflow-ellipsis width-70p">Caribbean Queen (No More Love On The Run)</span></span>
    </li>
    <li class="list-group-item"><span class="h1 pull-xs-left text-warning"><i class="fa fa-fw fa-play-circle"></i></span>
    <div class="small text-warning pull-xs-right p-l-1">3:47</div>
    <div class="small text-muted">Yes</div><span class="h6 text-info"><span class="text-overflow-ellipsis width-70p">Owner Of A Lonely Heart</span></span>
    </li>
    <li class="list-group-item"><span class="h1 pull-xs-left text-warning"><i class="fa fa-fw fa-play-circle"></i></span>
    <div class="small text-warning pull-xs-right p-l-1">4:18</div>
    <div class="small text-muted">Tina Turner</div><span class="h6 text-info"><span class="text-overflow-ellipsis width-70p">What's Love Got To Do With It</span></span>
    </li>
    <li class="list-group-item"><span class="h1 pull-xs-left text-warning"><i class="fa fa-fw fa-play-circle"></i></span>
    <div class="small text-warning pull-xs-right p-l-1">5:39</div>
    <div class="small text-muted">Ray Parker Jr.</div><span class="h6 text-info"><span class="text-overflow-ellipsis width-70p">Ghostbusters</span></span>
    </li>
    </div>
    card-list» Stock-market
  • 17,645.22
    +12,27 (-0.75)
    Yahoo
    NASDAQ:YHOO
  • 43,123.34
    -17,38 (-0.55)
    eBay
    NASDAQ:EBAY
  • 93,858.92
    -29,85 (-0.17)
    Oracle
    NASDAQ:ORCL
  • 79,593.58
    +43,54 (-0.78)
    Intel
    NASDAQ:INTC
  • 66,181.82
    -56,88 (-0.65)
    Dell
    DELL
  • 99,494.44
    +37,46 (-0.95)
    Google
    NASDAQ:GOOG
  • 11,234.99
    -59,36 (-0.76)
    Cisco Systems
    NASDAQ:CSCO
  • 33,653.20
    -34,85 (-0.39)
    Electronic Arts
    ERTS
  • <div class="list-group list-group-flush">
    <li class="list-group-item"><span class="pull-xs-right small text-strong"><div class="h6">17,645.22</div><span class="text-success">+12,27 (-0.75) <i class="fa fa-fw fa-long-arrow-up"></i> </span></span><span class="h5 text-info">Yahoo</span>
    <div class="small text-muted">NASDAQ:YHOO</div>
    </li>
    <li class="list-group-item"><span class="pull-xs-right small text-strong"><div class="h6">43,123.34</div><span class="text-danger">-17,38 (-0.55) <i class="fa fa-fw fa-long-arrow-down"></i> </span></span><span class="h5 text-info">eBay</span>
    <div class="small text-muted">NASDAQ:EBAY</div>
    </li>
    <li class="list-group-item"><span class="pull-xs-right small text-strong"><div class="h6">93,858.92</div><span class="text-danger">-29,85 (-0.17) <i class="fa fa-fw fa-long-arrow-down"></i> </span></span><span class="h5 text-info">Oracle</span>
    <div class="small text-muted">NASDAQ:ORCL</div>
    </li>
    <li class="list-group-item"><span class="pull-xs-right small text-strong"><div class="h6">79,593.58</div><span class="text-success">+43,54 (-0.78) <i class="fa fa-fw fa-long-arrow-up"></i> </span></span><span class="h5 text-info">Intel</span>
    <div class="small text-muted">NASDAQ:INTC</div>
    </li>
    <li class="list-group-item"><span class="pull-xs-right small text-strong"><div class="h6">66,181.82</div><span class="text-danger">-56,88 (-0.65) <i class="fa fa-fw fa-long-arrow-down"></i> </span></span><span class="h5 text-info">Dell</span>
    <div class="small text-muted">DELL</div>
    </li>
    <li class="list-group-item"><span class="pull-xs-right small text-strong"><div class="h6">99,494.44</div><span class="text-success">+37,46 (-0.95) <i class="fa fa-fw fa-long-arrow-up"></i> </span></span><span class="h5 text-info">Google</span>
    <div class="small text-muted">NASDAQ:GOOG</div>
    </li>
    <li class="list-group-item"><span class="pull-xs-right small text-strong"><div class="h6">11,234.99</div><span class="text-danger">-59,36 (-0.76) <i class="fa fa-fw fa-long-arrow-down"></i> </span></span><span class="h5 text-info">Cisco Systems</span>
    <div class="small text-muted">NASDAQ:CSCO</div>
    </li>
    <li class="list-group-item"><span class="pull-xs-right small text-strong"><div class="h6">33,653.20</div><span class="text-danger">-34,85 (-0.39) <i class="fa fa-fw fa-long-arrow-down"></i> </span></span><span class="h5 text-info">Electronic Arts</span>
    <div class="small text-muted">ERTS</div>
    </li>
    </div>
    Card Splash Screenscard bodies
    card-splash» Huge-number
    2 (57)
    949
    Jedi Temple
    <div class="card-block p-x-3 p-t-2 p-b-0"><span title="Jedi Temple"><i class="fa fa-fw fa-exclamation-triangle text-danger"></i></span>
    <div class="h1 display-1 text-strong">2
    <sup>(57)</sup>
    </div>
    <div class="h1 text-default">949
    <i class="fa fa-fw fa-long-arrow-up text-success"></i>
    </div>
    <div class="h6 text-default text-xs-center">Jedi Temple</div>
    </div>
    card-splash» Maps
    Montenegro
    Montenegro— You are free to choose to use whichever style and design fits your programming style best. Thousands of design examples and quality code that follows Bootstrap conventions, just copy & paste.
    <div class="card-block p-a-0">
    <img src="images/maps-art/web-12-light-fg.jpg" class="img-rounded m-x-auto d-block img-fluid" alt="Montenegro">
    <div class="p-x-1 p-y-2">
    <i class="fa fa-fw fa-map-pin text-danger"></i><span class="small text-strong">Montenegro</span><span class="small text-muted">— You are free to choose to use whichever style and design fits your programming style best. Thousands of design examples and quality code that follows Bootstrap conventions, just copy & paste.</span></div>
    </div>
    card-splash» Messages
    Carmen Sandiego Sighting
    Danger, danger! Evacuate. To the escape pods!
    <div class="card-block p-a-0">
    <div class="p-x-1 p-y-3 gb-danger">
    <div class="h4 p-b-2">
    <i class="fa fa-fw fa-bolt"></i> Carmen Sandiego Sighting</div>
    <div class="h6">Danger, danger! Evacuate. To the escape pods!</div>
    </div>
    </div>
    card-splash» Round
    Forest of Fallen Giants
    — Positive Nugget is Splendid
    <div class="card-block p-x-3 p-t-2 p-b-0">
    <div class="border-radius-lg p-a-1 bg-dark-blue text-default">
    <i class="fa fa-fw fa-exclamation-triangle"></i><span class="small text-strong">Forest of Fallen Giants</span>
    <div class="h4">— Positive Nugget is Splendid</div>
    </div>
    </div>