"Test Mobile"
Bootstrap 3.3.0 Snippet by sparkktv

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%);}

Related: See More

Light Bootstrap Dashboard React
BS4 Login, Register FORM + Mobile
Mobile Nav Bar
Mobile-Friendly API Documentation

Questions / Comments: