Cannot change BG colour in bootstrap Navbar

[Stephan5FE6]

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>

[BenPleysier]

Change the first line to

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

[Stephan5FE6]

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

[osgood_ · Accepted solution]

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;

}

<nav class="navbar fixed-top navbar-expanded-lg nav-bg navbar-dark">

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.

[Stephan5FE6]

Yes i figured that out after a day of struggle, thanks for your help anyway, just starting out with DW and is not being easy

[Nancy OShea]

There's no need for custom CSS code if you learn Bootstrap's contextual color classes. 

https://getbootstrap.com/docs/4.0/utilities/colors/

Likewise, you can replace the default Bootstrap CSS in your document with a free Bootswatch Theme.  See below for theme options.

https://bootswatch.com/

As you gain more experience with Bootstrap, you can leverage your styles with the power of SCSS variables & mixins, giving you complete control over your site's appearance from a few lines of code.

https://themes.getbootstrap.com/guide/

Bootstrap's beauty is that it allows you to work smarter; not harder.  😁

[osgood_]

There's no need for custom CSS code if you learn Bootstrap's contextual color classes. 

By @Nancy OShea

That's if you don't want a different color or color scheme to the default options available.

[Stephan5FE6]

Are this the Bootstrap's contextual color classes ??

[osgood_]

They are BUT they are used nowhere in Bootstrap v4, as far as I can see.

So if you want to change bg-danger to blue instead of red then you need to add the variable for blue to the css selector for .bg-danger. Should be done in a seperate stylesheet, unless you are intending to change all the default variables.

.bg-danger {
background-color: var(--blue)!important;
}

It makes no sense to change the variable color hexidecimal value ie --blue: #007bff; to any other color, apart from an alternative blue hue, as that variable name is blue, so you would not want to really change its color value to green etc

You might however want to change a generic var value say --success to another color as it will make more sense because the variable name is less specific.

So the lesson is IF you are planning to introduce your own color scheme use less specific variable names, just in case you want to change the color values otherwise to make sense you will need to change the variable name as well and update that variable wherever it is used in the css selectors. 

Personally speaking in my opinion you're much better off not using Bootstrap in this day and age. It was there when responsive construction was difficult to accomplish but its simple these days with the introduction of flexbox and grid and don't forget Bootstrap was put together by Twitter (now X), you're not Twitter or X, so use something less verbose and more streamlined - you will most probably end up with 1000's of lines of redundant css linked to your page.......just my personal opinion, others will of course disagree.

[Stephan5FE6]

The way I have done it is:

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

Remove the navbar-ligh bg-light and then create a new selector called .navbar and chose the color from properties panel

It works, but do you think is the right way to do it?

[BenPleysier]

This is the correct way

https://getbootstrap.com/docs/5.3/components/navbar/

[Stephan5FE6]

Personally speaking in my opinion you're much better off not using Bootstrap in this day and age. It was there when responsive construction was difficult to accomplish but its simple these days with the introduction of flexbox and grid and don't forget Bootstrap was put together by Twitter (now X), you're not Twitter or X, so use something less verbose and more streamlined - you will most probably end up with 1000's of lines of redundant css linked to your page.......just my personal opinion, others will of course disagree.

By @osgood_

is this doable in Dreamweaver?

[osgood_]

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.

[BenPleysier]

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

[osgood_]

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.

By @BenPleysier

Really, that's not what some of your learned colleagues over at the Wappler forum say, who have been using the application for some considerable time They say its quicker to code at times rather than use the UI, which requires you to go through a selection process, some of it can l assume be fairly lengthy presumably. Of course those kinds of posts eventually get removed from the forum by the application builders I assume to protect the product. I read that post with great interest of course as l've always maintained coding is king as it will allow you to get beyond what any bit of coding software can offer by default.

[BenPleysier]

I see that you are offering your professional opinion once again. But unless you have tried the product, you are in no position to offer advice.

[osgood_]

I see that you are offering your professional opinion once again. But unless you have tried the product, you are in no position to offer advice.

By @BenPleysier

I'm not offering any advice, I'm offering opinions of those who have tried and tested the product over a long period of time, who dont obviously share your opinion, in some instances. If the post wasn't deleted by those that want to conceal a balanced view of all users, others could share those observations. What they do then is up to them of course.

There's obviously going to be good and bad experiences, different opinions, but I have no time for companies who 'stifle' those poor experiences in favour of good experiences. A balanced view is always the preferred outcome for the benefit of the potential customer. 

[BenPleysier]

For your information, only spam posts are deleted. No other posts are deleted and can be viewed at any time by current users of Wappler.

Are you one of those users? Do you know what is happening or are you once again guessing?

As a case in mind, see.

[osgood_]

For your information, only spam posts are deleted. No other posts are deleted and can be viewed at any time by current users of Wappler.

Are you one of those users? Do you know what is happening or are you once again guessing?

As a case in mind, see.

By @BenPleysier

So what you are saying if l'm correct, you have to be a paying customer to view any remarks/opinions which are negative against the product, how does that help a potential customer before they commit financially to get a balanced view?

I guess l was in the right place at the right time to view the post before it was concealed. A little.deceptive if that is what you are implying in my opinion........l just wonder how many more posts have been concealed from my eyes, as l don't visit regularlyl

[BenPleysier]

So what you are saying if l'm correct, you have to be a paying customer to view any remarks/opinions which are negative against the product, how does that help a potential customer before they commit financially to get a balanced view?

By @osgood_

• Is that what I showed you?????
• Are you a paying customer?????
• Are you a potential customer?????

Yes, paying customers are also able to view the topics. For your information, I fail to see your point in this discussion.  That is my final statement to you in this discussion.

[osgood_]

So what you are saying if l'm correct, you have to be a paying customer to view any remarks/opinions which are negative against the product, how does that help a potential customer before they commit financially to get a balanced view?

By @osgood_

• Is that what I showed you?????
• Are you a paying customer?????
• Are you a potential customer?????

Yes, paying customers are also able to view the topics. For your information, I fail to see your point in this discussion.  That is my final statement to you in this discussion.

By @BenPleysier

I could potentially be a paying customer, that l think answers your bullet points, clearly.

Let's be clear because you are not, in my opinion. So non paying potential customers can only see positive remarks/opinions which are posted to the forum whilst negative remarks, even if posted by long term users of the product, get quickly taken down. If that is the case, as you seem to be implying then thats my point, it's rather concealing.

For instance, l can no longer see the feedback post l was initially referring to (unless it's been re-instated since l last visited the forum) , whilst only paying customers can, is what you are confirming, l think.

My only interest was observing what long term users thought, quite interesting, a balanced view and opinions to base information on. Of course everyone has different experiences and opinions but they all provide a better picture, whether positive or negative.

[BenPleysier]

If you are going to use Bootstrap, then please go for version 5 of Bootstrap.

Here you will learn all about Boostrap v 5.3 (the latest version)

https://getbootstrap.com/docs/5.3/getting-started/introduction/

and about customising colours in Bootstrap

https://getbootstrap.com/docs/5.3/customize/color/

[Stephan5FE6]

Thanks for the resources provided I'll take a look at them, bootstrap makes things much easier but still hard for someone who's not a coder. Thanks to DW at least I can start something even, if sometimes there is still the necessity to go to the code and edit from there