Question 42731 in Html Question posted in
Some basic documentation can be found here.

Why this simple bootstrap code does not work – Html

I’m learning Bootstrap and I wanted to make a theme from sratch but now at the starter points I’m stuck with a weird problem–icons are stick to logo at the right side of page however float:left with !important declaration must align them to the left while it does not do that!

What is going on here? How can I properly align the icons to 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;
  /* does not stick the icons to left side!!! */
}
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
Tags:

2

Answers


  1. 0

    I found a solution:

    1. Inside container div I’ve added a row div.
    2. Inside the row created a d-flex justify-content-between.
    3. First element (img with logo) will be placed on the right side and second element (div with instagram logo, etc) will be placed on the left side with no need to use your instagram-icon.

    This is the code:

    <!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/[email protected]/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>

    On css always try to avoid !important and dont use float always try to use flex or grid instead to position things.

    This is Stackblitz I used: https://stackblitz.com/edit/web-platform-tqdq6r?file=index.html

    Login or Signup to reply.
  2. 0

    Bootstrap rows are flex elements, so the justify-content-between flex layout class spreads the two flex children to the sides. Learn more about flexbox.

    Don’t use floats. They’re a dated layout technique and have very few legitimate uses in 2023.

    Also consider using Bootstrap’s margin classes instead of writing your own CSS. The mt-3 class gets you two times the default spacing unit (2 x 0.5rem = 1.0rem), which is close to your 20px.

    * {
  font-family: aviny;
  font-size: 22px;
  text-align: right;
  direction: rtl;
}
    <head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search