Skip to content

Instantly share code, notes, and snippets.

@MkLHX
Last active September 13, 2016 09:32
Show Gist options
  • Save MkLHX/1e1d65313073dc371104c1d8e1bd2fc7 to your computer and use it in GitHub Desktop.
Save MkLHX/1e1d65313073dc371104c1d8e1bd2fc7 to your computer and use it in GitHub Desktop.
Quête BootStrap
@media (max-width: 767px) {
.green{
background-color: green;
min-height: 30px;
}
}
@media (min-width: 768px) {
.green{
background-color: green;
min-height: 60px;
}
}
@media (min-width: 992px) {
.green{
background-color: green;
min-height: 80px;
}
}
@media (min-width: 1200px) {
.green{
background-color: green;
min-height: 100px;
}
}
<!DOCTYPE html>
<html lang=fr>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="custom.css"/>
<script src="jquery-3.1.0.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>SPACE INVADER</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="green col-xs-1 col-sm-1 col-lg-1 col-xs-offset-2 col-sm-offset-2 col-lg-offset-2"></div><div class="green col-xs-1 col-sm-1 col-lg-1 col-xs-offset-5 col-sm-offset-5 col-lg-offset-5"></div>
</div>
<div class="row">
<div class="green col-xs-1 col-sm-1 col-lg-1 col-xs-offset-3 col-sm-offset-3 col-lg-offset-3"></div><div class="green col-xs-1 col-sm-1 col-lg-1 col-xs-offset-3 col-sm-offset-3 col-lg-offset-3"></div>
</div>
<div class="row">
<div class="green col-xs-7 col-sm-7 col-lg-7 col-xs-offset-2 col-sm-offset-2 col-lg-offset-2"></div>
</div>
<div class="row">
<div class="green col-xs-2 col-sm-2 col-lg-2 col-xs-offset-1 col-sm-offset-1 col-lg-offset-1"></div><div class="green col-xs-3 col-sm-3 col-lg-3 col-xs-offset-1 col-sm-offset-1 col-lg-offset-1"></div><div class="green col-xs-2 col-sm-2 col-lg-2 col-xs-offset-1 col-sm-offset-1 col-lg-offset-1"></div>
</div>
<div class="row">
<div class="green col-xs-11 col-sm-11 col-lg-11"></div>
</div>
<div class="row">
<div class="green col-xs-1 col-sm-1 col-lg-1"></div><div class="green col-xs-7 col-sm-7 col-lg-7 col-xs-offset-1 col-sm-offset-1 col-lg-offset-1"></div><div class="green col-xs-1 col-sm-1 col-lg-1 col-xs-offset-1 col-sm-offset-1 col-lg-offset-1"></div>
</div>
<div class="row">
<div class="green col-xs-1 col-sm-1 col-lg-1"></div><div class="green col-xs-1 col-sm-1 col-lg-1 col-xs-offset-1 col-sm-offset-1 col-lg-offset-1"></div><div class="green col-xs-1 col-sm-1 col-lg-1 col-xs-offset-5 col-sm-offset-5 col-lg-offset-5"></div><div class="green col-xs-1 col-sm-1 col-lg-1 col-xs-offset-1 col-sm-offset-1 col-lg-offset-1"></div>
</div>
<div class="row">
<div class="green col-xs-2 col-sm-2 col-lg-2 col-xs-offset-3 col-sm-offset-3 col-lg-offset-3"></div><div class="green col-xs-2 col-sm-2 col-lg-2 col-xs-offset-1 col-sm-offset-1 col-lg-offset-1"></div>
</div>
</div>
</body>
</html
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment