The social media icons are refusing to align with the right corner of the footer

I'm having trouble getting my social icons to float to the right-hand corner of my footer instead of the left. Despite using float: right; in my CSS, they are only slightly indenting from the left.

Does anyone have a solution?

footer {
    background: #444;
    padding: 15px;
}

.copy {
    color: #fff;
    text-align: center;
    font-family:"Exo", sans-serif;
    padding-top: 20px;
}

.smed i {
    color: #fff;
    font-size: 40px;
    margin: 10px;
    padding-top: 10px;
    float: right;
}

.smed i:hover {
    color: #ffa500;
}
<footer>
        <div class="row text-center">
            <div class="col-md-4 smed">
                <i class="fab fa-github"></i>
                <i class="fab fa-linkedin"></i>
                <i class="fab fa-medium"></i>
                <i class="fab fa-youtube"></i>
            </div>
            <div class="col-md-4">
                <p class="text-light copy">Copyright 2020 Bootstrap4</p>
            </div>
        </div>
    </footer>

htmlcssbootstrap-4

Answer №1

Hey there, I'm not sure why you're asking this question, but in my experience, it works fine (at least in the stackoverflow code snippet editor). The icons are floating to the right.

footer {
    background: #444;
    padding: 15px;
}

.copy {
    color: #fff;
    text-align: center;
    font-family:"Exo", sans-serif;
    padding-top: 20px;
}

.smed i {
    color: #fff;
    font-size: 40px;
    margin: 10px;
    padding-top: 10px;
    float: right;
}

.smed i:hover {
    color: #ffa500;
}
<footer>
        <div class="row text-center">
            <div class="col-md-4 smed">
                <i class="fab fa-github"></i>
                <i class="fab fa-linkedin"></i>
                <i class="fab fa-medium"></i>
                <i class="fab fa-youtube"></i>
            </div>
            <div class="col-md-4">
                <p class="text-light copy">Copyright 2020 Bootstrap4</p>
            </div>
        </div>
    </footer>

Answer №2

Could you please attempt this: moving the 'smed' column down and then increasing the width of the first column?

<footer>
        <div class="row text-center">
            <div class="col-md-8">
                <p class="text-light copy">© 2020 Bootstrap4</p>
            </div>        
            <div class="col-md-4 smed">
                <i class="fab fa-github">1</i>
                <i class="fab fa-linkedin">2</i>
                <i class="fab fa-medium">3</i>
                <i class="fab fa-youtube">4</i>
            </div>
        </div>
</footer>

Answer №3

If you want to position the icons on the right side, simply rearrange the content order within your row.

Thankfully, with BS4 there is a utility class called flex-row-reverse that can help achieve this.

Ensure to view at Full Page size for optimal results.

footer {
  background: #444;
  padding: 15px;
}

.copy {
  color: #fff;
  text-align: center;
  font-family: "Exo", sans-serif;
  padding-top: 20px;
}

.smed i {
  color: #f00;
  //font-size: 40px;
  margin: 10px;
  padding-top: 10px;
  float: right;
}

