xxxxxxxxxx1
<div class="container my-4">2
<p>3
<strong>HTML grid built Bootstrap is a powerful system for building mobile-first layouts. It's a very extensive tool with a great number of options. Below we present you basic examples of grid usage.</strong>4
</p>5
6
<p>7
Detailed documentation and more examples you can find in our8
<a href="https://mdbootstrap.com/docs/standard/layout/grid/" target="_blank"><strong>Grid9
Docs</strong></a>10
</p>11
12
<hr />13
14
<p class="font-weight-bold">Basic example</p>15
16
<p>17
Basic example with 3 equal responsive columns18
</p>19
20
<!-- Additional styles for demo purpose -->21
<style>22
.col-example {23
border: 1px solid #eee;24
padding: 10px;25
background-color: #33b5e5;26
color: #fff;27
}28
</style>29
<div class="border p-5 text-center">30
<!-- Copy this code to have a working example -->31
<div class="container">32
<div class="row">33
<div class="col-md col-example">One of three columns</div>34
<div class="col-md col-example">One of three columns</div>35
<div class="col-md col-example">One of three columns</div>36
</div>37
</div>38
<!--/ Copy this code to have a working example -->39
</div>40
41
<hr class="my-5">42
43
<p class="font-weight-bold">Three unequal columns</p>44
<div class="border p-5 text-center">45
<!-- Copy this code to have a working example -->46
<div class="container">47
<div class="row">48
<div class="col-md-3 col-example">.col-md-3</div>49
<div class="col-md-6 col-example">.col-md-6</div>50
<div class="col-md-3 col-example">.col-md-3</div>51
</div>52
</div>53
<!--/ Copy this code to have a working example -->54
</div>55
56
<hr class="my-5">57
58
<p class="font-weight-bold">Two columns</p>59
<div class="border p-5 text-center">60
<!-- Copy this code to have a working example -->61
<div class="container">62
<div class="row">63
<div class="col-md-8 col-example">.col-md-8</div>64
<div class="col-md-4 col-example">.col-md-4</div>65
</div>66
</div>67
<!--/ Copy this code to have a working example -->68
</div>69
70
<hr class="my-5">71
72
<p class="font-weight-bold">Two columns with two nested columns</p>73
<div class="border p-5 text-center">74
<!-- Copy this code to have a working example -->75
<div class="container">76
<div class="row">77
<div class="col-md-8 col-example">78
<div class="pb-3">.col-md-8</div>79
<div class="row">80
<div class="col-md-6 col-example">.col-md-6</div>81
<div class="col-md-6 col-example">.col-md-6</div>82
</div>83
</div>84
<div class="col-md-4 col-example">.col-md-4</div>85
</div>86
</div>87
<!--/ Copy this code to have a working example -->88
</div>89
</div>1
1
1
1
Console errors: 0