How can I align one link (Emergency Contact) to the left and another (Online Consultant) to the right in the footer tag after the image in HTML?

https://i.sstatic.net/3j4xp.png

<!Doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css\font-awesome.min.css">
  <title>Welcome to Login</title>
  <link rel="stylesheet" type="text/css" href="css\style.css">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <img class="bgimg" src="images\bg5.jpg" />
      <div class="lgform">
        <div class="lglogo col-md-12">
          <font class="col-md-6" face="Times New Roman" size="48px">MAS</font>
          <img class="logo col-md-6" src="images\logo2.png" />
        </div><br><br><br>
        <div>
          <i class="fa fa-id-card col-md-2" style="font-size:20px;color:green"></i>
          <select class="col-md-9">
            <option>Select a Document</option>
            <option>id number</option>
          </select>
        </div><br>
        <div>
          <i class="fa fa-user-o col-md-2" style="font-size:20px;color:green"></i>
          <input class="col-md-9" type="number" placeholder="Number Document" />
        </div><br>
        <div>
          <i class="fa fa-key col-md-2" style="font-size:20px;color:green"></i>
          <input class="col-md-9" type="password" placeholder="Password" />
        </div><br>
        <div>
          <center>
            <a href="index.html">
              <input class="btn btn-primary col-md-6" type="submit" value="LOGIN" style="font-weight:bold" />
            </a>
          </center>
          <center>
            <a href="registration.html">
              <br><input class="btn btn-danger col-md-6" type="submit" value="Create an Account! New User?" style="font-weight:bold" />
            </a>
          </center>
        </div><br>
        <div class="col-md-7" style="margin-left:100px">
          <a href="forgotpsw.html">¿Forgot Password?</a>
          <a href="help.html" style="float:right">¿Help?</a>
        </div><br><br>
      </div>
      <footer>
        <div class="container-fluid">
          <div class="row">
            <div class="float-left" style="position:relative">
              <p class="p1 col-lg-6">(91)+8313285202</p><br>
              <h5><i class="fa fa-phone-square col-lg-6" style="color:red">EMERGENCY CONTACT</i></h5>
            </div>
            <br><br>
            <div class="float-right" style="position:relative">
              <p class="p2 col-lg-6">(91)<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="183355594b585f55595154365B5755">[email protected]</a></p><br>
              <h5><i class="fa fa-check col-lg-6" style="color:green">ONLINE CONSULTANT</i></h5>
              </font>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </div>
</body>

</html>

Answer №1

Below is the resolution to the issue:

<footer>
    <div class="container-fluid">
        <div class="float-left">
            <p class="p1 col-lg-6">(91)+8313285202</p>
            <br>
            <h5><i class="fa fa-phone-square col-lg-6" style="color:red">EMERGENCY CONTACT</i></h5>
        </div>

        <div class="float-right">
            <p class="p2 col-lg-6">(91)<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="341f79756774">[email protected]</a></p>
            <br>
            <h5><i class="fa fa-check col-lg-6" style="color:green">ONLINE CONSULTANT</i></h5>
        </div>
    </div>
</footer>

I have eliminated the <div> with the class name row, as well as removed the style="position:relative" from the div utilizing float-left and float-right.

The code has been cleaned up a bit. You can view the functioning code on my Codepen: https://codepen.io/CodeBoyCode/pen/gBQVWR

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

``There seems to be a problem with the radio buttons where the selection disappears when

I'm facing an issue with a radio button group I created. It's functioning properly, but the selection disappears when clicked outside of the radio button. Can someone assist me in resolving this problem? Here is the link to the jsfiddle for refer ...

When you first open material-ui cards, there are no default CSS styles applied

https://i.sstatic.net/EVdO8.png My cards created using material-UI are displaying strangely when the page loads or re-loads. Initially, they look different with no apparent CSS styling, but after a few seconds, they appear as intended. I'm not sure i ...

Enhance web design with dynamic size pseudo elements using only CSS, no

Before the title, I've added a pseudo element with a slanted background. When the title is wrapped, it increases in height. I've been attempting to make the pseudo element adjust to the title's height, but haven't succeeded yet. I&apos ...

Display HTML content using JavaScript only when a checkbox is selected

Currently, I am updating an HTML form to show additional subsets of questions based on the selection of a "parent" checkbox. The current implementation works well, but I am wondering if there is a more efficient way to achieve this without having to rewrit ...

