How to create a footer using Bootstrap: tutorial and example
Bootstrap is one of the most used CSS frameworks for front-end implementation. This is due to offering a very large toolkit, coupled with a relatively low learning curve.
In this in-depth analysis we will see how to take advantage of Bootstrap to create a footer to be inserted into a web page.
Include the necessary tools
To create an HTML/CSS structure using Bootstrap 5, we can include CSS styles and Javascript scripts through the CDN services that are offered to us. To set up a Bootstrap development environment we can therefore write the following:
We have also included jQuery and Popper.js dependencies in this template .
The Bootstrap grid
Keeping in mind our goal of building a footer through Bootstrap, we must therefore be aware of how the sectioning system offered by the latter works.
Bootstrap, as well as the vast majority of CSS/front-end frameworks, uses a sectioning of the page in a sort of " grid ", i.e. a structure formed by sections called "rows" , each of which is respectively composed of sections called "columns" ( cols ).
The div with id first has the Bootstrap class row, which makes it a row containing columns. Its div child elements instead have the Bootstrap class col, which otherwise makes them sections of the line. In this case, using a generic col, we tell Bootstrap to play the right widths for every column on every device type.
One of the fundamental differences between version 3 and version 4 of Boostrap is that the latter uses the Flexbox technology instead of the floating engine, with all the consequences of the case, including the automatic recalculation of the widths of the elements.
We can also use the many variants of the classes col, which allow us to explicitly determine how many "spaces" a given column must cover (keeping in mind that Bootstrap's slicing always defines rows of 12 columns) and on which types of devices it must do so. We can also produce responsive columns that behave differently depending on the size of the device:
In this case we tell Boostrap that if the user is using a large device ( identified by the classes col-lg-*) the columns must be divided according to the 4-4-2-2 scheme (for a total of 12), while if he is using a device of medium dimensions (identified by the classes col-md-*) the columns will be distributed with the dimensions 2-4-4-2. We can also use the small , extra-small and extra-large variants , bearing in mind that the smaller the dimensions chosen, the more the settings will scale in ascending order.
In our case, going beyond the medium dimensions towards smaller dimensions, the columns will be generated covering all the available dimension.
Footer
At this point we can use the notions derived from this brief review to generate our footer. A "footer", the footer element in an HTML layout , usually consists of general information about the page, such as copyright, author information or legal information.
Let's see how we can create a footer in a few minutes using Bootstrap:
Our footer is an element row, composed of a single element colthat covers all the available space, positioned and anchored at the bottom of the page thanks to the class fixed-bottom, with centered text thanks to the class text-center. With the id selector we then go on to define additional styles. In this case the footer is limited to presenting a simple line of text.
Building an advanced footer
The footer element is by no means an element of little importance within a modern layout. On the contrary, it receives a lot of emphasis, and can contain even very complex controls. Its role in terms of user experience is not secondary, and for this reason it is important to build it and use it to the fullest.
So let's define a more advanced footer than the previous one: a layout that contains 2 columns (4 and 8), whose second column contains a further 3 columns (4, 4, 4).
So we have an element rowwhich contains 2 col, one of which contains a further element rowwhich itself contains 3 elements col. We can graft the structures to our liking.
In the first column, in addition to the header relating to copyright, we will place a form that allows the user to subscribe to the newsletter by entering his name and e-mail address. In our case we have stylized the form using the special classes offered by Bootstrap.
In the right sub-columns we will insert 2 descriptions (which in our case will be produced through the text "Lorem Ipsum") and a collection of images.
All footer columns will scale to the size of the device when the width of the latter reaches the appropriate value:
As we can see, we have expanded our previous very simple single-line footer, producing a more complex structure.
Obviously, since the footer is a section made up of HTML elements, we have no limits in terms of creativity. For example, we can add controls to carry out the most varied operations, such as entering data via forms, or producing Lightbox modal windows when the user clicks on the list of images inserted in the last column.
Note that if you are using a jQuery script, to work with elements you need to place the script as the last element of the body, or use an event handler (when the script is placed in the head) which waits for the DOM to load completely. For example:
$(document).ready(function() {
// work with HTML elements
});
As an example, let's create a simple jQuery control hooked to the footer. When the user clicks on divthe images on the right, they take on a red background color and become half opaque (excellent effect for real images), while when the user clicks later, the aforementioned effect disappears. To do this we create in the CSS a class called highlight:
At this point our footer has gained an interactivity check.
Conclusions
As we have seen, creating a component of a layout with Boostrap is a truly immediate task, which offers many advantages: immediacy in the creation thanks to the 12-column grid, implicit and explicit controls on responsiveness and cross-browser capability ( determined by version 4 specifications) on all.
EN 
Español - ES 
Français - FR 
