Skip to content

Instantly share code, notes, and snippets.

@moiz-frost
Forked from easydevtuts/grid.html
Created August 10, 2017 16:58
Show Gist options
  • Save moiz-frost/256ab3f4f510610001caeb10a56854ae to your computer and use it in GitHub Desktop.
Save moiz-frost/256ab3f4f510610001caeb10a56854ae to your computer and use it in GitHub Desktop.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3.0 Grid System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
body{
background-color: black;
}
.col-xs-12{
height: 100px;
background-color: blue;
color: white;
text-align: center;
}
.col-xs-6{
height: 100px;
background-color: yellow;
color: black;
text-align: center;
border: 2px solid black;
}
.col-xs-4{
height: 100px;
background-color: green;
color: white;
text-align: center;
border: 2px solid black;
}
.col-xs-8{
height: 100px;
background-color: red;
color: black;
text-align: center;
border: 2px solid black;
}
.footer .col-sm-4{
height: 100px;
background-color: purple;
color: white;
text-align: center;
border: 2px solid black;
}
</style>
</head>
<body>
<!-- Grid Classes:
.container: wrapper for all your rows
.row: contains all your column classes
.col-##-##: the sizes of the columns in your row (xs,sm,md,lg)
Ordering Classes (only for md & lg screens):
.col-##-push-##: Pushes your columns
.col-##-pull-##: Pulls your columns
Offset Class (only for md & lg screens):
.col-##-offset-##: moves your columns depending what the column is offset by
Responsive Utility Classes: They hide and show content on your screen depending on which you device style for.
.visible-##: Your content will only be visible on that screen size.
.hidden-##: Your content will only be hidden on that screen size.
-->
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="visible-xs">Extra small screens</h1>
<h1 class="visible-sm">Small screens</h1>
<h1 class="visible-md">Medium Screen</h1>
<h1 class="visible-lg">Large screens</h1>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-4">
.col-xs-6
</div>
<div class="col-xs-6 col-lg-8">
.col-xs-8
</div>
</div>
<div class="row hidden-xs">
<div class="col-sm-6">
<div class="row">
<div class="col-xs-4">
col-xs-4
</div>
<div class="col-xs-8">
col-xs-8
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-xs-4 col-md-push-8">
col-xs-4
</div>
<div class="col-xs-8 col-md-pull-4">
col-xs-8
</div>
</div>
</div>
</div>
<div class="row footer">
<div class="col-sm-4">
col-sm-4
</div>
<div class="col-sm-4">
col-sm-4
</div>
<div class="col-sm-4">
col-sm-4
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-8 panel">
Find easydevtuts on social media
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment