No responsive links in bootstrap 4

Question

No responsive links in bootstrap 4

1.7k views Asked by Larry Joyner At 09 November 2018 at 15:40

What would make links non responsive in bootstrap? My links won't switch through my pages as they would do live. Any ideas ?

<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
   <nav class="navbar navbar-dark bg-dark navbar-expand-sm">
  <div class="container ">
   <a class="navbar-brand d-none d-sm-inline-block fixed-top" href="#">Larry J designs</a>
    <ul class="navbar-nav ">
  <li class="nav-item "><a class ="nav-link active" href="index.html">Home</a></li>
  <li class="nav-item"> <a class ="nav-link " href="about.html">About</a></li>
  <li class="nav-item"> <a class ="nav-link" href="portfolio.html">Portfolio</a></li>
  <li class="nav-item">  <a class ="nav-link" href="services.html">Services</a></li>
    </ul>
   <div class="clearfix">
   
   <ul class="navbar-nav ">
  <li class="nav-item "><a class ="nav-link active" href="index.html">Home</a></li>
  <li class="nav-item"> <a class ="nav-link " href="about.html">About</a></li>
  <li class="nav-item"> <a class ="nav-link" href="portfolio.html">Portfolio</a></li>
  <li class="nav-item">  <a class ="nav-link" href="services.html">Services</a></li>
    </ul>
   </div>
    </div>
  
   </nav>
    <!-- navbar-nav -->
 
  <div class="container">
 <section class="container" id ="mainpage">
  <div class ="row">
   <article class="col-8" id="bio">
    <h1>Welcome to  Larry J designs  </h1>
     <p class="justify-content-center">Hello, I'm Larry J , I currently live in the DC Metro area , I also love working on art in my spare time. As a teen in high I use to love to draw and build websites , Currently, I work a full time job like most , however in my spare time I love working on learning web design and drawing . Life has a long road to success , but on the road there are that you have to learn to get to the next level. </p></article>
   <section class="col-sm-4">
  <div class="row no-gutters">
   <div class="col"><img src="about-thumbnail-placeholder.png" alt="larryphoto
    " class="img-thumbnail">
   </div>
   
   
 </div>
   </section>
    </div>
      </section>
    
  



  
   </div>


 <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Original Q&A

There are 2 answers

**snack_overflow** · Answer 1 · 2018-11-09 15:46:33

You're not using rows or columns and this will have a major effect on the responsiveness of Bootstrap.

You need to look into the Bootstrap Grid system, I advise reading through this page and applying these practices to your code: https://getbootstrap.com/docs/4.0/layout/grid/

**Studocwho** · Answer 2 · 2018-11-12 22:36:49

First of all, you should note that non responsive has a different meaning in the world of code, not just the simple 'not working' definition, but also meaning the layout will adapt and respond to the device and browser sizes, this is Responsive Design.

I believe that your problem is occuring from the title overlapping the other links, stopping them from ever interacting with the mouse, only the title will interact. You can look into Chrome's Dev Tools using the right click Inspect option on the links. This happens because the title <a> has a fixed-top class. Removing this solves the issue.

From:

<a class="navbar-brand d-none d-sm-inline-block fixed-top" href="#">Larry J designs</a>

To:

<a class="navbar-brand d-none d-sm-inline-block" href="#">Larry J designs</a>

I highly suggest you read up on the Bootstrap 4 Docs to get a grasp and understand how everything works and how to use the fixed-top class if you were trying to make the nav fixed. Also, looking at the examples and inspecting their code help too.

TechQA.

No responsive links in bootstrap 4

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in TWITTER-BOOTSTRAP

Related Questions in DREAMWEAVER

Related Questions in GOOGLE-WEB-DESIGNER

Popular Questions

Popular Tags

Trending Questions