I have the following HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm navbar-dark" style="background-color: green;">
<a class="navbar-brand" href="#">My To Do's</a>
<div class="collapse navbar-collapse">
<div class="navbar-nav">
<a class="nav-item nav-link" routerLink="">Checklist</a>
<a class="nav-item nav-link" routerLink="all-tasks">All To Dos</a>
<a class="nav-item nav-link" routerLink="about">About</a>
</div>
</div>
</nav>
</div>
</body>
</html>And when I view it, the nav-brand is munched up against the left.
Am I doing something wrong, or do I have to do the padding myself?
>Solution :
I believe this is because the navbar class, which adds padding, defaults to 0 for "x padding":
/* bootstrap.css */
.navbar {
--bs-navbar-padding-x: 0.5rem
}
To fix that, give the variable a value:
.navbar {
/* What the docs use */
--bs-navbar-padding-x: 0.5rem;
}