How to Create a Bootstrap 4 Footer that is Perfectly Centered

Struggling to grasp Bootstrap 4 specifically, I am focusing on learning how to center my footer, which consists of 2 rows.

Despite my efforts, I can't seem to get the entire footer centered properly.

Below is the current HTML code I am working with:

<section class="block-follow-us">
    <div class="container">
        <div class="row align-items-center justify-content-center">
            <div class="col-4 col-md-1 px-0">
                <span class="h5">Follow us:</span>
            </div>
            <div class="offset-1 col-10 offset-md-0 col-md-3 px-0">
                <a href="https://twitter.com/ApolloSciUK?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" class="fab fa-twitter-square"></a>
                <a href="https://www.linkedin.com/company/apollo-scientific-ltd" target="_blank" class="fab fa-linkedin"></a>
                <a href="https://www.instagram.com/apolloscientific/?hl=en" target="_blank" class="fab fa-instagram"></a>
                <a href="https://www.facebook.com/pages/Apollo-Scientific-Ltd/158179738244405?rf=174620749220860" target="_blank" class="fab fa-facebook-square"></a>
            </div>
        </div>
    </div>
</section>

<footer class="footer">
    <div class="container-fluid">
        <div class="row text-center">
            <div class="col-12">© 2019 - Apollo Scientific Ltd</div>
        </div>
        <div class="row justify-content-center text-center">
            <div class="col-12 col-md-2">
                <a href="/">Terms and conditions</a>
            </div>                        
            <div class="col-12 col-md-2">
                <a href="/">Privacy policy</a>
            </div>                        
            <div class="col-12 col-md-1">
                <a href="/">Careers</a>
            </div>
        </div>
    </div>        
</footer>

On desktop, the layout looks distorted despite my efforts to fix it for hours.

https://i.sstatic.net/H933f.png

However, the mobile view appears to be fine.

https://i.sstatic.net/K28bB.png

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

<section class="block-follow-us">
 <div class="container">
   <div class="row align-items-center justify-content-center">
     <div class="col-lg-12 col-md-12 text-center">
      <span class="h5">Stay connected:</span>
       <a href="https://twitter.com/ApolloSciUK?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" class="fab fa-twitter-square">Link1</a>
       <a href="https://www.linkedin.com/company/apollo-scientific-ltd" target="_blank" class="fab fa-linkedin">Link2</a>
       <a href="https://www.instagram.com/apolloscientific/?hl=en" target="_blank" class="fab fa-instagram">Link3</a>
       <a href="https://www.facebook.com/pages/Apollo-Scientific-Ltd/158179738244405?rf=174620749220860" target="_blank" class="fab fa-facebook-square">Link4</a>
     </div>
   </div>
 </div>
</section>

<footer class="footer">
 <div class="container-fluid">
  <div class="row text-center">
   <div class="col-lg-12">© 2019 - Apollo Scientific Ltd</div>
  </div>
  <div class="row justify-content-center text-center">
   <div class="col-lg-4">
    <a href="/">Terms of use</a>
   </div>                        
   <div class="col-lg-4">
    <a href="/">Privacy policy</a>
   </div>                        
   <div class="col-lg-4">
    <a href="/">Join our team</a>
   </div>
  </div>
 </div>        
</footer>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

bootstrap-vue draggable table

I'm currently working on a table with draggable rows using BootstrapVue and vue-smooth-dnd. The BootstrapVue library combined with vue-smooth-dnd makes it quite straightforward. Although I have successfully implemented draggable rows, all my <td&g ...

vue.jsbootstrap-4drag-and-dropbootstrap-vue

Unable to get HTML text input validation with RegEx to function, despite incorporating the required attribute

