• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

changing colors in bootstrap navbar-items

Community Beginner ,
Oct 29, 2022 Oct 29, 2022

Copy link to clipboard

Copied

Dear folks,

 

How can I change the colors and size of navbar-items in a bootstrap-navigation-bar withour touching the bootstrap css?

Views

166

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
community guidelines
Community Expert ,
Oct 29, 2022 Oct 29, 2022

Copy link to clipboard

Copied

Several ways:

1. Use default Bootstrap color classes  -- primary, secondary, light, dark, info, success, warning, danger.

https://www.w3schools.com/bootstrap5/bootstrap_colors.php#gsc.tab=0

 

2. Use free Bootswatch Themes  -- There are 26 themes to choose from.  Simply replace link to Bootstrap CSS file with desired Bootswatch Theme. 

https://www.bootstrapcdn.com/bootswatch/

 

Example, this is with Bootswatch Pulse Theme.

<link href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/pulse/bootstrap.min.css" rel="stylesheet">

 

image.png

3. Use SASS variables to create a custom Bootstrap Theme.  This is for experienced coders who want to leverage Bootstrap at the source with pre-complied SCSS code.  By far the most powerful feature in Bootstrap.

https://getbootstrap.com/docs/5.0/customize/overview/

 

Hope that helps.

 

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

Votes

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
community guidelines
Community Beginner ,
Oct 31, 2022 Oct 31, 2022

Copy link to clipboard

Copied

Hi Nancy,

 

Thanks for these tips. I'll check them out.

 

Regards,

Edina

Votes

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
community guidelines
Community Expert ,
Oct 29, 2022 Oct 29, 2022

Copy link to clipboard

Copied

Create a new file called styles.css (or similar) and place your overriding CSS in there Make sure that styles.css comes after the bootstrap.css

 

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
</head>

<body>

    <script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

 

NB: Never touch bootstrap.css

 

 

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Beginner ,
Oct 31, 2022 Oct 31, 2022

Copy link to clipboard

Copied

Hello BenPleysier,

 

I've got that. Already works fine with changing font-size and color of h1, h2 etc.

Votes

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
community guidelines
Community Expert ,
Oct 31, 2022 Oct 31, 2022

Copy link to clipboard

Copied

LATEST

Preview your page in a browser like Firefox or Chrome. 

Use F12 to Inspect Element.

Each Navbar element has a selector name that's targeted by CSS.  To override existing styles, you must identify the selector.   Linked text styles are different than unlinked text styles.

 

Or show us exactly what you're trying to change.

 

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

Votes

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