Skip to content

Instantly share code, notes, and snippets.

@dafma

dafma/HorizontalBootstrap3.html

Created August 16, 2017 17:51
Show Gist options
  • Save dafma/02efbd9a70e6f114846c96d4c0528581 to your computer and use it in GitHub Desktop.
Save dafma/02efbd9a70e6f114846c96d4c0528581 to your computer and use it in GitHub Desktop.
Download ZIP
HorizontalBootstrap3
Raw
HorizontalBootstrap3.html
<! DOCTYPE>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
/* The heart of the matter */
.testimonial-group > .row {
overflow-x: auto;
white-space: nowrap;
}
.testimonial-group > .row > .col-xs-4 {
display: inline-block;
float: none;
}
/* Decorations */
.col-xs-4 { color: #e9e9e9; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }
</style>
<style type="text/css">.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; }
.as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; }
.as-console-row { display: table-row; font-family: monospace; font-size: 13px; }
.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; }
.as-console-row + .as-console-row > * { border: 1px solid #ccc; }
.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; }
.as-console-error:before { content: 'Error: '; color: #f00; }
.as-console-assert:before { content: 'Assertion failed: '; color: #f00; }
.as-console-info:before { content: 'Info: '; color: #00f; }
.as-console-warning:before { content: 'Warning: '; color: #e90 }
@-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }
.col-xs-4 {
width: 5%;
}
</style>
</head>
<body>
<div class="testimonial-group">
<div class="row text-center">
<div class="col-xs-4">1</div><!--
--><div class="col-xs-4">2</div><!--
--><div class="col-xs-4">3</div><!--
--><div class="col-xs-4">4</div><!--
--><div class="col-xs-4">5</div><!--
--><div class="col-xs-4">6</div><!--
--><div class="col-xs-4">7</div><!--
--><div class="col-xs-4">8</div><!--
--><div class="col-xs-4">9</div>
<div class="col-xs-4">10</div>
<div class="col-xs-4">11</div>
<div class="col-xs-4">12</div>
<div class="col-xs-4">13</div>
<div class="col-xs-4">14</div>
<div class="col-xs-4">15</div>
<div class="col-xs-4">16</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">10</div>
<div class="col-xs-4">11</div>
<div class="col-xs-4">12</div>
<div class="col-xs-4">13</div>
<div class="col-xs-4">14</div>
<div class="col-xs-4">15</div>
<div class="col-xs-4">16</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">10</div>
<div class="col-xs-4">11</div>
<div class="col-xs-4">12</div>
<div class="col-xs-4">13</div>
<div class="col-xs-4">14</div>
<div class="col-xs-4">15</div>
<div class="col-xs-4">16</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">2</div>
</div>
</div>
<script type="text/javascript">
</script>
<div class="as-console-wrapper"><div class="as-console"></div></div></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment