Social icons in the footer are not lining up properly

Is there a way to align my social icons with the text in the footer? I have attached a Photo of the current footer design along with the HTML and CSS code I've created. Would it be better to place the social icons in a separate div for better positioning control, or should I use positioning elements within the existing structure?

footer {
  background: #212529;
  color: white;
  width: calc(100% - 80px);
  margin-left: 80px;
  margin-right: -15px;
}

footer a {
  color: #fff;
  font-size: 14px;
  transition-duration: 0.2s;
}

// More CSS styles...

<ul class="social-network social-circle">
  // Social icons code
</ul>
<h4>Suivez-Nous</h4>

<footer class="mainfooter" role="contentinfo">
  <div class="footer-middle">
    // Footer content here
  </div>
</footer>

htmlcssbootstrap-4

Answer №1

Insert CSS into <h4>Follow Us</h4> with h4{ display:inline }, then rearrange the elements

Answer №2

To align the <h4> element and social icons in a row, simply apply the d-flex class to your .col-md-3 element.

Note: I changed .col-md-3 to .col-md-6 as the icons were wrapping onto multiple lines within the smaller column.

<div class="col-md-6 d-flex">
          <h4>Suivez-Nous</h4>
        
          <ul class="social-network social-circle">
            <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#" class="icoYoutube" title="Youtube"gt;<i class="fa fa-youtube"></i></a></li>
            <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" class="icoInstagram" title="Instagram"><i class="fa fa-instagram"></i></a></li>
          </ul>
          
        </div>

Find the complete code here: https://jsfiddle.net/8pL49rs7/

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

I am having trouble adjusting my web page to fit the screen fluidly as it appears too large and requires horizontal scrolling

As a student learning html/css, I am currently facing some challenges with my first website. My main issue is setting up the page to be fluid rather than fixed. The box, image, and text are all configured to be absolute on the page, but I cannot seem to ma ...

htmlcss

A loop that incorporates a jQuery JavaScript dropdown menu along with some calculations

My goal is to have multiple dropdown lists populated from a PHP while loop. Each select dropdown has a corresponding textbox that should update its value when a selection is made. However, the current script only works for a single dropdown outside of the ...

javascriptphpjqueryhtml

Encountering a SyntaxError: Unexpected token < in the initial position of JSON during JSON parsing within Node.js

const express = require("express"); const bodyParser = require("body-parser"); const request = require("request"); const https = require("https") ; const app = express(); // store static files (e.g css,image files) ...

htmlnode.jsjsonexpress

Ways to align a nested list vertically

There are two nested lists: <ul> <li>First item <ul> <li> <a href="#">some item</a> </li> <li> <a href="#">some item</a> <</li& ...

css

Silver button seems blue on iPhone

After creating this html code for a blue login button: <div class="p12"> <input type="submit" value="Log In" class="button loginButton"> </div> I added the following CSS style to it: .loginButton { background-color:#627aad; border:1px ...

htmlcssiphone

The malfunctioning collapse feature in Bootstrap 4 sidebar within an Angular 6 application

I am trying to find a way to collapse and reopen the sidebar when clicking on a button. I have attempted to create a function to achieve this, but unfortunately it did not work as expected. Important: I need to collapse the sidebar without relying on jque ...

angulartypescriptbootstrap-4angular6

Is it possible to place a secondary read more button next to the first one using CSS?

If you notice the code snippet, you will see that a "read more" button appears. How can I add another "read more" button to align side by side? I may even want to include three "read more" buttons, each opening in a separate modal box. ...

htmlcss

Ways to access the current element in the Evernote editor that corresponds to the cursor's position?

It seems that Evernote editor uses a Rich Text Editor which differs from the input or textarea tag. Therefore, I am unable to use the provided code to determine its type. Is there a way to retrieve the current element of the Evernote editor where the curso ...

javascripthtml

What is the best way to align the menu to the center

Hey there, I'm trying to center a dropdown menu in a 970px wide div. No matter what I do, I can't seem to get it to work correctly. <div id="menuwrapper"> <ul class="menu" id="menu"> <li><a href="#" >Home</ ...

htmlcssmenu

Showcasing the most recent three Wordpress blog posts in a Bootstrap4 carousel

I'm currently working on a Bootstrap4 carousel that should display the featured image, title, and the beginning of the 3 latest blog posts. Although the desired content is showing up in the carousel, it seems to be stuck on the first post without auto ...

wordpressbootstrap-4

Enumerate the data URLs present on a webpage

To automatically download all the files from a webpage (where data urls are different from the webpage url), I need to extract those data urls from the html code. Here's how I go about it: library(XML) url <- "http://www.data.gouv.fr/fr/dataset/re ...

htmlrurldownload

Tips for inserting a button under a div when clicked

I am working on a layout where I have several div cards aligned side by side using the display: inline-block property. What I want to achieve is that when I click on a card, a button is added below the respective div. To accomplish this, I tried using jqu ...

javascriptjqueryhtmlcss

How can I use jQuery to show the text value of a selected checkbox, dropdown menu, and flipswitch in a popup?

This form's HTML is set up for input with a popup display feature upon submission. Currently, only text can be displayed in the popup. It doesn't show the text of selected checkboxes or dropdown lists - just numbers for the dropdown and "ON" for ...

jqueryhtmlformsjquery-mobilepopup

Every DIV is filled with HTML and CSS

My navigation bar currently has icons placed at the center of a DIV, but I would like to fill up the entire DIV without any spaces left on the sides. The HTML code for the DIV containing the icons is as follows: <nav class="navbar navbar-expand navbar ...

htmlcssreactjsbootstrap-4react-bootstrap

Extract ID for Bootstrap modal display

In my project, I am using a bootstrap modal that displays various strings. The challenge I am facing involves a loop of cards, each with a distinct 'id'. When triggering the modal, I want to show the corresponding id inside the modal itself, whic ...

javascriptjqueryhtmlcsstwitter-bootstrap

Content Blocks with Added Cushioning

I am striving for the cleanest code possible. Can an article and an aside have padding, margins, etc? I have been struggling to achieve this. I find myself having to add a div with a class that accepts padding. article { width:463px; float:left; ...

htmlcss

Finding the optimal image prediction from HTML using Google JSoup - A guide

Our goal is to accurately identify the best guess for an image based on the HTML content of the search results page returned by Google. Among the various classes present, we know that the best guess is associated with the class qb-b. To target this specifi ...

javahtmljsoupgoogle-image-search

Trouble arises when attempting to convert HTML into a PDF format

Currently, I am developing a billing application using Sails.js, Angular, and ejs. Everything is going smoothly, but now I have a pressing need to save the HTML invoice as a PDF. After hours of searching on npmjs, I came across the html-pdf package. It wa ...

htmlpdfnpmsails.js

Position the end of a div to the left side of the container with this technique

I have encountered an issue while trying to showcase a floating bubble with a message located on the left side of the bubble. Despite using absolute positioning and setting a fixed value for the left property, whenever the message text changes, the width o ...

htmlcss

Previewing Jquery script with live interactive effect using Javascript

Looking to create a page where a sentence can be written and displayed in a well-designed format on the right using Jquery live preview. However, currently the design only loads after writing and reloading the page. Any suggestions on how to generate the ...

javascriptjqueryhtmlcss