Some Bootstrap elements are not working - Navbar-collapse , p- , small column images-CodePudding

Thank you all for the wonderful resources so far. Been trying to sort this out the past days.
Bootstrap seems to work in some places, but not in others.

https://tellus.llc

Basic functionality seems to be there. I'm able to add many bootstrap-specific elements (rows, columns, navbar, responsive text and images), but small things don't seem to be working as expected.

My navbar will not expand or collapse on medium or small screens (copy/pasting the unmodified code straight from boostrap's website does not work in my doc either. JavaScript / dependency issue?) .

      <nav class="navbar fixed-top navbar-expand-md bg-light navbar-light" role="navigation">
      <div class="container-fluid">
          <a class="navbar-brand" href="#top">
              <img class="nav-img" src="assets/images/TellusLogo.png"/>
          </a>
          <button 
              style="margin-right:3vw;"
              class="navbar-toggler" 
              type="button" 
              data-toggle="collapse" 
              data-target="#navCollapse" 
          >
              <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navCollapse">
          <ul class="navbar-nav">
              <li class="nav-item active">
                  <a class="nav-link" href="#partners">Partners</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#training">Training</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#software">Software</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#concept">Concept</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#service">Service</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#rescue">Rescue</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#contact">Contact</a>
              </li>
          </ul>
          </div>
      </div>
    </nav>

I cannot add spacing or gaps to an element. Adding a p-1 or pt-4 class gives no padding.

Some divs will ignore the column spacing assigned to them (col-sm-4 does not collapse, and looks like a col-sm-12). The "vertical-align" is a custom class, flex container. For some reason bootstrap's grid was giving me grief here too, but it worked adding flexbox.

              <article class="container spacer-4">
              <div class="row">
                  <div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
                      <img class="img-fluid" src="../assets/images/partners/canary-labs.png" />
                  </div>
                  <div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
                      <img class="img-fluid" src="../assets/images/partners/codesys.png" />

                  </div>
                  <div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
                      <img class="img-fluid" src="../assets/images/partners/hannah-instruments.jpg" />

                  </div>
                  <div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
                      <img class="img-fluid" src="../assets/images/partners/inductive-automation-logo.png" />

                  </div>
                  <div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
                      <img class="img-fluid" src="../assets/images/partners/ssh.png" />

                  </div>
                  <div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
                      <img class="img-fluid" src="../assets/images/partners/onlogic.png" />
                  </div>
              </div>
          </article>

My best guess was jquery or some other JS dependency, but I've tried several versions of each script, to no result.
It could also be an issue with my nesting.
I'm hosting through github -> google domains, but the issues show up on my local dev server.

I figure all the info is there, but I would be happy to share anything else that would help. Thank you again!

CodePudding user response：

According to the version of bootstrap you are using i.e. 5.0, For navbar you have to change data-toggle and data-target with data-bs-toggle and data-bs-target.

Bootstrap Navbar

You grid is working fine till small screen. But you've to change

<div class="col-lg-2 col-md-4 col-sm-4 vertical-align">

with

<div class="col-lg-2 col-md-4 col-sm-4 col-4 vertical-align">

to work responsiveness for all screens.

Bootstrap Grid

CodePudding user response：

To solve issues with the Navbar-collapse in bootstrap 5 you should use 'data-bs' Your navbar-toggler has data-target and data-toggle which aren't used by bootstrap 5, use data-bs-toggle and data-bs-target instead