How to create Bootstrap footer?

There is no built-in component for creating the fixed/sticky or simple footer like forms, buttons, tooltips, popovers etc. However, by using a few CSS styles/properties you may create fixed or static footer easily.

You may include other components in the footer with a few line of codes.

In this article, I am going to show you a few footer templates based on Bootstrap 4 framework that you may use in your Bootstrap projects.

The example of fixed/sticky footer

You simply need to use the <footer> tag after all other content where you require to refer the .footer class shown below. It will create a sticky footer that remains fixed even vertical scroll bar appears. Have a look at the demo and code online:

See online demo and code

The style for the footer:

<style>

.footer {

position: fixed;

bottom: 0;

width: 100%;

height: 55px;

background-color: #DFDFDF;

}

</style>

The markup used for the footer:

<p>© Company Name | Privacy Policy | Terms of Service</p>

</div>

</footer>

In the CSS code, you can see the position is used as fixed. That makes the footer fixed as you scroll down the page.

Tweaking a little for centered text and linear background

This sticky footer is centered text and uses padding for lowering the text along with changing the background a bit. For that, a linear background is added along with other properties to stand out the fixed footer. Have a look:

See online demo and code

Only this style is changed then the above example:

<style>

.footer {

position: fixed;

height: 55px;

bottom: 0;

color:#fff;

padding-top:20px;

width: 100%;

background: #00003E;

background: -webkit-linear-gradient(to right, #31BDE6, #00003E);

background: linear-gradient(to right, #31BDE6, #00003E);

text-align:center;

}

</style>

A large size static footer example

You may use this large footer menu in Bootstrap if the footer is supposed to contain many links. For example, for services like hosting, an e-commerce store or any other website, the footer may require presenting a good number of link or information that goes across the site. Have a look at the demo and code of CSS and HTML:

See online demo and code

Note: The demo may look cluttered in the example page. However, if you just copy/paste the code in your own editor and run in your system, it should work fine – as shown in above graphics.

The Style for this footer:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

<style>

.full {

width: 100%;

}

.footer {

height: auto;

padding-bottom: 30px;

position: relative;

width: 100%;

color:#fff;

border-bottom: 1px solid #CCCCCC;

border-top: 1px solid #DDDDDD;

background: #00003E;

background: -webkit-linear-gradient(to right, #31BDE6, #00003E);

background: linear-gradient(to right, #31BDE6, #00003E);

}

.footer h3 {

border-bottom: 1px solid #BAC1C8;

color:#fff;

font-size: 18px;

font-weight: 600;

line-height: 27px;

padding: 40px 0 10px;

text-transform: uppercase;

}

.footer ul {

font-size: 13px;

list-style-type: none;

margin-left: 0;

padding-left: 0;

margin-top: 15px;

color: #7F8C8D;

}

.footer ul li a {

padding: 0 0 5px 0;

display: block;

}

.footer a {

color: #78828D;

color:#fff;

}

.supportLi h4 {

font-size: 20px;

font-weight: lighter;

line-height: normal;

margin-bottom: 0 !important;

padding-bottom: 0;

}

.subscribe-btn .btn {

border: medium none;

border-radius: 4px;

display: inline-block;

height: 40px;

padding: 0;

width: 100%;

color: #fff;

margin-top:10px;

}

.subscribe-btn {

overflow: hidden;

}

.social li {

border: 2px solid #B5B5B5;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-o-border-radius: 50%;

-ms-border-radius: 50%;

border-radius: 50%;

float: left;

height: 36px;

line-height: 36px;

margin: 0 8px 0 0;

padding: 0;

text-align: center;

width: 36px;

transition: all 0.5s ease 0s;

-moz-transition: all 0.5s ease 0s;

-webkit-transition: all 0.5s ease 0s;

-ms-transition: all 0.5s ease 0s;

-o-transition: all 0.5s ease 0s;

}

.social li a {

color: #EDEFF1;

}

.social li:hover {

border: 2px solid #2c3e50;

background: #2c3e50;

}

.social li a i {

font-size: 16px;

margin: 0 0 0 5px;

color: #EDEFF1 !important;

}

.footer-bottom {

background: #40E0D0;

background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);

background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);

border-top: 1px solid #DDDDDD;

padding-top: 20px;

padding-bottom: 40px;

color:#fff;

}

.footer-bottom p.pull-left {

padding-top: 6px;

}

.payments {

font-size: 1.5em;

}

</style>

The markup of footer section only:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

<h3> Specials</h3>

<ul>

<li> <a href="#"> Product 1</a> </li>

<li> <a href="#"> Product 1 </a> </li>

<li> <a href="#"> Product 3 </a> </li>

<li> <a href="#"> Product 4 </a> </li>

<li> <a href="#"> Product 5 </a> </li>

</ul>

</div>

<h3> Services </h3>

<ul>

<li> <a href="#"> Services 1 </a> </li>

<li> <a href="#"> Services 2 </a> </li>

<li> <a href="#"> Services 3 </a> </li>

<li> <a href="#"> Services 4 </a> </li>

<li> <a href="#"> Services 5 </a> </li>

</ul>

</div>

<h3> About </h3>

<ul>

<li> <a href="#"> Our Company </a> </li>

<li> <a href="#"> About Us </a> </li>

<li> <a href="#"> Terms of Services </a> </li>

</ul>

</div>

<h3> Contact </h3>

<ul>

<li> <a href="#"> Contact Marketing </a> </li>

<li> <a href="#"> Contact Sales </a> </li>

<li> <a href="#"> Contact HR </a> </li>

<li> <a href="#"> Contact Admin </a> </li>

</ul>

</div>

<h3> Subscribe Us </h3>

<ul>

<li>

<button class="btn btn-success" type="button"> Subscribe <i class="fa fa-save"> </i> </button>

</div>

</li>

</ul>

</ul>

</div>

</div>

</div>

<li>We Accept: </li>

</ul>

</div>

</footer>

The upper markup is only for showing some content with the footer.

Large footer style number 2

The markup and most of the CSS is same for this footer template as in above example. I just changed the linear background colors for both footer classes along with button style, payment option icons size etc. Have a look:

See online demo and code

The CSS:

.footer {

height: auto;

padding-bottom: 30px;

position: relative;

width: 100%;

color:#fff;

border-bottom: 1px solid #CCCCCC;

border-top: 1px solid #DDDDDD;

background: #182765;

background: -webkit-linear-gradient(to right, #FDBD37, #B92020, #182765);

background: linear-gradient(to right, #FDBD37, #B92020, #182765);

}

And

.footer-bottom {

background: #d9a7c7;

background: -webkit-linear-gradient(to right, #fffcdc, #d9a7c7);

background: linear-gradient(to right, #fffcdc, #d9a7c7);

border-top: 1px solid #DDDDDD;

padding-top: 20px;

padding-bottom: 40px;

color:#000;

}

See the complete code on the demo page.

The example of fixed/sticky footer

See online demo and code

Tweaking a little for centered text and linear background

See online demo and code

A large size static footer example

See online demo and code

Large footer style number 2

See online demo and code

Related Tutorials: