How can I use Bootstrap to center footer text and display two images on the right side?

Looking for some assistance with the footer on my webpage. I would like to center the text in the footer with two images positioned on the right side. Thank you in advance.

Footer

Below is the code I am currently using:

<div class="CopyRightFooter">
  <div class="col-md-7 col-lg-8">
    <p class="text-center FooterText text-md-center">©Copyright</p>
  </div>
  <div class="col-md-5 col-lg-4 ml-lg-0">
    <div class="text-md-center">
      <ul class="list-unstyled list-inline">
        <li class="list-inline-item"> <img src="<?php echo get_template_directory_uri(); ?>/img/instagram.png" class="footerImg" alt="Ig"> </a> </li>
        <li class="list-inline-item"> <img src="<?php echo get_template_directory_uri(); ?>/img/fb.png" class="footerImg" alt="Fb"> </a> </li>
      </ul>
    </div>
  </div>
</div>
htmlcsswordpressbootstrap-4

Answer №1

.row {
  background: #2f405a;
}

.FooterText,
.social-links ul {
  margin-bottom: 0;
}

.social-links {
  position: absolute;
  right: 0;
  width: auto;
  height: 100%;
  display: flex;
  /* to center social links */
  align-items: center;
  /* to vertically center the text */
  justify-content: center;
  /* to horizontally center the text */
}

@media only screen and (max-width:767px) {
  .FooterText {
    color: #fff;
    padding-right: 90px;
    /* width of social links */
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="row position-relative">
  <div class="col-md-12">
    <p class="text-center FooterText text-md-center">©Copyright Lorem Ipsum is simply dummy text of the printing</p>
  </div>
  <div class="col-md-12 col-lg-4 ml-lg-0 social-links">
    <div class="text-center">
      <ul class="list-unstyled list-inline">
        <li class="list-inline-item">
          <a>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/instagram.png" class="footerImg" alt="Ig">
                        </a>
        </li>
        <li class="list-inline-item">
          <a>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/fb.png" class="footerImg" alt="Fb">
                        </a>
        </li>
      </ul>
    </div>
  </div>
</div>

You must incorporate media queries for responsiveness.

    @media only screen and (min-width:767px) { /* You can modify width as needed */
.social-links {
position: absolute;
right:0;
width: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="row position-relative">
<div class="col-md-12">
    <p class="text-center FooterText text-md-center">©Copyright</p>
</div>
<div class="col-md-12 col-lg-4 ml-lg-0 social-links">
    <div class="text-center">
        <ul class="list-unstyled list-inline">
            <li class="list-inline-item">
                <a>
                    <img src="<?php echo get_template_directory_uri(); ?>/img/instagram.png" class="footerImg" alt="Ig">
                </a>
            </li>
            <li class="list-inline-item">
                <a>
                    <img src="<?php echo get_template_directory_uri(); ?>/img/fb.png" class="footerImg" alt="Fb">
                </a>
            </li>
        </ul>
    </div>
</div>
</div>

Answer №2

Hey there, I have an idea for you.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
    <div class="col"></div>
    <div class="col-6 text-center">
        <p>©Copyright</p>
    </div>
    <div class="col pr-5 text-right">
      <a>
        <img src="<?php echo get_template_directory_uri(); ?>/img/instagram.png" class="pr-2" alt="Ig">
      </a>
      <a>
        <img src="<?php echo get_template_directory_uri(); ?>/img/fb.png" class="pl-2" alt="Fb">
      </a>
    </div>
</div>

Let me know if this works for you.

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

Error: jwt_decode function has not been declared

I'm currently working on a project and I've hit a roadblock while trying to fetch profile information for the logged-in account using a token. Despite using the JWT-decoding library, I keep encountering the issue where jwt_decode is not defined. ...

javascripthtml

Using Svelte to effectively connect to a specified object within an array

Check out this code snippet: <script> let data = [ {id: 1, first: "x"}, {id: 2, second: "y"} ]; </script> <input type="text" bind:value={data.first}/> If you modify the value in the input field and ...

javascripthtmlsveltesveltekitsvelte-component

In the world of MUI, how should one interpret the symbols '&', '>', and '*' when used together?

Currently, I am in the process of building a website using React. To help with this project, I purchased a Material-UI React template. As I was going through the code, I came across the line 4 where it mentions '& > *', and I'm not qu ...

cssreactjsmaterial-ui

Ensuring the CSS animation reaches its ultimate state by the end

I am currently implementing an animation on specific elements that have their opacity set to 0 in the CSS. The animation is triggered onClick, and via keyframes, it transitions the opacity from 0 to 1, among other things. However, once the animation compl ...

csscss-animations

What are some methods for applying border styles to the first and last row of a table using Material UI?

In my current project, I am utilizing the combination of Material UI and React Table. Recently, I was asked to implement an expandable row feature, which I successfully added. Once the user expands the row, we need to display additional table rows based on ...

cssreactjsmaterial-uireact-tablereact-table-v7

Ways to identify whether a div is in view and includes an input field

This is a unique question that is not related to the issue of querySelectorAll detecting value in input. Instead of asking whether an input field has a value, I am interested in how to detect if the current visible div contains an input field. This is a n ...

javascripthtml

Difficulty with linking a CSS property to an HTML element using JavaScript

I'm currently working on building a custom carousel from scratch. Instead of using pre-made code snippets, I decided to challenge myself by creating one using setTimeout in JavaScript. However, I seem to be encountering an issue that I can't quit ...

javascripthtml

Rails pagination will only show the link to the current page

Is there a way to show only the current page link with the << Previous link hidden when on the first page and next >> link hidden when on the last page? It should look like this: On the first page: 1 | next >> On the last page (with 4 ...

htmlcssruby-on-railswill-paginate

Ways to detect the use of vue.js on a webpage without relying on vue-devtools

One way to determine if the page is utilizing Angular or AngularJS is by inspecting window.ng and window.angular. Is there a similar method to identify whether Vue is being used on the page directly from the console, without relying on vue-devtools? ...

javascripthtmlvue.js

A guide to showcasing JSON data on a webpage using JavaScript

I am currently working on a SOAP WSDL invocation application in MobileFirst. The response I receive from the SOAP WSDL is in JSON format and is stored in the result variable. When trying to access the length of the response using result.length, I encounter ...

javascripthtmljson

Creating a table with multiple rows condensed into a single row (Using Material-UI/CSS)

Here is the array structure I am working with: const sample = [ { name: 'apple', detail: [{'a', 'b'}]}, { name: 'banana', detail: [{'a', 'b'}]}, ]; In order to create a table similar to the ...

cssreactjsuser-interfacehtml-tablematerial-ui

Node replication including a drop-down menu

Is there a way to clone a dropdown menu and text box with their values, then append them to the next line when clicking a button? Check out my HTML code snippet: <div class="container"> <div class="mynode"> <span class=& ...

javascripthtml

Getting around popup blockers on safari

Here is the HTML code I am working with: <a href = "#" class="fb">Facebook</a> I am using an onclick event handler that triggers window.open when the link above is clicked. This works fine in Chrome, but it does not work in Safari. How can I ...

javascriptjqueryhtml

Struggling to interact with a field within an HTML/CSS LESS document

I have encountered an issue with my website where I am unable to click on certain fields or buttons within the Login fieldset. Strangely, I can only interact with the fields and buttons located within the Register fieldset. The CSS for my website is writt ...

htmlcssless

Struggling with getting Bootstrap Affix-bottom to scroll back up?

Despite reading various answers, I am still struggling to configure the settings correctly. The columns header is not resuming scrolling upwards as expected. Below is my PHP code snippet: <div id="columnsHeader" class="affix" data-offset-top="800" da ...

phpcsstwitter-bootstrapjoomlaaffix

Modifying Row Color in Bootstrap 3: A Step-by-Step Guide

I'm trying to customize the background color of alternating rows in a Bootstrap 3 grid. I attempted to use CSS and add it to the class within the div, but unfortunately, the color isn't changing as expected. Below is the CSS code I used: .row-b ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is it possible to utilize an if statement to select a specific Bootstrap modal?

How can I make a modal appear when the user clicks select? The first page has radio buttons (e.g. oneway, twoway), and I want the second page to display different fields based on which radio button is selected. Can I use an if statement for this? If so, ...

javascriptphphtml

What is the best way to upload this HTML file to create my own visual representation?

Feeling a bit unsure about which way to go for this problem, I don't have many options at the moment. Lately, I've been diving into Deep Learning and I'm interested in experimenting with Stanford's CS231N's Convolutional Neural Ne ...

javascripthtmldeep-learning

modify header when button is clicked

I am trying to create a JavaScript function that will update the name of an HTML table header when a button is clicked. However, I am having trouble accessing the text content within the th element. document.getElementById("id").text and document.getEl ...

javascripthtmltableheader

my goal is to transform this text into the background

For my latest project, I want the entire page that I've coded to be integrated into the <body> section with endless scrolling ability. Additionally, I need the loop that I created to remain fixed when scrolling so that I can easily place my con ...

htmlcssbackground