Open Menu dzosoft
Close Menu dzosoft

   ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY


                             




Release your testosterone and observe the extreme increase in muscle mass.

Publish perfectly-optimized content in 1-click









 
 
 

How to create a footer using Bootstrap: tutorial and example

 
 
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Footer using Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css" 
integrity="sha512-N415hCJJdJx+1UBfULt+i+ihvOn42V/kOjOpp1UTh4CZ70Hx5bDlKryWaqEKfY/8EYOu/C2MuyaluJryK1Lb5Q==" crossorigin="anonymous" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<style>
#first div:nth-child(1) {background: #0077ff;}
#first div:nth-child(2) {background: #8FA6F0;}
#first div:nth-child(3) {background: #294680;}
#first div:nth-child(4) {background: #819CD1;}
</style>
</head>
<body>
<div id="first" class="row">
<div class="col">col 1</div>
<div class="col">col 2</div>
<div class="col">col 3</div>
<div class="col">col 4</div>
</div>
</body>
</html>

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 ).
Let's look at a simple basic example:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Footer using Bootstrap</title>

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css" integrity="sha512-N415hCJJdJx+1UBfULt+i+ihvOn42V/kOjOpp1UTh4CZ70Hx5bDlKryWaqEKfY/8EYOu/C2MuyaluJryK1Lb5Q==" crossorigin="anonymous" /> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<style> #first div:nth-child(1) {background: #0077ff;} #first div:nth-child(2) {background: #8FA6F0;} #first div:nth-child(3) {background: #fff;} #first div:nth-child(4) {background: #000;} </style> </head> <body>
<div id="first" class="row"> <div class="col">col 1</div> <div class="col">col 2</div> <div class="col">col 3</div> <div class="col">col 4</div> </div>
</body> </html>


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:

<div id="first" class="row">
<div class="col-md-2 col-lg-4">col 1</div>
<div class="col-md-4 col-lg-4">col 2</div>
<div class="col-md-4 col-lg-2">col 3</div>
<div class="col-md-2 col-lg-2">col 4</div>
</div>


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:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Footer using Bootstrap</title>

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css" integrity="sha512-N415hCJJdJx+1UBfULt+i+ihvOn42V/kOjOpp1UTh4CZ70Hx5bDlKryWaqEKfY/8EYOu/C2MuyaluJryK1Lb5Q==" crossorigin="anonymous" /> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<style> #bottom {background: #8FA6F0; color: white;} </style> </head> <body>
<footer id="bottom" class="row text-center fixed-bottom"> <div class="col-12"> Copyright © 2023 </div> </div>
</body> </html>


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:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Footer using Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css" 
integrity="sha512-N415hCJJdJx+1UBfULt+i+ihvOn42V/kOjOpp1UTh4CZ70Hx5bDlKryWaqEKfY/8EYOu/C2MuyaluJryK1Lb5Q==" crossorigin="anonymous" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

<style> #main {min-height: 600px; background-color: #fff;} #bottom {background-color: #8FA6F0; color: fff;} div.img {border: 2px solid white; float: left; margin: 20px; width: 403px; height: 236px;} img{width: 400px;cursor:pointer;}
div.highlight{background-color: white; opacity: 0.5;}
</style> <script> $('div.img').click(function() { var $this = $(this); $this.toggleClass('highlight'); }); }); </script> </head> <body> <div id="main"></div> <footer id="bottom" class="row text-left p-4"> <div class="col-12 col-md-4"> <h6>Copyright © ...</h6> <form> <div class="form-group"> <label for="inputEmail">Email</label> <input type="email" class="form-control" id="inputEmail" placeholder="email"> </div> <div class="form-group"> <label for="inputPassword">Password</label> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> <br> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <div class="col-12 col-md-8"> <h2>Information</h2> <div class="row"> <div class="col-12 col-md-4"> some text ... </div> <div class="col-12 col-md-4"> <h2></h2> <div class="img"><img src="aircraft-63028_640.jpg"/></div> <div class="img"><img src="plane-2655519_640.png"/></div> </div> </div> </div> </div> </body> </html>


 

Desktop-wide composite footer

 
 
How to create a footer using Bootstrap: tutorial and example
 
 

Floating-width composite footer

 
 
How to create a footer using Bootstrap: tutorial and example
 
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:

div.highlight{background-color: #fff; opacity: 0.5;}


This class will be added and removed through the toggleClassjQuery method:
$(document).ready(function() {
    $('div.img').click(function() {
       var $this = $(this);
       $this.toggleClass('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.


download the example

It might also interest you


How can we do animations with only CSS

How to create horizontal menu in CSS

How to create menu with css and javascript

How do you make a border radius round in CSS?

How to create sign up form with HTML and CSS

How To make a responsive website

How to create GLITCH effect with CSS

How to change the style of the scrollbars

How to create a Focus effect on hover using CSS


Leave comment
          

Save nickname and email in this browser for the next time.



Loading...     
close publicity
Release your testosterone and observe the extreme increase in muscle mass.