Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Test Mobile"
Bootstrap 3.3.0 Snippet by
sparkktv
3.3.0
Preview
HTML
CSS
View Full Screen
Fork
Fork this
1.8K
 
2 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="section section--gray"> <div class="container"> <ul class="grid grid--spaced-bottom grid--xs-1-sep-lg grid--sm-2-sep-lg"> <li> <article class="imageBox imageBox--white imageBox--bordered"> <div class="imageBox-image imageBox-image--background ratioBox ratioBox--3-2 ratioBox--16-9" style="background-image: url('http://corporate.pluto.tv/wp-content/uploads/2016/05/connected-tv-600x339.png')"></div> <div class="imageBox-content imageBox-content--centered imageBox-content--no-side-padding imageBox-content--no-bottom-padding"> <h1 class="heading imageBox-title heading--xxs-alt heading--light-margin-top heading--light-margin">Connected TV Devices</h1> <h2 class="heading heading--xxs imageBox-subtitle">Due to streaming rights, <br> channels may vary.</h2> <a class="button button--download" href="https://s3.amazonaws.com/pluto-website-user-downloads/pluto-channel-listing.pdf" target="_blank"><i class="icon icon--download"></i>Download Channel Guide</a> <div class="imageBox-buttons"> <a class="button button--simple button--img" href="https://channelstore.roku.com/details/74519/pluto-tv" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-roku-off-2x-e1464974683768.png" alt="Roku"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-roku-over-2x-e1464974699111.png" alt="Roku"> </span></a> <a class="button button--simple button--img" href="https://itunes.apple.com/us/app/pluto-tv/id751712884" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-apple-tv-over-1.png" alt="Apple TV"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/appletv-.png" alt="Apple TV"> </span></a> <a class="button button--simple button--img" href="http://www.amazon.com/Pluto-TV/dp/B00KDSGIPK" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-amazon-tv-2-e1465236228734.png" alt="Amazon Fire TV"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-amazon-tv-hover-2-e1465236218440.png" alt="Amazon Fire TV"> </span></a> <a class="button button--simple button--img" href="https://play.google.com/store/apps/details?id=tv.pluto.android&hl=en" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-android-tv-off.png" alt="Android TV"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-android-tv-over.png" alt="Android TV"> </span></a> <a class="button button--simple button--img" href="http://support.pluto.tv/hc/en-us/articles/204694824-Connect-to-Chromecast" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-chromecast-e1465236026839.png" alt="Chromecast"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-chromecast-hover-e1465235840386.png" alt="Chromecast"> </span></a> <a class="button button--simple button--img" href="" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-comingsoon.png" alt="More coming soon"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-comingsoon.png" alt="More coming soon"> </span></a></div></div></article><!-- /.imageBox --></li> <li> <article class="imageBox imageBox--white imageBox--bordered"> <div class="imageBox-image imageBox-image--background ratioBox ratioBox--3-2 ratioBox--16-9" style="background-image: url('http://corporate.pluto.tv/wp-content/uploads/2016/05/smart-tv-1-600x339.png')"></div> <div class="imageBox-content imageBox-content--centered imageBox-content--no-side-padding imageBox-content--no-bottom-padding"> <h1 class="heading imageBox-title heading--xxs-alt heading--light-margin-top heading--light-margin">Smart Televisions</h1> <h2 class="heading heading--xxs imageBox-subtitle"> <br>75+ Channels</h2> <a class="button button--download" href="https://s3.amazonaws.com/pluto-website-user-downloads/pluto-channel-listing.pdf" target="_blank"><i class="icon icon--download"></i>Download Channel Guide</a> <div class="imageBox-buttons"> <a class="button button--simple button--img" href="" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-vizio-off-1-e1464975434870.png" alt="Vizio"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-vizio-over-2-e1464975460210.png" alt="Vizio"> </span></a> <a class="button button--simple button--img" href="" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-samsung-off-2x-e1464975387663.png" alt="Samsung"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/iz-samsung-hover-2x-e1464975403180.png" alt="Samsung"> </span></a> <a class="button button--simple button--img" href="https://play.google.com/store/apps/details?id=tv.pluto.android&hl=en" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/06/ic-sony-off.png" alt="Sony (Android TV)"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/06/ic-sony-over.png" alt="Sony (Android TV)"> </span></a> <a class="button button--simple button--img" href="" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-comingsoon.png" alt=""> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-comingsoon.png" alt=""> </span></a></div></div></article><!-- /.imageBox --></li> <li> <article class="imageBox imageBox--white imageBox--bordered"> <div class="imageBox-image imageBox-image--background ratioBox ratioBox--3-2 ratioBox--16-9" style="background-image: url('http://corporate.pluto.tv/wp-content/uploads/2016/05/device-desktop-600x339.png')"></div> <div class="imageBox-content imageBox-content--centered imageBox-content--no-side-padding imageBox-content--no-bottom-padding"> <h1 class="heading imageBox-title heading--xxs-alt heading--light-margin-top heading--light-margin">U.S. Desktop App</h1> <h2 class="heading heading--xxs imageBox-subtitle">75+ Channels</h2> <a class="button button--download" href="https://s3.amazonaws.com/pluto-website-user-downloads/pluto-channel-listing.pdf" target="_blank"><i class="icon icon--download"></i>Download Channel Guide</a> <div class="imageBox-buttons"> <a class="button button--simple button--img" href="http://on.pluto.tv/plutotv-pc" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/06/ic-windows-off.png" alt="Windows"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/06/ic-windows-over-1.png" alt="Windows"> </span></a> <a class="button button--simple button--img" href="http://on.pluto.tv/plutotv-mac" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-mac-off-8.png" alt="Mac"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-mac-over-6.png" alt="Mac"> </span></a></div></div></article><!-- /.imageBox --></li> <li> <article class="imageBox imageBox--white imageBox--bordered"> <div class="imageBox-image imageBox-image--background ratioBox ratioBox--3-2 ratioBox--16-9" style="background-image: url('http://corporate.pluto.tv/wp-content/uploads/2016/05/Mobile-option2-600x339.png')"></div> <div class="imageBox-content imageBox-content--centered imageBox-content--no-side-padding imageBox-content--no-bottom-padding"> <h1 class="heading imageBox-title heading--xxs-alt heading--light-margin-top heading--light-margin">U.S. Mobile App</h1> <h2 class="heading heading--xxs imageBox-subtitle">75+ Channels</h2> <a class="button button--download" href="https://s3.amazonaws.com/pluto-website-user-downloads/pluto-channel-listing.pdf" target="_blank"><i class="icon icon--download"></i>Download Channel Guide</a> <div class="imageBox-buttons"> <a class="button button--simple button--img" href="https://itunes.apple.com/us/app/pluto-tv/id751712884" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-app-store.png" alt="App Store"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-app-store-hover-4.png" alt="App Store"> </span></a> <a class="button button--simple button--img" href="https://play.google.com/store/apps/details?id=tv.pluto.android&hl=en" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-google-play-off-1.png" alt="Google Play"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-google-play-over.png" alt="Google Play"> </span></a></div></div></article><!-- /.imageBox --></li> <li> <article class="imageBox imageBox--white imageBox--bordered"> <div class="imageBox-image imageBox-image--background ratioBox ratioBox--3-2 ratioBox--16-9" style="background-image: url('http://corporate.pluto.tv/wp-content/uploads/2016/05/WEB-PLAYER-600x339.png')"></div> <div class="imageBox-content imageBox-content--centered imageBox-content--no-side-padding imageBox-content--no-bottom-padding"> <h1 class="heading imageBox-title heading--xxs-alt heading--light-margin-top heading--light-margin">Watch on the Web</h1> <h2 class="heading heading--xxs imageBox-subtitle"> <br>75+ Channels</h2> <a class="button button--download" href="https://s3.amazonaws.com/pluto-website-user-downloads/pluto-channel-listing.pdf" target="_blank"><i class="icon icon--download"></i>Download Channel Guide</a> <div class="imageBox-buttons"> <a class="button button--simple button--img" href="http://pluto.tv/" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-watch-now-1.png" alt="Watch Now"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-watch-now-hover.png" alt="Watch Now"> </span></a> <a class="button button--simple button--img" href="" target="_blank"> <span></span></a></div></div></article><!-- /.imageBox --></li> <li> <article class="imageBox imageBox--white imageBox--bordered"> <div class="imageBox-image imageBox-image--background ratioBox ratioBox--3-2 ratioBox--16-9" style="background-image: url('http://corporate.pluto.tv/wp-content/uploads/2016/05/device-desktop-600x339.png')"></div> <div class="imageBox-content imageBox-content--centered imageBox-content--no-side-padding imageBox-content--no-bottom-padding"> <h1 class="heading imageBox-title heading--xxs-alt heading--light-margin-top heading--light-margin">International Desktop App</h1> <h2 class="heading heading--xxs imageBox-subtitle">Due to streaming rights, <br> channels may vary.</h2> <a class="button button--download" href="https://s3.amazonaws.com/pluto-website-user-downloads/pluto-channel-listing.pdf" target="_blank"><i class="icon icon--download"></i>Download Channel Guide</a> <div class="imageBox-buttons"> <a class="button button--simple button--img" href="http://on.pluto.tv/plutotv-pc" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/06/ic-windows-off.png" alt="Windows"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/06/ic-windows-over-1.png" alt="Windows"> </span></a> <a class="button button--simple button--img" href="http://on.pluto.tv/plutotv-mac" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-mac-off-8.png" alt="Mac"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-mac-over-6.png" alt="Mac"> </span></a></div></div></article><!-- /.imageBox --></li> <li> <article class="imageBox imageBox--white imageBox--bordered"> <div class="imageBox-image imageBox-image--background ratioBox ratioBox--3-2 ratioBox--16-9" style="background-image: url('http://corporate.pluto.tv/wp-content/uploads/2016/05/Mobile-option2-600x339.png')"></div> <div class="imageBox-content imageBox-content--centered imageBox-content--no-side-padding imageBox-content--no-bottom-padding"> <h1 class="heading imageBox-title heading--xxs-alt heading--light-margin-top heading--light-margin">International Mobile App</h1> <h2 class="heading heading--xxs imageBox-subtitle">Due to streaming rights, <br> channels may vary.</h2> <a class="button button--download" href="https://s3.amazonaws.com/pluto-website-user-downloads/pluto-channel-listing.pdf" target="_blank"><i class="icon icon--download"></i>Download Channel Guide</a> <div class="imageBox-buttons"> <a class="button button--simple button--img" href="https://itunes.apple.com/us/app/pluto-tv/id751712884" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-app-store.png" alt="App Store"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-app-store-hover-4.png" alt="App Store"> </span></a> <a class="button button--simple button--img" href="https://play.google.com/store/apps/details?id=tv.pluto.android&hl=en" target="_blank"> <span class="imageBox-buttons-images"> <img class="imageBox-buttons-img" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-google-play-off-1.png" alt="Google Play"> <img class="imageBox-buttons-img imageBox-buttons-img--rollover" src="http://corporate.pluto.tv/wp-content/uploads/2016/05/ic-google-play-over.png" alt="Google Play"> </span></a></div></div></article><!-- /.imageBox --></li> </ul></div><!-- /.container --></section>
@media (min-width: 1440px) {.section {padding: 60px 0;}} @media (min-width: 960px) {.section {padding: 50px 0;}} @media (min-width: 768px) {.section {padding: 35px 0;}} .section--gray {background-color: #F3F3F3;} .section {padding:35px 0;position: relative;} @media (min-width: 1440px) {.container {max-width: 1222px;}} @media (min-width: 960px) {.container {padding: 0 20px;}} .container {position: relative;padding: 0 6%;width: 100%;margin: 0 auto;} @media (min-width: 768px) {.grid--sm-2-sep-lg {margin-left: -1.5%;margin-right: -1.5%;}} .grid--xs-1-sep-lg {margin-left: -1.5%;margin-right: -1.5%;} .grid{display:flex;flex-wrap:wrap;} ul, ol {list-style: none;} @media (min-width: 768px) {.grid--sm-2-sep-lg.grid--spaced-bottom > * {margin-bottom: 3%!important;}} @media (min-width: 768px) {.grid--sm-2-sep-lg > * {width: 50%!important;padding: 0 1.5%!important;}} .grid--xs-1-sep-lg.grid--spaced-bottom > * {margin-bottom: 3%;} .grid--xs-1-sep-lg > * {width: 100%;padding: 0 1.5%;} .imageBox--bordered {border-radius: 4px;overflow: hidden;} .imageBox--white {background-color: #FFFFFF;} .imageBox{position:relative;} .imageBox-image--background {background-repeat: no-repeat;background-size: cover;background-position: center;} .ratioBox--16-9 {padding-top: 56.25%;} .ratioBox {display: block;position: relative;overflow: hidden;} .imageBox-content--no-side-padding {padding-left:0!important;padding-right:0!important;} .imageBox-content--no-bottom-padding {padding-bottom:0!important;} .imageBox-content--centered {text-align: center;} .imageBox-content {padding: 3%;} @media (min-width: 1440px) {.heading--xxs-alt {font-size: 28px;}} @media (min-width: 960px) {.heading--xxs-alt {font-size: 24px;}} @media (min-width: 768px) {.heading--xxs-alt {font-size: 17px;}} .heading--xxs-alt {font-weight: 900;font-size: 22px;} .heading--light-margin-top {margin-top: 15px;} .heading--light-margin {margin-bottom: 5px !important;} .heading {color: #000000;} .imageBox-subtitle {font-weight: 500;} @media (min-width: 1440px) {.heading--xxs {font-size: 22px;}} @media (min-width: 960px) {.heading--xxs {font-size: 19px;}} .heading--xxs {font-weight: 400;font-size: 17px;} @media (min-width: 1440px) {.button, .modal-done {font-size: 28px;padding: 20px 15px;}} @media (min-width: 960px) {.button, .modal-done {font-size: 20px;padding: 15px 15px;}} @media (min-width: 768px) {.button, .modal-done {font-size: 16px;padding: 10px 15px;}} .button--download {font-size: 15px !important;color: #3C3C3C;background-color: transparent;box-shadow: none;} .button, .modal-done {display: inline-block;outline: none;border-radius: 4px;font-weight: 500;text-align: center;white-space: nowrap;} a, button, [type="button"] {cursor: pointer;color: currentColor;text-decoration: none;} .button--download .icon {margin-right: 5px;} .icon {font-family: "icons";display: inline-block;vertical-align: middle;line-height: 1;font-weight: normal;font-style: normal;text-decoration: inherit;text-transform: none;} .icon--download::before {content: "\f106";} .imageBox-buttons {border-top: 1px solid #D8D8D8;display: flex;flex-wrap: wrap;position: relative;} .imageBox-buttons::before {content: '';display: block;position: absolute;width: 100%;height: 1px;bottom: 0;left: 0;background-color: #FFFFFF;z-index: 2;} .imageBox-buttons > :nth-of-type(2n+1) {border-right: 1px solid #D8D8D8;} .imageBox-buttons > * {width: 50%;color: #3C3C3C;font-weight: 300;border-bottom: 1px solid #D8D8D8;} @media (min-width: 1440px) {.button--simple {font-size: 20px !important;}} @media (min-width: 960px) {.button--simple {font-size: 18px !important;}} @media (min-width: 768px) {.button--simple {font-size: 14px !important;}} .button--simple {border-radius: 0;background-color: transparent;box-shadow: none;} .button--img {display: flex;align-items: center;justify-content: center;flex-wrap: nowrap;} .button span, .modal-done span {display: inline-block;vertical-align: middle;} .imageBox-buttons-images {position: relative;} .imageBox-buttons-img {transition: opacity 0.4s linear;} img {display: block;max-width: 100%;} .imageBox-buttons-img--rollover {opacity: 0;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76