Tips for arranging footer elements in a row using css/Bootstrap 4!

I'm currently working on the footer section where I've added Social Media Icons and a Contact Us section.

If you want to view the layout, check out this fiddle. Right now in the fiddle, the Contact Us and Social Media Icons are displayed on separate lines instead of being inline.

The HTML code I used to arrange the Social Media Icons and Contact Us content is as follows:

<div class="fixed-bottom footer_fixed">
  <p class="mx-0 mb-2 mt-2 text-center">
    <i class="fas fa-phone pr-1"></i>
    <a href="tel:+1234567890" class="pr-3">
       +1 234 456 7890
    </a>
   <span class="static-email">
      <i class="fas fa-envelope pl-3 pr-1"></i>
     <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed85888181829a829f8189ad9a82...
            ...
        </ul>
    </p>
</div>
<br><br>
htmlcssbootstrap-4inlinefooter

Answer №1

Utilize the bootstrap grid system for better layout control.
Check out the example below (best viewed in full screen mode)

/*---------- Footer Styles -----------*/

.footer {
    color: white;
    padding-top: 44px;
    background-color: rgb(243, 243, 243);
}

.footer a {
    color: rgb(138, 138, 138);
}

.footer a:hover {
    color: #fb875c;
}

/* Additional styles omitted for brevity */

For more information on using the bootstrap grid system, visit: https://getbootstrap.com/docs/4.1/layout/grid/

Answer №2

One solution is to implement display flex

.fixed-bottom p {
    display: flex;
    justify-content: space-between;
}

.fixed-bottom .social-network {
    display: flex;
}

Answer №3

Kindly review this solution, it should help resolve your issue. JSfiddle

/*---------- Footer -----------*/

.footer {
  color: white;
  padding-top: 44px;
  background-color: rgb(243, 243, 243);
}

.footer a {
  color: rgb(138, 138, 138);
}

... (truncated for brevity) ...

}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link rel="stylesheet" href="css/footer.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>

<body>
  <div class="fixed-bottom footer_fixed d-flex justify-content-center pt-3 pb-3">
    <p class="mx-0 m-0 text-center">
      ... (truncated for brevity) ...
    </p>
  </div>
</body>

</html>

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

Converting JSON to HTML is like translating a digital language

I am in the process of developing a web application, and I have implemented an ajax request that queries a database (or database cache) and returns a large JSON object. Since I am new to working with JSON, when my PHP script retrieves data from the databas ...

phpjqueryhtmlajaxjson

Blazor Control in Razor Component Library (CSS Protection)

I recently created a new component named MyComponent.razor and included a corresponding CSS file called MyComponent.razor.css. The CSS file is nested under the component file in Visual Studio, so I am confident there are no spelling errors in the file path ...

cssblazorblazor-webassemblyrazor-class-library

Having difficulties with incrementally rotating a CSS cube to every direction

Can anyone help me with rotating a cube one side at a time using CSS? I can make the cube rotate to the top / bottom and each side correctly, but when I try to rotate to the top or bottom first and then to a side, the cube spins without rotating left or ri ...

javascripthtmlcss

Utilizing React to Style Background Positions

I've been struggling to position a block of rendered jsx on the right side of the first block for hours now. Despite trying various options like marginTop, marginLeft, and even backgroundPosition based on my research, I still haven't been success ...

javascriptcssreactjsjsx

What could be causing the lack of firing with Mobile Safari and jQuery events?

My HTML5/JavaScript app, originally designed for an in-dash car unit, is now being ported to the browser for marketing and presentation purposes. The transition seemed simple at first, just some CSS adjustments for cross-browser compatibility. However, whe ...

jqueryhtmliosmobile-safarijquery-events

The `webkit-animation-fill-mode` property does not seem to be functional in Firefox

I attempted to create a progress bar design using webkit animation fillmode, but unfortunately, it is not compatible with Firefox. I also tried converting % values to pixels, but the issue persisted. <!doctype html> <html> <head> < ...

csscss-animations

gathering various GET and POST data points

