Skip to content

Instantly share code, notes, and snippets.

@madshostrup

madshostrup/ZbQvKM.markdown

Last active September 15, 2015 15:12
Show Gist options
  • Save madshostrup/34a868e1850a8eeaad29 to your computer and use it in GitHub Desktop.
Save madshostrup/34a868e1850a8eeaad29 to your computer and use it in GitHub Desktop.
Download ZIP
ZbQvKM
Raw
index.html
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div id="inner-grid" class="row">
<div class="col-xs-1">
<div>1</div>
</div>
<div class="col-xs-1">
<div>2</div>
</div>
<div class="col-xs-1">
<div>3</div>
</div>
<div class="col-xs-1">
<div>4</div>
</div>
<div class="col-xs-1">
<div>5</div>
</div>
<div class="col-xs-1">
<div>6</div>
</div>
<div class="col-xs-1">
<div>7</div>
</div>
<div class="col-xs-1">
<div>8</div>
</div>
<div class="col-xs-1">
<div>9</div>
</div>
<div class="col-xs-1">
<div>10</div>
</div>
<div class="col-xs-1">
<div>11</div>
</div>
<div class="col-xs-1">
<div>12</div>
</div>
</div>
</div>
</div>
<div id="outer-grid" class="row">
<div class="col-xs-1">
<div>1</div>
</div>
<div class="col-xs-1">
<div>2</div>
</div>
<div class="col-xs-1">
<div>3</div>
</div>
<div class="col-xs-1">
<div>4</div>
</div>
<div class="col-xs-1">
<div>5</div>
</div>
<div class="col-xs-1">
<div>6</div>
</div>
<div class="col-xs-1">
<div>7</div>
</div>
<div class="col-xs-1">
<div>8</div>
</div>
<div class="col-xs-1">
<div>9</div>
</div>
<div class="col-xs-1">
<div>10</div>
</div>
<div class="col-xs-1">
<div>11</div>
</div>
<div class="col-xs-1">
<div>12</div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-sm-8 col-lg-6 col-xs-offset-1 col-sm-offset-2 col-lg-offset-3">
<div id="inner-grid" class="row">
<div class="col-xs-1">
<div>1</div>
</div>
<div class="col-xs-1">
<div>2</div>
</div>
<div class="col-xs-1">
<div>3</div>
</div>
<div class="col-xs-1">
<div>4</div>
</div>
<div class="col-xs-1">
<div>5</div>
</div>
<div class="col-xs-1">
<div>6</div>
</div>
<div class="col-xs-1">
<div>7</div>
</div>
<div class="col-xs-1">
<div>8</div>
</div>
<div class="col-xs-1">
<div>9</div>
</div>
<div class="col-xs-1">
<div>10</div>
</div>
<div class="col-xs-1">
<div>11</div>
</div>
<div class="col-xs-1">
<div>12</div>
</div>
</div>
</div>
</div>
</div>
</body>
Raw
style.css
body {
background-color: rgba(0,0,0,.05);
}
.container-fluid {
padding-left: 9px;
padding-right: 9px;
max-width: 1920px;
background-color: white;
}
.row {
margin-left: -6px;
margin-right: -6px;
.row {
margin-left: 0px;
margin-right: 0px;
[class*="col-"]:last-child {
padding-right: 0px;
}
[class*="col-"]:first-child {
padding-left: 0px;
}
}
}
#inner-grid > div > div {
background-color: #124061;
height: 50vh;
color: white;
text-align: center;
padding-top: 30px;
}
#outer-grid > div > div {
background-color: rgb(215, 233, 242);
height: 50vh;
text-align: center;
padding-top: 30px;
}
[class*="col-"] {
padding-left: 3px;
padding-right: 3px;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment