发表新帖
发表新帖

Changing Bootstrap NavBar color

前端 未结
关注
3 912
天命终不由人
天命终不由人 2021-01-16 20:47

I was attempting to change the navbar color in Bootstrap, but it was unsuccessful. The navbar just stays the same as if I never added the CSS or custom styling.

I ad

相关标签:
3条回答
  • 梦如初夏
    2021-01-16 21:25

    As of Bootstrap 4 you can easily change the colour of a navbar background with the 'bg' class. A few examples are below:

    <nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
<a class="navbar-brand" href="#">
<div class="collapse navbar-collapse">
<img src="#" alt="Logo" style="width:300px;">
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</nav>

    It is a basic navbar which expands on larger devices, collapses on smaller ones, and sticks to the top of the page. The "bg-white" element changes the background colour of the navbar from the default grey colour to white. A few more examples are:

    bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
bg-white
    0 讨论(0)
  • 误落风尘
    2021-01-16 21:31

    I found the solution to the issue that was occurring. It was quite a simple issue actually.

    The issue was that I was adding the bootstrap CSS in the HTML after the custom css was added.

    So it should've been:

    <head>

    <!-- Custom Styling -->
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css" />

</head>

    Thanks for all the help.

    0 讨论(0)
  • 情话喂你
    2021-01-16 21:47

    Bootstrap NavBar Generator is what you need. It is a little bit tricky when you use the CSS generated.

    In case you find that after you insert the generated stylesheet the NavBar does not change at all.

    Please including the following was what made it possible to change the navbar color:

    .navbar{ 
    background-image: none;
}

    Hope this is helpful. :D

    0 讨论(0)
 看不清?
提交回复
热议问题