The reason behind the malfunctioning of this basic bootstrap code

I've been delving into Bootstrap and trying to create a theme from scratch. However, I've hit a roadblock right at the beginning with an unexpected issue - the icons are stuck next to the logo on the right side of the page despite using float:left along with !important. This should align them to the left but it's not working as expected!

What could be causing this problem? How can I correctly position the icons to the left side and the logo to the right side?

* {
  font-family: aviny;
  font-size: 22px;
  text-align: right;
  direction: rtl;
}

.top-header {
  margin-top: 20px;
}

.instagram-icon img {
  float: left !important;
  /* Issue: Icons are not moving to the left side as intended */
}
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f0e1d1a5bfa7bfa3">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>

<body>
  <div class="container top-header">
    <div class="row">
      <img src="https://via.placeholder.com/80" alt="logo header" width="80">
      
      <div class="instagram-icon">
        <img src="https://via.placeholder.com/50" alt="instagram">
        <img src="https://via.placeholder.com/50" alt="telegram">
        <img src="https://via.placeholder.com/50" alt="youtube">
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4969b9b808780869584b4c0dac2dac6">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>

htmlcsstwitter-bootstrapbootstrap-4css-float

Answer №1

Bootstrap rows are flexible elements, meaning the justify-content-between flex layout class aligns the two flex children to opposite ends. Explore more about flexbox.

Avoid using floats as they belong to an outdated layout method and have limited practical applications in 2023.

Additionally, it is recommended to utilize Bootstrap's margin classes instead of creating custom CSS. The mt-3 class provides double the default spacing unit (2 x 0.5rem = 1.0rem), which closely matches your desired 20px.

* {
  font-family: aviny;
  font-size: 22px;
  text-align: right;
  direction: rtl;
}
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7959898838483859687b7c3d9c1d9c5">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>

<body>
  <div class="container top-header mt-3">
    <div class="row justify-content-between">
      <img src="https://via.placeholder.com/80" alt="logo header" width="80">

      <div class="instagram-icon">
        <img src="https://via.placeholder.com/50" alt="instagram">
        <img src="https://via.placeholder.com/50" alt="telegram">
        <img src="https://via.placeholder.com/50" alt="youtube">
      </div>
    </div>
  </div>
</body>

Answer №2

I have discovered a resolution:

  1. Within the container div, I inserted a row div.
  2. Within the row, I created a d-flex justify-content-between.
  3. The first element (image with logo) will be positioned on the right side and the second element (div with Instagram logo, etc) will be placed on the left side without requiring the use of your instagram-icon.

Here is the code snippet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Academy</title>
    <link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7875756e696e687b6a5a2f3429342a377b766a727b29">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container top-header">
      <div class="row">
        <div class="d-flex justify-content-between">
          <img
            src="https://cdn.iconscout.com/icon/free/png-256/stackoverflow-2752065-2284882.png"
            alt="logo header"
          />
          <div class="instagram-icon">
            <img
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb2CZZwLGcM5obAkkLvT9tEf8ptGxpJuRCYFVu4Ifjkw&s"
              alt="instagram"
            />
            <img
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb2CZZwLGcM5obAkkLvT9tEf8ptGxpJuRCYFVu4Ifjkw&s"
              alt="instagram"
            />
            <img
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb2CZZwLGcM5obAkkLvT9tEf8ptGxpJuRCYFVu4Ifjkw&s"
              alt="instagram"
            />
          </div>
        </div>
      </div>
    </div>

    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>

In designing CSS, it's advisable to steer clear of using !important and refrain from utilizing float; instead, opt for using flex or grid for positioning elements.

The Stackblitz demo that I employed can be accessed here: https://stackblitz.com/edit/web-platform-tqdq6r?file=index.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

What is the easiest way to modify the color of a basic PNG image in a web browser?

While working on a website project, I encountered instructions for mouseover styles in the design that got me thinking: It's straightforward to achieve with javascript or css image swapping... but here's the catch. There will be multiple icon li ...

htmlcsssvgmask

What is the best way to adjust the value within a span element using plus and minus buttons located near an input field?

Is there a way to implement input addition using + and - buttons, even though it has been working without buttons so far? How can I achieve this functionality with the help of javascript or jquery? // To calculate the sum of three input values in a spa ...

javascripthtmljquery

Using Javascript to extract data from the <pre> tag and store it into an array

Our report pages are set up to display information line by line at the bottom by appending a <pre> tag. For example: <pre> Site Report Info Any errors will appear as numbers: 938109283091238109281092 Account ID will be shown here. Acc ...

javascripthtmlarraysregexpre

The hyperlink may be dysfunctional due to the presence of a CSS background image

Looking to fix the issue with the phone number link in the universal header. It seems that whenever it overlaps the background image, the link is not clickable. However, when resizing the window to mobile view, the link works fine where there is no overlap ...

