Navbar Bootstrap

Asked

Viewed 300 times

1

I am starting in the web encoding and need a help in a problem, the menu I created is not correct, it was not formatted as indicated in the bootstrap documentation, it is as list.

Curso  
------------
Início
Perfil
Serviços
Depoimentos
Contatos

Follows the code:

<!doctype html>
<html lang="pt-br">
  <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="node_modules/bootstrap/compiler/bootstrap.css">

    <link rel="stylesheet" href="node_modules/bootstrap/compiler/style.css">

    <title>Curso de bootstrap 4</title>
  </head>
  <body>

          <nav class="navbar navbar-expand-lg navbar-light bg-light">

              <div class="container">    
              <a class="navbar-brand h1 mb-0" href="#">Curso</a>


              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
                  <span class="navbar-toggler-icon"></span>
              </button>

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

                      <ul class="navbar-nav mr-auto">

                          <li class="nav-item">
                              <a class="nav-link" href="#">Início</a>
                          </li>
                           <li class="nav-item">
                              <a class="nav-link" href="#">Perfil</a>
                          </li>
                           <li class="nav-item">
                              <a class="nav-link" href="#">Serviços</a>
                          </li>
                           <li class="nav-item">
                              <a class="nav-link" href="#">Depoimentos</a>
                          </li>
                           <li class="nav-item">
                              <a class="nav-link" href="#">Contatos</a>
                          </li>
                      </ul>

                  </div>

            </div>
          </nav>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/popper/dist/umd/popper.js"></script>
    <script src="node_modules/bootstrap/dist/bootstrap.js"></script>
  </body>
</html>
html twitter-bootstrap bootstrap-4

1 answer

3


Your problem is that you are using the Bootstrap 4 menu structure, but you are indexing the CSS and JS files of Bootstrap 3. You have to pay attention to which version you are using and which documentation you are using.

If you want here is the official Navbar documentation of Bootstrap 3 https://getbootstrap.com/docs/3.3/components/#navbar

See here that is exactly your code, but with the indexed files of Bootstrap 4 and works perfectly!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    
</style>
</head>
<body>
    
        <nav class="navbar navbar-expand-lg navbar-light bg-light">

                <div class="container">    
                <a class="navbar-brand h1 mb-0" href="#">Curso</a>
  
  
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
                    <span class="navbar-toggler-icon"></span>
                </button>
  
                    <div class="collapse navbar-collapse" id="navbarSite">
  
                        <ul class="navbar-nav mr-auto">
  
                            <li class="nav-item">
                                <a class="nav-link" href="#">Início</a>
                            </li>
                             <li class="nav-item">
                                <a class="nav-link" href="#">Perfil</a>
                            </li>
                             <li class="nav-item">
                                <a class="nav-link" href="#">Serviços</a>
                            </li>
                             <li class="nav-item">
                                <a class="nav-link" href="#">Depoimentos</a>
                            </li>
                             <li class="nav-item">
                                <a class="nav-link" href="#">Contatos</a>
                            </li>
                        </ul>
  
                    </div>
  
              </div>
            </nav>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

  • Thank you very much Hugocsl, I will pay more attention to every point you quoted. you would have some material to indicate?

  • @Brunovirginio guy Ricardo Sanches has a Youtube channel that I think will help you a lot has several tutorials of Bootstrap! If my answer has helped you in any way consider marking it as Accept, in this icon below the arrows on the left side of the answer if you think it has helped solve the problem. So the site does not get its open question pending no answer accepted even though it has already been resolved. []s

Browser other questions tagged html twitter-bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.