• DEVHIDE
        • Home (current)
        • About
        • Contact
        • Cookie
        • Home (current)
        • About
        • Contact
        • Cookie
        • Disclaimer
        • Privacy
        • TOS
        Login Or Sign up

        List item links not showing( contact, pricing and download)

        24 Views Asked by Rahul Kundu At 25 February 2023 at 07:49 2025-12-25T12:02:15.971000

        ` Tindog 

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">

  <ul class="navbar-nav ms-auto">
    <li class="nav-item">
      <a class="nav-link" href="">Contact</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="">Download</a>
    </li>
  </ul>

</div>`

        This is my code the list items are not showing i dont know why please help me in that.

        They should be showing in the right side in the front of tindog

        bootstrap-4 nav web-deployment-project
        Original Q&A
        1

        There are 1 best solutions below

        0
        amel amel On 25 February 2023 at 15:25

        The collapse class is by default not showing, If you inspect your navbar div you will fount out .collapse:not(.show) is active, So you should add the class show to your navbar div like In the example bellow:

        <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Bootstrap4 navbar</title>
  </head>
  <body>
    <div class="collapse show navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Download</a>
          </li>
        </ul>
      </div>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

        For better displaying of your navbar you can consult the official bootstrap website and see the navbar component page: https://getbootstrap.com/docs/4.6/components/navbar/

        Related Questions in BOOTSTRAP-4

        • Displaying a Movie List on a Website Using Jinja2 and Bootstrap
        • I just cant make it work, HTML, JS and Firebase error
        • enable overflown data visible outside the container
        • Html + Css good response on computer (even in minimized mode) but bad on mobile
        • n is not a constructor error for bs4.5.2 dropdown and jquery 3.5.1
        • How to write HTML CSS code for a header navbar that too responsive
        • Change Opacity of Bootstrap Button
        • PhotoSwipe image position affected by other img elements in html on mobile
        • Should i learn Bootstrap in 2024
        • Having trouble sizing single resizable column with Bootstrap
        • In Boostrap 4 how can I change the the translucency of toasts to fully opaque?
        • Project was bootstrapped with an old unsupported version of tools while creating react app
        • Tooltip positioned too high with data-bs-placement="top" in Bootstrap 5
        • TypeError when using Popper with Bootstrap 4
        • How can I generate a Business Model Canvas with Bootstrap Cards and integrate it as html in a qmd-file?

        Related Questions in NAV

        • is there a way to make the hover function fill space follow border lines below its block element
        • CSS underline animation exceeds navlink and only displays one length for all
        • This specific CSS property is not applied (crossed out in inspection mode)
        • Sticky navigation sticks too suddenly
        • Mobile nav items not toggling to close
        • Issue with next.js tailwind secondary sub-navigation menu versions visibility onMouseLeave
        • Navbar is overflowing when added the postion fixed to it
        • live website does not look like local host website, navbar not showing up on mobile
        • Nav bar doesn't extend to the 100% of the webpage when using a video as a background
        • Change class of Parent Component from Child Component
        • How to split the nav bar into 3 sections?
        • Vertically align a menu bar with text and icon elements and a cart icon outside of it
        • Second NavBar hover a block not just a line
        • Read pdf empty and delete
        • How do I make a horizontal centered navbar that doesn't stretch the whole page?

        Related Questions in WEB-DEPLOYMENT-PROJECT

        • How can I make a react app run intendedly on the Html without installing node packages
        • How do I remove hover animation from menu in WordPress website? [Bricksy Theme]
        • how to get payment status from payments made by a user via upi links (upi deep linking) shared to the user
        • Does razorpay charge additional fees for sms and email notification service through upi payment link integration
        • Currently I am learning react, trying to create react app, when I try to run "npx parcel index.html" I am getting following error
        • how can I Embed jupyternotebook in my website
        • Is Plotly Dash Enterprise a viable alternative to React for a non-data visualization web app? What are its drawbacks?
        • Elementor loop grid
        • Html input tag canot recognize corel draw and Autocad files extensions?
        • How to remove the following PHP errors from the website?
        • Why my PHP code is not showing on the screen?
        • How i can hide my src file on inspect because it shows the whole file structure of my app
        • Cannot acess nav to make changes after checked checkbox in css
        • List item links not showing( contact, pricing and download)
        • Fullstack web-hosting services

        Trending Questions

        • UIImageView Frame Doesn't Reflect Constraints
        • Is it possible to use adb commands to click on a view by finding its ID?
        • How to create a new web character symbol recognizable by html/javascript?
        • Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
        • Heap Gives Page Fault
        • Connect ffmpeg to Visual Studio 2008
        • Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
        • How to avoid default initialization of objects in std::vector?
        • second argument of the command line arguments in a format other than char** argv or char* argv[]
        • How to improve efficiency of algorithm which generates next lexicographic permutation?
        • Navigating to the another actvity app getting crash in android
        • How to read the particular message format in android and store in sqlite database?
        • Resetting inventory status after order is cancelled
        • Efficiently compute powers of X in SSE/AVX
        • Insert into an external database using ajax and php : POST 500 (Internal Server Error)

        Popular # Hahtags

        javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

        Popular Questions

        • How do I undo the most recent local commits in Git?
        • How can I remove a specific item from an array in JavaScript?
        • How do I delete a Git branch locally and remotely?
        • Find all files containing a specific text (string) on Linux?
        • How do I revert a Git repository to a previous commit?
        • How do I create an HTML button that acts like a link?
        • How do I check out a remote Git branch?
        • How do I force "git pull" to overwrite local files?
        • How do I list all files of a directory?
        • How to check whether a string contains a substring in JavaScript?
        • How do I redirect to another webpage?
        • How can I iterate over rows in a Pandas DataFrame?
        • How do I convert a String to an int in Java?
        • Does Python have a string 'contains' substring method?
        • How do I check if a string contains a specific word?
        .

        Copyright © 2021 Jogjafile Inc.

        • Disclaimer
        • Privacy
        • TOS
        • Homegardensmart
        • Math
        • Aftereffectstemplates