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

changing colors in bootstrap navbar-items

Community Beginner ,
Oct 29, 2022 Oct 29, 2022

Dear folks,

 

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

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

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

Hi Nancy,

 

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

 

Regards,

Edina

Translate
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

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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
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

Hello BenPleysier,

 

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

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