htmlcss

Creating consistent indentation in HTML code can be achieved without the presence of any unnecessary

When I add indentation to my HTML code, it results in extra whitespace between elements on different lines. <div id="nbcntcnt"> <a href="notset.html" class="nbcntbutton" id="snbb">Overview</a> <a href="notset.html" class="nbcntb ...

htmlcssindentation

Setting the z-index of inner links to be greater than the parent container's z-index

I'm curious if something like this could work: <div class="arrow-left" style="z-index:2; position: fixed; height: 100%; width: 100%;"></div> <div class="meta" style="z-index:1; position: relative;"> <div class="description"&g ...

htmlcssz-index

What is the best way to eliminate the border from a GTK entry (textbox)?

I am trying to remove the border completely. This is the code I have attempted: GtkCssProvider *provider = gtk_css_provider_new (); gtk_css_provider_load_from_data (GTK_CSS_PROVIDER (provider), "entry, .entry, GtkEntry { border-width:0px ; }", -1 ...

csscuser-interfacegtkgtk3

Should comments come before <!DOCTYPE HTML>?

When organizing my files, I always start with a comment about the content. However, I've been told that it's not recommended to put anything before the declaration. Is it acceptable to include comments before this or should I reserve the top of m ...

htmlcomments

Having trouble updating the react icon when I expand my Accordion component in Bootstrap framework

I am struggling to change the react icon when expanding my Accordion in Bootstrap. The 'Click me' content is dropping down as expected, but the icon remains unchanged. function Expander () { const[active,setActive] = useState(false); retu ...

javascripthtmlreactjsbootstrap-4

JavaScript: Retrieve values from individual textareas with identical class names

Imagine you have multiple text areas like the ones below: <textarea class='save'></textarea> <textarea class='save'></textarea> <textarea class='save'></textarea> All of them are assigned ...

javascriptjqueryhtmlcss

How to Make a Div Element Expand to Fill Unknown Space?

I have a box with the word "Test" inside it. I need to adjust its width to be 100% of its containing div, but I'm unsure about how to do this without using Javascript. The example in the jsFiddle linked below demonstrates what I am trying to achieve. ...

htmlcss

The Image Slider functions smoothly in Chrome, but encounters issues in IE11

Here is a link to the code I've been working on: http://jsfiddle.net/wf32jbhx/ I attempted to host images on my SharePoint site, but they ended up stacking on top of each other instead of formatting properly. Oddly enough, everything appears fine in ...

htmlcssgoogle-chromesharepointinternet-explorer-11

Retrieve the JSON data from an external URL and showcase it within a div element as simple text

I'm working with an external resource that is similar to and it returns JSON data. My goal is to extract the value of the "result" key from this JSON and display it within a div in HTML (let's call this div "summary"). The value of the result ke ...

javascripthtmljson

Sending a Basic Form with jQuery Ajax

I have a simple HTML form with a "response" div under it. The user is supposed to enter a password, and the script should check the database to find the corresponding username (which is working fine). Then, the username should be displayed in the "response ...

phpjqueryhtmlajax

Updating embedded HTML within Iframes

Looking for a script that can dynamically change the src attribute of iframes at different intervals. The time between each change varies depending on the specific iframe. For example: Page Loads Google.com is loaded. 15 seconds later Yahoo.com is loaded. ...

javascripthtmlcssiframe

The HTML link is not functioning properly. I included the code "<a href="fileName"></a>" but the link is not working

My hyperlink isn't functioning properly in my HTML code, and I can't determine the reason why. <div class="banner-text"> <ul> <li><h3><a href="chawla.html">HOME</a></h ...

htmlcsswebbootstrap-4

Prevent form submission using jQuery until both a value is entered in the field and at least one checkbox is checked

Picture a sign-up form for a newsletter. I have the form set up with just two types of fields (text, checkbox), and some of them need to be filled out before submission. Specifically, the email field must be completed along with at least one checkbox. The ...

htmljqueryformsvalidationcontact-form-7

Issue with aligning Bootstrap 5 card tiles in a specific position

Can anyone guide me on the correct way to use the Bootstrap 5 card component to display an attached image in a card view? Here is my code: <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <me ...

htmlcsstwitter-bootstrapbootstrap-5

AngularJS: dynamic autocomplete field with scroll functionality

This is my HTML code: <div class="form-group"> <label class='control-label col-md-4' for='id_paymentCurrency'>{{'PAYMENT_CURRENCY' | translate}}</label> <div class='col-md-4'> ...

cssangularjstypeahead.jsbootstrap-typeaheadtwitter-typeahead

Crafting a website in HTML

Hello there! I am looking to create a flexible HTML and CSS page that adjusts in size when the user resizes the browser window. I want the page to be responsive to different resolutions. I've explored various solutions on this platform, but unfortunat ...

htmlcssdrop-down-menu