Skip to main content
E
edinav24550678
Known Participant
October 29, 2022
Question

changing colors in bootstrap navbar-items

  • October 29, 2022
  • 2 replies
  • 533 views

Dear folks,

 

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

    This topic has been closed for replies.

    2 replies

    BenPleysier
    BenPleysier
    Community Expert
    October 30, 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!
      E
      edinav24550678Author
      Known Participant
      October 31, 2022

      Hello BenPleysier,

       

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

      Nancy OShea
      Nancy OShea
      Community Expert
      October 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
      Nancy OShea
      Nancy OShea
      Community Expert
      October 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">

       

      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
      E
      edinav24550678Author
      Known Participant
      October 31, 2022

      Hi Nancy,

       

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

       

      Regards,

      Edina

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices