Why custom css not working with bootstrap

Question

Problem 1: I just learn bootstrap and created a nav-bar with bootstrap. And I also add some custom .css file but it not take any effect. But when I put my css code under <style> .. </style> it take effect.

Problem 2:(css written in HTML with style tag) (I changed margin for position)

In my nav-bar "select you location" is shifted to ward right but i want to ward left. Is there another way to do it.

img:

#loc-link {
  position: relative;
  margin: 0 900px 0 0;
}

.logo-container {
  padding: 0 0 0 6px;
  margin: 0 0 0 0;
}

.nav-location {
  display: inline-block;
}

#nav-location-line1 {
  margin-left: 20px;
  position: absolute;
  font-size: 12px;
  line-height: 14px !important;
  height: 14px;
  font-weight: 400;
}

#nav-location-line2 {
  font-size: 14px;
  line-height: 15px;
  font-weight: 700;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  <Style>
    #loc-link {
      position: relative;
      margin: 0 900px 0 0;
    }
    
    .logo-container {
      padding: 0 0 0 6px;
      margin: 0 0 0 0;
    }
    
    .nav-location {
      display: inline-block;
    }
    
    #nav-location-line1 {
      margin-left: 20px;
      position: absolute;
      font-size: 12px;
      line-height: 14px !important;
      height: 14px;
      font-weight: 400;
    }
    
    #nav-location-line2 {
      font-size: 14px;
      line-height: 15px;
      font-weight: 700;
    }
  </Style>
  <title>Document</title>
</head>

<body>
  <nav class="navbar navbar-dark bg-dark">
    <div class="logo-container">
      <a href="" class="navbar-brand" href="#">
        <img class="img_logo" src="amazon_logo.png" alt="logo_ing" href="#" height="40" width="110">
        </a>
    </div>

    <div class="navbar-nav me-auto mb-2 mb-lg-0">

      <ul class="navbar-nav me-auto mb-2 mb-lg-0 container-fluid">
        <li class="nav-item" id="loc-link">
          <span id="nav-location-line1">Hello</span>
          <span id="nav-location-line2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
                        <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
                        <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                      </svg> Select Your Asddres</span>
        </li>
      </ul>
    </div>

  </nav>

</body>

</html>

Christian · Accepted Answer · 2022-10-15T21:50:26.577

When inline CSS styles are working but external CSS does not, you have not included the external CSS in your <head>. You need to link a stylesheet file using <link rel="stylesheet" href="style.css">, learn more on MDN.

The span elements makes it impossible to move your texts in line 1 and 2. Converted them to divs. Your <span> elements are inline elements, a <div> element is a block-level element, read more about the difference in this SO post.

nav { 
  color: white;
}

.logo-container {
  padding: 0 0 0 6px;
  margin: 0 0 0 0;
}

#nav-location-line1 {
  margin: 0 0 4px 20px;
  font-size: 12px;
  font-weight: 400;
  width: 100%;
}

#nav-location-line2 {
  font-size: 14px;
  font-weight: 700;
  width: 100%;
}

.nav-item {
  float: right;
}

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </head>
<nav class="navbar navbar-dark bg-dark">
  <div class="logo-container">
<a href="" class="navbar-brand" href="#">
  <img class="img_logo" src="amazon_logo.png" alt="logo_ing" href="#" height="40" width="110">
</a>
  </div>

  <div class="navbar-nav me-auto mb-2 mb-lg-0">

<ul class="navbar-nav me-auto mb-2 mb-lg-0 container-fluid">
  <li class="nav-item">
    <div id="nav-location-line1">Hello</div>
    <div id="nav-location-line2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
      <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
      <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
      </svg> Select Your Address</div>
  </li>
</ul>
  </div>
</nav>

Thesara Subasinghe · Answer 2 · 2022-10-15T20:07:11.333

0

First of all make sure that your css file is within the same folder as the the HTML file does and then rename the css file as style.css Then insert this inside the header tag of the HTML file: <link rel="stylesheet" href="style.css">

edited Oct 15 '22 at 20:07

answered Oct 15 '22 at 20:04

Thesara Subasinghe

1
1

Why custom css not working with bootstrap

2 Answers2