I am attempting to create dynamically generated text inputs that only allow for digits and an optional decimal point. I have added the required attribute but the inputs are not responding to the RegEx pattern. var howMuch = $("<input>").attr("type", ...

javascriptregexhtml

"Endowed with improper dimensions, the BootStrap collapse feature

Yesterday, I posted about an issue with BootStrap and panel collapsables causing graph sizes to become distorted. The post was locked because there was no accompanying code. I have now created a code snippet for you all to see the exact problem I am facing ...

javascriptjquerycsstwitter-bootstraphighcharts

Show a different image with a matching title each time the page loads

I need help creating a JavaScript script that will display a random image from an array along with an associated title each time the page loads. Is there a way to do this without using an onload function placed in the body tag? Currently, my code relies o ...

javascripthtml

Unable to toggle Bootstrap 5 tabs in a Nunjucks template - the issue persists

I have been following the bootstrap documentation for tabs which can be found at this link After referencing the documentation, I replicated the sample implementation in my code as shown below: --- title: Portfolio description: Portfolio --- {% exten ...

javascripthtmlcssbootstrap-5nunjucks

Content in Slider Exceeding Container Bounds

After successfully creating a slider using jQuery with the help of some Stack Overflow users, everything was working perfectly. However, when attempting to change the layout of the slider, it somehow broke and now all slides are being pushed out of the con ...

jqueryhtmlcss

Updating every occurrence of a string in the visible text of a webpage: A step-by-step guide

I need to include the registered trademark symbol beside all mentions of a brand, which I'll refer to as "SomeBrand", on a client's website. Here is my current approach: function updateSomeBrand(){ var elements = document.getElementsByTagName( ...

javascripthtml

The Wonders of Flex Box and Media Queries

Can a website still be made responsive without relying on media queries when flexbox is already implemented? Are there specific scenarios where the utilization of media queries offers enhanced control? ...

htmlcssflexboxmedia-queries

Having a newline between HTML elements can disrupt the structure of an HTML layout

It's common knowledge that in html, a newline between elements is treated as space. However, I find it quite alarming when working on responsive layouts. For instance, take a look at this example where the expected and correct behavior is achieved on ...

htmlcssnewlinespace

Is there a way to adjust the text color of a label for a disabled input HTML element?

If the custom-switch is active: the label text color will be green. If the custom-switch is inactive: the label text color will be red. A JavaScript (JQuery) method call can be used to activate one button while deactivating another. The Issue It appe ...

javascripthtmljquerycss

Characters from Font Awesome are invisible on my screen

I am struggling with the font awesome plugin as I am unable to view the characters. Below is my code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <l ...

cssfont-awesome

jquery method to make entire navigation bar clickable

I have a single menu bar. I recently discovered an interesting way to make the entire menu bar area clickable using jQuery. Design code snippet: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="MenuControl.ascx.cs" Inherits="MenuControl"%> ...

javascriptjqueryhtmlcss

Is it possible for JQuery to interact with an Access database for both reading and writing

Is it possible to utilize Jquery to establish a link with a Microsoft Access database? I have been exploring this possibility but haven't found any relevant information. This database won't be used for a production site, but rather for a small gr ...

jqueryhtmlms-access-2010

Django notification: Received request for GET /%7B HTTP/1.1

Every time the console refreshes, I see the message below displayed between once a second and 10 times a second: "GET /%7B HTTP/1.1" 404 26453 This issue seems to be connected to a carousel image strip in my code because it interferes with the timer a ...

htmldjangotemplatesdjango-templatesdjango-1.11

What could be causing Html.checkboxfor to fail in updating the boolean value of the model?

I am currently working on a project where customers can select multiple users to remove them from the database. The issue I'm facing is that the checkboxes are not changing or sending the isSelected variable, which tells the server which users should ...

c#htmlasp.netmodel-view-controller

Is it possible to update the event parameters with every click?

Is there a way to dynamically add a Select box for selecting a condition each time the "add" button is clicked? For example, when the add button is clicked, I would like the following elements to be continuously added: https://i.stack.imgur.com/6bad2.png ...

javascripthtmlgoogle-apps-scriptgoogle-sheetsevent-handling

How to align the last item in the bottom row using Flexbox styling

Is it possible to center the last element when resizing the window to a smaller resolution, even though the parent's justify-content parameter is set to space-between? I understand that using center or space-around would achieve the desired result, bu ...

cssflexbox

What is the best way to position this dropdown menu component directly under a specific section of my navbar in a React application?

As I delved into creating a basic navbar and dropdown menu in React, I encountered a puzzling issue. I envisioned a section within the nav that would trigger a dropdown menu right below it upon hovering over it. Attempting to replicate this functionality b ...

htmlcssreactjsnavbar

Expanding a feature that modifies the CSS properties of every input element

Creating a text tracking (letter-spacing) demonstration where range sliders are used to update CSS properties. I'm looking to improve the functionality so that the labels also update dynamically, without repeating output2.textContent = this.value;. An ...

javascriptcss

Instructions for selecting an <option> within a <select> element using Python

I am trying to select a specific option by id, but I am encountering an issue when dealing with the elements above the select dropdown. <ul style="display: block; visibility: visible;"><li><a href="#" index="0" class="" onclick="s_objectID= ...

pythonhtmlselenium