0

I am trying to use the Header component of material design bootstrap in my React Application. And I pasted the below line of code from official website of Material design bootstrap to implement Header collapsible when screen size is small but it. Anyone have any idea what else need to do in order to make it work in react. I just paste it inside my react component. There is some kind of state I need to maintain here.

<header>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid">
      <button
        class="navbar-toggler"
        type="button"
        data-mdb-toggle="collapse"
        data-mdb-target="#navbarExample01"
        aria-controls="navbarExample01"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarExample01">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item active">
            <a class="nav-link" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Navbar -->

  <!-- Jumbotron -->
  <div class="p-5 text-center bg-light">
    <h1 class="mb-3">Heading</h1>
    <h4 class="mb-3">Subheading</h4>
    <a class="btn btn-primary" href="" role="button">Call to action</a>
  </div>
  <!-- Jumbotron -->
</header>
James
  • 371
  • 3
  • 12
  • not sure what you copied, but you need to import those components from your node modules.. check installation: https://mdbootstrap.com/docs/react/getting-started/installation/ and how to use it: https://mdbootstrap.com/docs/react/components/jumbotron/ – Daniel Jul 20 '21 at 12:12
  • Actually I am using CDN here. That's is the reason there is no import statement. Still can we achieve that one without installing just using CDN ? – James Jul 20 '21 at 12:17
  • so are you using the JQuery version of material design? If yes, why? And if yes, where did you copy that code to? In the index.html or in a JavaScript file? – Daniel Jul 20 '21 at 12:22
  • No, I didn't copy that one might be the issue. If still not resolved, I will be better to install their node package – James Jul 20 '21 at 12:24
  • I'd highly recommend installing the node package if you're using react. There's no point in using the JQuery CDN packages when you use react – Daniel Jul 20 '21 at 12:25
  • I tried to use by installing their node package but now I am facing different issue now. For that I have raised separate thread https://stackoverflow.com/questions/68465687/getting-invalid-hook-call-error-in-react-when-i-used-materidal-design-bootstrap. Do you have any idea about that ? – James Jul 21 '21 at 10:43

0 Answers0