changing colors in bootstrap navbar-items

Report · 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?

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

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

Report · Oct 31, 2022

Hi Nancy,

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

Regards,

Edina

Report · 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!

Report · Oct 31, 2022

Hello BenPleysier,

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

Report · Oct 31, 2022

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

changing colors in bootstrap navbar-items

Photos