"Test Mobile"
Bootstrap 3.3.0 Snippet by sparkktv

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Bootstrap Wizard
BS4 Login, Register FORM + Mobile
Mobile Nav Bar
Mobile-Friendly API Documentation

Questions / Comments: