bootstrap changing colour of tab bar on different html pages

Report · May 10, 2019

I am using bootstrap 4.3.1 for a tab bar.

I want to have different colour tab bars on different HTML pages.

say blue / red/ orange / green

I can change the colour in the css but it alters them all. I have tried to copy the css and change the name and alter the name in the css and html page but this does not work.

This is the code that changes the tab bar colour is bootstap

.nav-tabs .nav-link.active,

.nav-tabs .nav-item.show .nav-link {

color: #FFFFFF;

background-color: #2399FB;

border-color: #dee2e6 #dee2e6 #fff;

}

is there a way to do this?

thanks

Tim

Report · May 10, 2019

You shouldn't change the default bootstrap.css file.

Create a custom css file and link it AFTER the bootstrap.css file.

In your case just create a style block in the page where you want to change the bootstrap tab css color. As long as the style block is AFTER the link to the default bootstrap.css file it should work.

<style>

.nav-tabs .nav-link.active,

.nav-tabs .nav-item.show .nav-link {

color: #FFFFFF;

background-color: #2399FB;

border-color: #dee2e6 #dee2e6 #fff;

}

</style>

Report · May 10, 2019

If you're going to use Bootstrap, learn how to use the built-in utiility & conceptual classes. No CSS editing needed.

.bg-dark Adds a dark grey background color to an element

.bg-info Adds a teal background color to an element. Represents some information

.bg-light Adds a light grey background color to an element

.bg-primary Adds a blue background color to an element. Represents something important

.bg-secondary Adds a grey background color to an element. Indicates a "less" important action

.bg-success Adds a green background color to an element. Indicates success or a positive action

.bg-warning Adds a yellow/orange background color to an element. Represents a warning or a negative action

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 10, 2019

Adding to Nancy OShea's reply, see Bootstrap 4 Colors

Wappler, the only real Dreamweaver alternative.

Report · May 11, 2019

That is perfect. Thank You.

Just one other question about tabs on bootstrap.

What is the best way to link to a page but on that page, I need it to open Tab 2 instead of the standard tab 1??

Thanks

Tim

Report · May 11, 2019

https://forums.adobe.com/people/tim+cross wrote

What is the best way to link to a page but on that page, I need it to open Tab 2 instead of the standard tab 1??

Use JavaScript or jQuery code.

javascript - Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink - Stack Overflow

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 12, 2019

Further to the other suggestions you could just throw the below on the page after the link to the jQuery library to show specific tabs as being active on page load:

$('#myTab a[href="#profile"]').tab('show')

</script>

Below is some standard Bootstrap tab code: The above refers to the tabs 'href'

<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>

</li>

</ul>

So plenty of ways you can consider.

Report · May 12, 2019

Anyone not wanting a Bootystrap/jQuery version can consider the code below. I'm told jQuery is dead in the water. Bootstrap is probably another 2 years away from dropping jQuery dependancy, so y'all who are currently using Bootstrap, according to the nerds, are going backwards. Happy Days!!

<!doctype html>

<head>

<title>TAB PANELS</title>

<style>

body {

font-family: helvetica, verdana;

font-size: 16px;

line-height: 20px;

color: #666;

}

.tabs {

width: 60%;

margin: 0 auto;

}

@media screen and (max-width: 768px) {

.tabs {

width: 95%;

}

.tab-panel {

display: none;

}

.tab {

text-decoration: none;

padding: 14px 20px 10px 20px;

display: inline-block;

color:#36F;

}

.active {

display: inline-block;

border-radius: 4px 4px 0 0;

border: 1px solid #d9d9d9;

border-bottom: 1px solid #fff;

color: #666;!important;

}

.activePanel {

display: block;

margin-top: -1px;

border-top: 1px solid #f2f2f2;

padding: 20px;

}

</style>

</head>

<body>

Tab 1 stuff goes here

</div>

Tab 2 stuff goes here

</div>

Tab 3 stuff goes here

</div>

var currentTab = document.querySelectorAll('.tab');

var tabPanel = document.querySelectorAll('.tab-panel');

for(var i = 0; i < currentTab.length; i++) {

currentTab.position = i;

currentTab.onclick = function() {

activePanel = this.position;

for(var i = 0; i < currentTab.length; i++) {

currentTab.classList.remove('active');

tabPanel.classList.remove('activePanel');

}

this.classList.add("active");

tabPanel[activePanel].classList.add('activePanel');

}

// Specific page

// Remove 'active' and 'activePanel' from html and set the active tab/panel below

currentTab[0].classList.add('active');

tabPanel[0].classList.add('activePanel');

</script>

</body>

</html>

Adobe Community

bootstrap changing colour of tab bar on different html pages

1 Correct answer