Highlighted

bootstrap changing colour of tab bar on different html pages

Explorer ,
May 10, 2019

Copy link to clipboard

Copied

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

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>

<html lang="en">

<head>

<meta charset="utf-8">

<title>TAB PANELS</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<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>

<div class="tabs">

<a href="#" class="tab active">TAB 1</a>

<a href="#" class="tab">TAB 2</a>

<a href="#" class="tab">TAB 3</a>

<div class="tab-panel activePanel">

Tab 1 stuff goes here

</div>

<div class="tab-panel ">

Tab 2 stuff goes here

</div>

<div  class="tab-panel">

Tab 3 stuff goes here

</div>

</div>

<!-- end tabs -->

<script>

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>

Views

4.9K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

bootstrap changing colour of tab bar on different html pages

Explorer ,
May 10, 2019

Copy link to clipboard

Copied

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

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>

<html lang="en">

<head>

<meta charset="utf-8">

<title>TAB PANELS</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<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>

<div class="tabs">

<a href="#" class="tab active">TAB 1</a>

<a href="#" class="tab">TAB 2</a>

<a href="#" class="tab">TAB 3</a>

<div class="tab-panel activePanel">

Tab 1 stuff goes here

</div>

<div class="tab-panel ">

Tab 2 stuff goes here

</div>

<div  class="tab-panel">

Tab 3 stuff goes here

</div>

</div>

<!-- end tabs -->

<script>

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>

Views

4.9K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 10, 2019 0
LEGEND ,
May 10, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 10, 2019 1
Adobe Community Professional ,
May 10, 2019

Copy link to clipboard

Copied

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

.bg-darkAdds a dark grey background color to an element
.bg-infoAdds a teal background color to an element. Represents some information
.bg-lightAdds a light grey background color to an element
.bg-primaryAdds a blue background color to an element. Represents something important
.bg-secondaryAdds a grey background color to an element. Indicates a "less" important action
.bg-successAdds a green background color to an element. Indicates success or a positive action
.bg-warningAdds a yellow/orange background color to an element. Represents a warning or a negative action

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 10, 2019 1
Adobe Community Professional ,
May 10, 2019

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 10, 2019 1
Explorer ,
May 11, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 11, 2019 0
Adobe Community Professional ,
May 11, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 11, 2019 1
LEGEND ,
May 12, 2019

Copy link to clipboard

Copied

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:

<script>

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

</script>

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

<ul class="nav nav-tabs" id="myTab" role="tablist">

<li class="nav-item">

    <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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 12, 2019 1
LEGEND ,
May 12, 2019

Copy link to clipboard

Copied

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>

<html lang="en">

<head>

<meta charset="utf-8">

<title>TAB PANELS</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<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>

<div class="tabs">

<a href="#" class="tab active">TAB 1</a>

<a href="#" class="tab">TAB 2</a>

<a href="#" class="tab">TAB 3</a>

<div class="tab-panel activePanel">

Tab 1 stuff goes here

</div>

<div class="tab-panel ">

Tab 2 stuff goes here

</div>

<div  class="tab-panel">

Tab 3 stuff goes here

</div>

</div>

<!-- end tabs -->

<script>

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 12, 2019 0