I am working on a form where the data is being passed through the URL like this ?choice=selection+A&choice=selection+C When collecting it in a form, I'm using the $_GET method to retrieve it as an array: $temp = $_GET["choice"]; pri ...

phphtml

Switching up the content of an HTML page with JavaScript or JQuery: what you need

Is it possible to update HTML content using JavaScript or JQuery? https://i.sstatic.net/EWOXg.png I am trying to change the contents from 1 to 5 in a sequential order based on the time shown in the image. How can I achieve this using JavaScript or JQuery ...

javascripthtmljquery

Incorporate a 'Select All' functionality into ion-select by adding a dedicated button

Looking for a way to set custom buttons on ion-select through interfaceOptions in ionic 4? HTML <ion-item> <ion-label>Lines</ion-label> <ion-select multiple="true" [(ngModel)]="SelectedLines" [interfaceOptions]="customAlertOption ...

htmltypescriptionic-frameworkionic4

Is there a way to reduce the height of the border-left property in CSS?

In creating a simple address panel, I have divided it into three sections: address, phone number, and email. Each section includes an icon and a paragraph next to it. To align these sections side by side, I used the vertical-align: top and display: table p ...

htmlcssbootstrap-4

Rearrange content using media queries

Is it possible to rearrange the position of two HTML elements when accessing a website from a tablet? Here is the current setup: <section id="content"></section><!-- End section#content --> <aside id="sidebar"></aside><!- ...

javascriptcss

Tips on positioning a button "above" the carousel-control-next icon

I have a carousel and I added a button to stop the spinning. However, when I try to click on the button, it seems like the "carousel-control-next" tag is being clicked instead. How can I solve this issue? ** Interestingly, when I remove the "carousel-cont ...

javascripthtmljquerytwitter-bootstrapbootstrap-4

Utilizing Jquery to pass two classes along

I am looking for assistance on how to pass multiple classes within if-else statements and jQuery. My goal is to have both divs and divs2 change when the next button is clicked. Can someone please provide guidance on achieving this? --code not mine-- ...

javascripthtmljquerycss

Error encountered while rendering HTML template with Django and AngularJS due to TemplateSyntaxError

Hello, I am new to Angular and Django. I have built a Django webpage and am attempting to display values from a basic AngularJS app and controller tutorial using my HTML template. However, I keep encountering an error in the index.html file when trying to ...

javascriptpythonhtmlangularjsdjango

Ensure that the class is consistently assigned with identical col-md-* and col-lg-* properties across all instances

Bootstrap 5.2 is my framework of choice for targeting github pages, and here is a snippet of my code: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...

htmlcsstwitter-bootstrapbootstrap-5

Is it possible to input a Django template variable within an HTML code in a model's TextField field?

I am looking to dynamically generate external URLs rather than hard-coding them in HTML to accommodate any future changes. Within my template, I have the following code snippet. <p> {{ article.text|safe }} </p> Here is my Article class defin ...

htmldjangodjango-modelsdjango-templatesdjango-views

Ever since I switched to using Angular4, my CSS has been acting up and no longer seems to be functioning properly

Ever since I switched to Angular 4, my CSS seems to have stopped working. While constructing the basic template for my app, I am encountering some challenges with CSS not being applied correctly to DIVS due to the generated Component DOM element of Angula ...

cssangular

Outlook failing to recognize text dimensions

Implementing: <html> <head> <style> p { font-size: 16px; } .font-size-16 { font-size: 16px !important; } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspend ...

htmlcssoutlookhtml-emailfont-size

What is the best approach to managing undefined properties retrieved from the html in my Angular application prior to obtaining data from my controller?

Every time my Angular component HTML renders, I encounter numerous errors that all look similar to this ERROR TypeError: Cannot read properties of undefined (reading 'someProperty') Throughout my HTML page, there are many bindings that follow ...

javascripthtmlangularangular-templateangular-template-form

Inquiries about creating collapsible content using html, css, and javascript

I have been exploring collapsibles and noticed that many of them use extra code that seems unnecessary or confusing. I decided to create a simple one based on my logic, but it's throwing an error: app.js:4 Uncaught TypeError: Cannot read property &apo ...

javascripthtmlcss