HTML
xxxxxxxxxx1
<div class="container my-4">2
<p>3
<strong>A footer is an additional navigation component. It can hold links, buttons, company info, copyrights,4
forms, and many other elements.</strong>5
</p>6
7
<p>8
Detailed documentation and more examples you can find in our9
<a href="https://mdbootstrap.com/docs/standard/navigation/footer/" target="_blank"><strong>Bootstrap Footer10
Docs</strong></a>11
</p>12
13
<hr />14
15
<p><strong>Basic example</strong></p>16
17
<p>A basic example of the simple footer with text, links and copyright section.</p>18
19
<p>20
The background color is set via CSS class <code>.bg-light</code>. You can set your own color21
choosing from <a href="/docs/standard/content-styles/colors/">MDB color palette</a> or by22
setting a completely custom color via inline CSS, for example23
<code>style="background-color: #9933CC;"</code>24
</p>25
26
<p>27
We put a mask on the copyrights section using RGBA code to outstand it. You can change the28
intensity of its color by manipulating the last value in the RGBA code.29
</p>30
31
<div class="border p-5 mb-5">32
<!-- Copy this code to have a working example -->33
<!-- Footer -->34
<footer class="bg-light text-center text-lg-start">35
<!-- Grid container -->36
<div class="container p-4">37
<!--Grid row-->38
<div class="row">39
<!--Grid column-->40
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">41
<h5 class="text-uppercase">Footer Content</h5>42
43
<p>44
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis45
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam46
voluptatem veniam, est atque cumque eum delectus sint!47
</p>48
</div>49
<!--Grid column-->50
51
<!--Grid column-->52
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">53
<h5 class="text-uppercase">Links</h5>54
55
<ul class="list-unstyled mb-0">56
<li>57
<a href="#!" class="text-dark">Link 1</a>58
</li>59
<li>60
<a href="#!" class="text-dark">Link 2</a>61
</li>62
<li>63
<a href="#!" class="text-dark">Link 3</a>64
</li>65
<li>66
<a href="#!" class="text-dark">Link 4</a>67
</li>68
</ul>69
</div>70
<!--Grid column-->71
72
<!--Grid column-->73
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">74
<h5 class="text-uppercase mb-0">Links</h5>75
76
<ul class="list-unstyled">77
<li>78
<a href="#!" class="text-dark">Link 1</a>79
</li>80
<li>81
<a href="#!" class="text-dark">Link 2</a>82
</li>83
<li>84
<a href="#!" class="text-dark">Link 3</a>85
</li>86
<li>87
<a href="#!" class="text-dark">Link 4</a>88
</li>89
</ul>90
</div>91
<!--Grid column-->92
</div>93
<!--Grid row-->94
</div>95
<!-- Grid container -->96
97
<!-- Copyright -->98
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">99
© 2020 Copyright:100
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>101
</div>102
<!-- Copyright -->103
</footer>104
<!-- Footer -->105
<!--/ Copy this code to have a working example -->106
</div>107
108
<div class="border p-5">109
<!-- Copy this code to have a working example -->110
<footer class="bg-primary text-white text-center text-lg-start">111
<!-- Grid container -->112
<div class="container p-4">113
<!--Grid row-->114
<div class="row">115
<!--Grid column-->116
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">117
<h5 class="text-uppercase">Footer Content</h5>118
119
<p>120
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis121
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam122
voluptatem veniam, est atque cumque eum delectus sint!123
</p>124
</div>125
<!--Grid column-->126
127
<!--Grid column-->128
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">129
<h5 class="text-uppercase">Links</h5>130
131
<ul class="list-unstyled mb-0">132
<li>133
<a href="#!" class="text-white">Link 1</a>134
</li>135
<li>136
<a href="#!" class="text-white">Link 2</a>137
</li>138
<li>139
<a href="#!" class="text-white">Link 3</a>140
</li>141
<li>142
<a href="#!" class="text-white">Link 4</a>143
</li>144
</ul>145
</div>146
<!--Grid column-->147
148
<!--Grid column-->149
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">150
<h5 class="text-uppercase mb-0">Links</h5>151
152
<ul class="list-unstyled">153
<li>154
<a href="#!" class="text-white">Link 1</a>155
</li>156
<li>157
<a href="#!" class="text-white">Link 2</a>158
</li>159
<li>160
<a href="#!" class="text-white">Link 3</a>161
</li>162
<li>163
<a href="#!" class="text-white">Link 4</a>164
</li>165
</ul>166
</div>167
<!--Grid column-->168
</div>169
<!--Grid row-->170
</div>171
<!-- Grid container -->172
173
<!-- Copyright -->174
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">175
© 2020 Copyright:176
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>177
</div>178
<!-- Copyright -->179
</footer>180
<!--/ Copy this code to have a working example -->181
</div>182
</div>CSS
1
1
JS
1
1
Console errors: 0