Activate the active tab when clicking on a Bootstrap 4 Collapse navigation tab, both on the page and

Automatically close the active nav-tab when a nav-link is clicked or when a click occurs anywhere on the page. I have attempted changing the removeClass from .tab-pane to various other options such as tabpanel, nav-item, nav-link, and just tab with no suc ...

What is the best way to horizontally align a div within a parent div?

I'm having trouble centering the red div containing three child elements (h1, h3, and button) within a green container div using CSS. I initially attempted to center the red div vertically and horizontally on its own, but after some research, I learne ...

Angular material input featuring an additional component

Trying to integrate an additional text element next to an input using angular-material. The goal is to replicate the functionality of bootstrap's .input-group-addon: The closest approach achieved so far can be seen in this example: <md-content la ...

Automatically changing the color of the navigation bar text

I am experiencing an issue with the navigation bar on my webpage. Currently, it is styled with white text against a dark background color using the following CSS code snippet: a{ color: white; text-decoration:none; font-weight:bold; font-s ...

Altering the style of the underline for a hyperlink

I'm looking to customize the underline style when hovering over a link. Specifically, I want to change the color and size of the underlined link. const useStyles = makeStyles(theme => ({ button: { marginLeft: theme.spacing(2), }, }) ...

What is the optimal order for arranging CSS properties?

Do CSS properties need to be in a specific order? I've always organized them based on my own preference. Is there an official standard for arranging CSS properties? While server-side languages have set standards, it seems like CSS structure is more f ...

Integrate my API with HTML using J.Query/Ajax technology

Finally, after much effort, I have successfully created a JSON java API. My API design is simple and based on Interstellar movie details: { "title": "Interstellar", "release": "2014-11-05", "vote": 8, "overview": "Interstellar chronicl ...

Prevent Image Distortion in HTML and CSS

Is there a way to prevent a background image from stretching in html/css? Take a look at the current code below, where the image behind a button appears like this: #backImage6{ /*@editable*/background-image:url(https://images.unsplash.com/phot ...

Having trouble executing a jQuery tab?

Currently, I am in the process of developing tabs using solely jQuery without incorporating any third-party plugins. jQuery(document).ready(function(){ $(".resp-tab-content").hide(); $("ul.resp-tabs-list li:first").addClass("active").show(); $(".r ...

issue with border color staying the same when focusing

I've been struggling with changing the border on focus in my code. Despite trying various methods, nothing seems to be working. Can someone help me figure out what I'm doing wrong? <input type="text" spellcheck="false" data-placement="top" id ...

Is it possible to automatically adjust the size of components on a html/cshtml page based on the current window size?

Currently, I am facing an issue with my website where multiple panels are created using a foreach loop that includes textareas/textboxes. Whenever I resize my browser window, it messes up the UI by shifting the position of the textareas and other elements. ...

The clash between Angular's ng-if directive and Bootstrap's popover feature causing unexpected

<div class="form-group" ng-if="firstname"> <label>First Name</label> <input readonly type="text" class="form-control" id="first_name" ng-model="firstname" placeholder="First Name"> <a href="" data-toggle="popover" dat ...

Creating MySQL inserts from various dynamic HTML tables generated using PHP

Currently, I am faced with a challenge while working on a PHP file that produces multiple dynamic HTML tables through the use of an included PHP library. To provide a glimpse, here is a snippet of the HTML output (with just two tables and reduced rows) ava ...

How come the array's length is not appearing on the browser screen?

Code: initialize: function() { this.todos = [ {id: 100, text: 'Rich'}, {id: 200, text: 'Dave'} ]; }, activeTodos: function() { this.todos = this.todos.length(function() { return this.todos; }); ...

The way jQuery and CSS are rendered in the same browser window can vary depending on whether they are loaded via Django or statically

Experiencing a perplexing dilemma. While viewing a web page created using html, jquery, and css on the same browser but in two separate tabs, I am encountering varying renderings of the page. Scenario 1: Directly loading the html file from the file system ...

Creating a visually stunning PSD design using Bootstrap 4

I am looking to replicate the design from this PSD file. https://i.sstatic.net/A7cna.jpg <div class="col-md-6 align-self-center" style="font-size: 70%"> <div class="card-body"> <div class="d-in ...