"Bootstrap 4 - Grid System Guide"
Bootstrap 4.1.1 Snippet by detrans

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<!-- GRID SYSTEM - HTML -->
<!-- Grid System: Settings -->
<div class="grid-settings">
<div class="card">
<div class="card-header">Grid System Settings</div>
<div class="card-body">
<p class="card-text mb-2">Grid options:</p>
<a href="#" id="show-grid" class="btn btn-block btn-sm btn-danger mb-0" type="submit">Hide Grid</a>
<a href="#" id="show-gutters" class="btn btn-block btn-sm btn-danger mb-2">Remove Gutter</a>
<a href="#" id="grid-theme" class="btn btn-block btn-sm btn-dark mb-2">Grid Dark</a>
<p class="card-text mb-2">Container option:</p>
<a href="#" id="change-container" class="btn btn-block btn-sm btn-primary mb-2" type="submit">Container Size</a>
</div>
</div>
</div>
<!-- Grid System: Grids -->
<div class="container grid-system">
<div class="row">
<div class="col-1">
<div class="col-div">1</div>
</div>
<div class="col-1">
<div class="col-div">2</div>
</div>
<div class="col-1">
<div class="col-div">3</div>
</div>
<div class="col-1">
<div class="col-div">4</div>
</div>
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
/* GRID SYSTEM - CSS */
/* Grid System: Settings */
.grid-settings {
position: fixed;
width: 200px;
top: 80px;
right: 20px;
z-index: 9999;
}
/* Grid System: Grids */
.grid-system {
text-align: center;
position: fixed;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
height: 100vh;
z-index: 1;
visibility: visible;
}
.grid-system div[class^="col-"] {
border-left: 1px dotted rgba(0, 0, 0, 0.2);
height: 100vh;
}
.grid-system div[class^="col-"]:last-child {
border-right: 1px dotted rgba(0, 0, 0, 0.2);
}
.grid-system .col-div {
background-color: rgba(0, 0, 0, 0.025);
border: none !important;
padding-top: 15px;
color: rgba(0, 0, 0, 0.3);
}
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
/* GRID SYSTEM - JS */
// Show - Hide Grid
$( '#show-grid' ).click(function() {
$( ".grid-system" ).toggleClass( "invisible" );
$( this ).toggleClass( "btn-danger" ).addClass( "btn-success" );
$(this).text(function(i, text){
return text === "Show Grid" ? "Hide Grid" : "Show Grid";
})
});
// Add - Remove Gutters
$( '#show-gutters' ).click(function() {
$( this ).toggleClass( "btn-danger" ).addClass( "btn-success" );
if ($( ".row" ).hasClass( "no-gutters" ) == true) {
$( ".row" ).removeClass( "no-gutters" );
$( this ).html( "Remove Gutter" );
}
else if ($( ".row" ).hasClass( "no-gutters" ) == false) {
$( ".row" ).addClass( "no-gutters" );
$( this ).html( "Add Gutter" );
}
});
// Dark - Light Grid Theme
$( '#grid-theme' ).click(function() {
$( ".grid-system" ).toggleClass( "light" );
// THESE LINES ARE:
$( ".navbar" ).toggleClass( "bg-dark" );
$( ".navbar" ).toggleClass( "navbar-dark" );
$( ".jumbotron" ).toggleClass( "bg-dark" );
$( "body" ).toggleClass( "bg-dark" );
// FOR DEMO PURPOSES ONLY!
$( this ).toggleClass( "btn-dark" ).addClass( "btn-light" );
$(this).text(function(i, text){
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Bootstrap Wizard
Pinterest-like Responsive Grid
Grid Columns Divider
Bootstrap Editable jQuery Grid

Questions / Comments: