Known Participant

Answered

Cannot change BG colour in bootstrap Navbar

Forum|Forum|2 years ago
February 5, 2024
1 reply
3654 views

Hi everyone

I am a complete beginner in DW this question might sound stupid but I could not find anything on the internet for this specific problem.

So, I am trying to create a website, with Bootstrap, and I have a couple of questions.

How do I change the BG colour of my navbar? I have followed a tutorial on YouTube but, despite I do everything the guy does my colour won't change.

Created a new style.css sheet, added a selector for the navbar, and changed BG colour to red, but as you can see the colour is still White.

thanks for any help you can provide

This is the code:

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Logo</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent1">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
              <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
              <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Something else here</a> </div>
              </li>
              <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>

This topic has been closed for replies.

Correct answer osgood_

and if I want to make it another color other than red I can't do it

By @Stephan5FE6

Change the color of the Bootstrap css selector bg-danger:

.bg-danger {

background-color: purple!important;

}

or better, rather than deface the default Bootstrap values make your own css selector

.nav-bg {

background-color: darkolivegreen;

}

Never directly alter the Bootstrap default css file, unless you're an expert. If you are going to overide the default css values do it in a seperately link stylesheet, which should be linked to your page after the link to the Bootstrap default css file, or you can embed the css styles in the head of the page whilst building.

BenPleysier

Community Expert

Change the first line to

<nav class="navbar fixed-top navbar-expand-lg bg-danger navbar-dark"> <a class="navbar-brand" href="#">Logo</a>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

S

Stephan5FE6Author

Known Participant

Thank you very much this does the trick, I do not understand why can't I change it from the properties tab, and if I want to make it another color other than red I can't do it

BenPleysier

Community Expert

is this doable in Dreamweaver?

By @Stephan5FE6

It really comes down to either learning how Bootstrap works which will take time or learning to code which will take time.

All l can say is depending upon Bootstrap will box you into a small amount of default options whereas having a good grasp of coding will allow you to eventually do what you want to do not what a framework says you can do.

I can't deny you probably couldn't get a job these days without knowing Bootstrap however a lot of developers need educating these days, rather than just following the herd.

It really comes down to either learning how Bootstrap works which will take time or learning to code which will take time.

By @osgood_

When using the likes of Dreamweaver, you will need to learn to code in HTML, CSS and JavaScript. If the application requires serverside actions, then you will also have to learn a serverside coding language like PHP. Do not use the versions of PHP available in Dreamweaver, these are no longer supported.

To reduce having an in-depth knowlege of HTML, CSS and JavaScript, you can use Bootstrap instead, this will flatten the learning curve for each of these languages. There are plenty of Bootstrap examples on the internet that include HTML while Bootstrap takes care of the CSS and JavaScript.

If you need serverside actions, then I suggest using a product that Dreamweaver could have been had it listened to its userbase back in time. This application is Wappler.

The reason that I use Wappler, despite my indepth knowledge of HTML, CSS and some knowledge of JavaScript, is that it greatly reduces development time by writing the code for me. It does use Bootstrap for styling and for components. A very basic knowledge of Bootstrap is required and I have published plenty of YouTube videos to help you out.

Using Wappler, I can concentrate on what is important rather than fiddling around with code. The important part is to get a functioning website/webapplication.

Having said that, the above is mainly for the lone developer/hobbyist. If you plan to become part of a team working for a corporation, then you will be obliged to work to their workflows which may include a more indepth knowledge of certain programming languages not restricted to just HTML, CSS and JavaScript. C dialects and Java come to mind.

To give you an idea of how Wappler with Bootstrap works, Have a look at a very simple project where I email the information from a contact form:

https://youtu.be/xVZx7aaz2Gs?si=j4vzf6LuQR894zKN

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded