Making a grid transparent

[gunzelguy]

I have a page with a background image. When I put a grid onto the page I can't make it transparent so that you can see the background image.

.grid-container {

  display: grid;

  grid-template-columns: auto auto auto;

  padding: 5px;

}

.grid-item {

  padding: 20px;

  font-size: 15px;

  text-align: left;

} 

If I delete the navbar CSS the grid gets a black background

  .navbar {

      margin-bottom: 0;

      border-radius: 0;

 background: #F0F3F4;

    }

Here is the page, still under construction

http://www.victorianrailways.net/europe2024/europe2024_01.html

[Nancy OShea]

Bootstrap's "navbar-inverse" has a light gray background by default.  Is that what you're struggling with?  I don't see any black containers.

https://www.w3schools.com/bootstrap/bootstrap_ver.asp

See screenshot:

[Ben M · Accepted solution]

Your navbar has both a navbar and navbar-inverse class. If you remove the color from "navbar" you end up with the inverse background which is #222 which is nearly black (#000). If you want a transparent effect remove the navbar-inverse class and just add an inline style so this doesn't impact all navbars like:

<nav class="navbar" style="background:transparent;"> 

[gunzelguy]

Thank you so much Ben, your solution achieved exactly what I wanted.

[Nancy OShea]

Bootstrap navbar classes & color schemes.

https://getbootstrap.com/docs/4.3/components/navbar/