Search code examples
htmltwitter-bootstrapbootstrap-5

How do I change word spacing in Bootstrap?

enter image description here

I tried making a class and assigning it to the ul tag, but it still doesn't work.

.spacing {
  word-spacing: 100px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<nav class="navbar fs-3">
  <ul class="container-fluid list-unstyled spacing">
    <li class="nav-item"><a href="index.html" class="text-decoration-none">Home</a></li>
    <li class="nav-item"><a href="" class="text-decoration-none">Blogs</a></li>
    <li class="nav-item"><a href="" class="text-decoration-none">About</a></li>
    <li class="nav-item"><a href="" class="text-decoration-none">Contact</a></li>
  </ul>
</nav>

Solution

  • You're not spacing words. You're spacing elements (list items).

    If I understand correctly, you'd override the default navbar justification of between to start (left), then add your custom margin. This isn't a responsive layout, though, as you can see in this demo. It doesn't fit on smaller screens.

    .spacing-100 li {
  margin-right: 100px;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<nav class="navbar fs-3">
  <ul class="container-fluid list-unstyled justify-content-start spacing-100">
    <li class="nav-item"><a href="index.html" class="text-decoration-none">Home</a></li>
    <li class="nav-item"><a href="" class="text-decoration-none">Blogs</a></li>
    <li class="nav-item"><a href="" class="text-decoration-none">About</a></li>
    <li class="nav-item"><a href="" class="text-decoration-none">Contact</a></li>
  </ul>
</nav>

    Alternatively, set a maximum width on the navbar to approximate the spacing you're after but maintain responsive fitment on smaller screens. (You could also do that with column sizing classes if you wanted to avoid custom CSS.) If your goal was to keep the navbar aligned left, remove the auto left margin on the container with an override (ms-0).

    .max-width-600 {
  max-width: 600px;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<nav class="navbar fs-3">
  <ul class="container-fluid list-unstyled max-width-600 ms-0">
    <li class="nav-item"><a href="index.html" class="text-decoration-none">Home</a></li>
    <li class="nav-item"><a href="" class="text-decoration-none">Blogs</a></li>
    <li class="nav-item"><a href="" class="text-decoration-none">About</a></li>
    <li class="nav-item"><a href="" class="text-decoration-none">Contact</a></li>
  </ul>
</nav>