.smed i:hover {
  color: #ffa500;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<footer>
  <div class="row text-center flex-row-reverse">
    <div class="col-md-4 smed">
      <i class="fab fa-github">A</i>
      <i class="fab fa-linkedin">B</i>
      <i class="fab fa-medium">B</i>
      <i class="fab fa-youtube">D</i>
    </div>
    <div class="col-md-4">
      <p class="text-light copy">Copyright 2020 Bootstrap4</p>
    </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

What allows CSS to interact with pseudo-elements?

While experimenting in my class, I made an interesting discovery that CSS can be applied to custom elements. For example: imsocool { color:blue; } <imsocool>HELLO</imsocool> Surprisingly, when my professor noticed me using these custom ...

htmlcss

How can we prevent the restoration of size effects in jQuery UI versions 1.9 and above?

After implementing jQuery UI 1.9 or newer, I noticed that the size effect returns to its original state. Below is a snippet of my code: http://jsfiddle.net/mQCxY/ $(function () { $('.circle').click(function () { $(this).effect("size ...

jquerycssjquery-ui

Finding the XPath for a modal using Selenium

I must locate and select this input field... (name="BtnNext" value="İLERİ" class="NavigationButtonNextLightBox ") ...using XPath after a modal popup. I am unable to use .FindByClass because there are identical classes on the main page, but I specifical ...

htmlseleniumxpath

Stop the inclusion of the scrollbar in the mat-drawer-inner-container within the Angular mat-drawer Component

Background Story: Working on designing a screen layout that includes the use of a mat-drawer to display a custom component. The challenge arises when the custom component gets nested inside a div (with class="mat-drawer-inner-container") automatically adde ...

cssangularangular-materialmat-drawer

Creating organized layouts using Bootstrap for columns and rows

Struggling with formatting a modal as a novice front end coder. Apologies for the messy code! Currently using bootstrap columns and a card, but having trouble getting the second row to move up close to the first row. VIEW THE WEBSITE IMAGE HERE I'm ...

htmlcssbootstrap-4

Creating a dynamic navbar with Python (Django), HTML, CSS, and Javascript for a fully responsive

I am currently utilizing a guideline to develop a responsive navbar that adapts its layout based on the screen size. It will display elements in a dropdown list for smaller screens, as opposed to an inline layout used for larger screens. Here is a snippet ...

javascriptpythonhtmlcssdjango

Discovering over ten outcomes from the Google Search API

I've been attempting to retrieve more than 10 results from Google using the search API. I understand that the API only provides 10 results per call, so you need to make multiple calls to accumulate a larger number of results. However, I'm struggl ...

phphtmlsearch-enginegoogle-search-api

The pie chart is unable to render due to issues with accessing the external JSON file in Ext

I attempted to create a pie-chart using extjs, but unfortunately, the pie-chart is not showing up. Interestingly, when I pass the JSON data through AJAX inline, it works perfectly fine. However, when I try passing it through a file, it doesn't work a ...

javascripthtmljsonextjspie-chart

Tips for ensuring only one submenu is open at a time

I have successfully created a responsive menu that is working well. However, I am facing an issue. I want only one menu to be open at a time. When a submenu is opened, the other menus should be hidden. How can I achieve this? Below is my Script code $( ...

javascriptjqueryhtmlcss

Creating Curved Corners for Bootstrap 3 Carousel

I'm having trouble trying to add rounded corners to a Bootstrap 3 carousel using CSS. I've managed to round the corners of the images inside the carousel, but for some reason, the background edges of the carousel remain unrounded. Can anyone spot ...

csstwitter-bootstrap

Tips on aligning two divs horizontally on the same line

doc.html .column { background-color: orange; width: 75%; vertical-align: top; display: inline-block; height: 200px; } .nav { vertical-align: top; display: inline-block; width: 25%; background-color: lightgreen; height: 200px; } * { ...

htmlcss

Tips for refreshing the default style of Material UI select

I'm having trouble customizing the default background color of the first menuItem in the select component. The class I need is not visible when inspecting the element, as the background color disappears upon inspection. Steps to reproduce: 1. Click ...

javascripthtmlcssreactjsmaterial-ui

Showing a series of text entries one after the other, each appearing with a smooth fade-in and fade-out

I am eager to showcase a list of text in a sequential order, implementing a fade-in/fade-out effect and concluding with the display of an image. Additionally, I aim to have all the text centered on the page. <div>a<div> <div>b</div> ...

javascripthtml

Submitting form by clicking a link on the page

To submit a POST request with "amount=1" without displaying it in the URL, I need the site to send this request when any link on the site is clicked. This JavaScript code achieves that with a GET request: window.onload = function () { document.body.oncli ...

javascripthtmlpostget

Limit Range of jQuery UI Slider Button

How can I modify the jQuery UI slider range to keep the button within the slider div and prevent it from overlapping as shown in the screenshots below? https://i.sstatic.net/odG3o.png https://i.sstatic.net/aiGxr.png ...

javascriptjquerycssuser-interfaceslider

Modifying the appearance of Bootstrap button colors

I recently came across this code on the Bootstrap website. I am curious about how to change the text color from blue to black in this specific code snippet. Currently, the text is appearing as blue by default. For reference and a live example, you can vis ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilize Javascript to generate intricate table headers based on JSON data

I am currently facing a challenge in creating an HTML table header with colspan. I have a JSON object as follows: var metadata = [{ "colIndex": 0, "colType": "String", "colName": "PM" }, { "colIndex": 1, "colType": "String", "colName": "PR ...

javascriptjqueryhtmljson

Responsive HTML grid with a distinct line separating each row

My challenge is to create a layout that features a grid of floating divs with horizontal lines under intermediate rows. The catch is that there should not be a line under the last row, and if there is only one row of elements, no line should be displayed. ...

htmlcsstwitter-bootstrapgrid-layout

Tips for extracting Character Value from an Integer database field

I am currently dealing with an integer field in my database that serves as an option field. I store the options in terms of IDs in the database, but I also need to display the corresponding values for certain operations. Can someone please guide me on how ...

htmlangularjsdjango

Issue with Zurb Foundation 5.3 - Off Canvas: encountering a "TypeError: this[method] is undefined" error

I recently made some updates to a project using Foundation 5.3, but I'm struggling to get the Off Canvas feature to work properly. I've attempted different versions of jQuery (1.x - 2.x) without success. To troubleshoot, I created a simple jsfid ...

javascripthtmlcsszurb-foundation