如何将菜单更改为响应式引导菜单

Question

我想在 codepen 中显示的示例中使用 bootstrap 5 响应式菜单，我尝试了一些东西，但它一直在以一种方式或方式破坏。

https://codepen.io/KGuide/pen/WNogyyV

我想使用引导菜单并替换当前菜单，以便该菜单对 hover 上的 animation 响应大屏幕。

<nav class="navbar navbar-expand-lg navbar-light p-5">
            <div class="container">
              <a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png"/></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Offers</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>

 console.clear(); const nav = document.querySelector(".nav-container"); const blob = document.querySelector(".nav-container svg"); gsap.set(blob, {xPercent: -50, x:innerWidth / 2}); nav.addEventListener("mousemove", function(e){ gsap.to(blob, {duration: 0.2, x: e.clientX, overwrite: 'auto'}); }); nav.addEventListener("mouseleave", function(e){ gsap.to(blob, {duration:0.1, x: innerWidth / 2, overwrite: `auto`}); });

 body{font-family: "Open Sans Condensed"; background: black;} h1 {font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600;}.c-hotel h3 {font-size: 1.2em; font-weight: 600;}.logo {max-width: 160px;}.nav-container nav { display: flex; justify-content: space-around; background:white; height:100px; }.nav-container nav a { color: black; text-decoration: none; font-size: 20px; font-family:"Roboto"; font-weight: 600; color: #358E9D; text-transform: uppercase; padding: 10px 20px 20px 20px; line-height: 70px; }.nav-container{position: relative;}.nav-container svg{ position: absolute; top:100%; left:0; height:20px; z-index: 1; }.nav-container path{ fill:white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Roboto:wght@300&display=swap" rel="stylesheet"> <div class="containerx nav-container"> <nav> <a href="#">HOME</a> <a href="#">DINE</a> <a href="#"><img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" /></a> <a href="#">HOTELS</a> <a href="#">CONTACT</a> </nav> <svg viewBox="0 0 200 20"> <path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 120 0 200 0 Z"></path> </svg> </div> <.--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <:[endif]--> <.-- <nav class="navbar navbar-expand-lg navbar-light p-5"> <div class="container"> <a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png"/></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Offers</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav> --> <div class="container-fluid mb-3 mt-0 p-0"> <div class="row gx-0"> <div class="col-lg-6 col-md-6 mb-sm-4 mb-md-0 mb-lg-0 border-0"> <div class="card bg-dark text-white text-center shadow-sm rounded-0"> <img src="https.//www?arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg.itok=CYsgY2Qi" class="card-img" alt=":.."> <div class="card-img-overlay d-flex align-items-center"> <h2 class="card-title text-center w-100 "> HEADING ONE</h2> </div> </div> </div> <div class="col-lg-6 col-md-6"> <div class="card bg-dark text-white text-center shadow-sm rounded-0 border-0"> <img src="https.//www?arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg.itok=CYsgY2Qi" class="card-img" alt="..."> <div class="card-img-overlay"> <h2 class="card-title">HEADING TWO</h2> <!-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> --> </div> </div> </div> </div> </div>

Answer 1

这是使用 Bootstrap 5.0 中的导航栏的页面版本，其中徽标位于中心以进行更大的显示。

更新

在我最初的答案中，我使用两个徽标在布局上作弊，一个用于移动设备，一个用于更大的显示器，以使四个链接周围的间距和徽标通过使用“justify-content-evenly”来匹配原始请求。 这确实在所有项目之间以及浏览器边缘与第一个和最后一个项目之间提供了相等的空间，但它具有重复的内容。

在我的更新中，我使用一个徽标并拆分两个导航栏折叠列表之间的链接。 将链接拆分为两个单独的导航栏折叠列表，为大屏幕上的徽标提供了一个中间位置。 我使用order: 2将徽标从小屏幕上的导航栏左侧移动到更宽屏幕上的中间。

使用 flex-grow-1 将两个 navbar-collapse div 设置为展开以适应可用空间。 navbar-collapse div 中的ul列表设置为w-100和justify-content-evenly以分隔两个链接。

因为有两个 navbar-collapse div，所以我修改了 navbar-toggler 按钮以使用data-bs-target的 class 值而不是 id，并列出了aria-controls="navbarContent1 navbarContent2"的两个 navbar-collapse div 的 id aria-controls="navbarContent1 navbarContent2" ，两个 id 之间有一个空格。

虽然最初的问题是关于让 Bootstrap 5 导航栏与示例匹配，但我还修改了 Green Sock animation (GASP) 的设置：

• 添加了用于加载、调整大小、方向的侦听器以配置或重新配置 gasp 设置。
• 从 innerWidth 切换到 document.documentElement.clientWidth – innerWidth 包括宽度中的滚动条，如果有滚动条，它将向右移动 blob。 clientWidth 避免了这个问题。
• 修改了 blob 的 svg 路径——原来的路径有点不平衡。

 const nav = document.querySelector(".navbar"); const blob = document.querySelector("svg.nav-blob"); function initiateBlob() { gsap.set(blob, { xPercent: -50, x: document.documentElement.clientWidth / 2 }); } nav.addEventListener("mousemove", function(e) { gsap.to(blob, { duration: 0.2, x: e.clientX, overwrite: 'auto' }); }); nav.addEventListener("mouseleave", function(e) { gsap.to(blob, { duration: 0.1, x: document.documentElement.clientWidth / 2, overwrite: 'auto' }); }); window.addEventListener('load', initiateBlob, false); window.addEventListener('resize', initiateBlob, false); window.addEventListener('orientationchange', initiateBlob, false);

 body { font-family: "Open Sans Condensed"; background: black; } h1 { font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600; }.logo { max-width: 160px; } a.nav-link { color: black; text-decoration: none; font-size: 20px; font-family: "Roboto"; font-weight: 600; color: #358E9D; text-transform: uppercase; padding: 10px 20px 20px 20px; }.navbar-nav.nav-link { padding-left: 1rem; } svg.nav-blob { position: absolute; top: 100%; left: 0; height: 20px; z-index: 1; display: none; } svg.nav-blob path { fill: white; } @media (min-width:768px) {.sr-md-only { position: absolute; left: -10000px; top: auto; overflow: hidden; } a.nav-link { line-height: 70px; }.nav-item { width: 6.75rem; text-align: center; }.navbar-expand-md { justify-content: space-evenly; } svg.nav-blob { display: block; }.card-img, .card-img-top { border-top-left-radius: 0; border-top-right-radius: 0; } }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Roboto:wght@300&display=swap" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script> <nav class="navbar navbar-light navbar-expand-md bg-white"> <div class="container-lg"> <a href="/" class="navbar-brand mx-md-0 p-2 d-block order-md-2"><img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" alt="Logo image" /></a> <button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target=".navbarContent" aria-controls="navbarContent1 navbarContent2" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div id="navbarContent1" class="navbar-collapse collapse flex-grow-1 navbarContent order-md-1"> <ul class="navbar-nav w-100 justify-content-evenly"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">HOME</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DINE</a> </li> </ul> </div> <div id="navbarContent2" class="navbar-collapse collapse flex-grow-1 navbarContent order-md-3"> <ul class="navbar-nav w-100 justify-content-evenly"> <li class="nav-item"> <a class="nav-link" href="#">HOTELS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">CONTACT</a> </li> </ul> </div> <svg class="nav-blob" viewBox="0 0 200 20"> <path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 140 0 200 0 Z"></path> </svg> </div> </nav> <div class="container-fluid mb-3 mt-0 p-0"> <div class="row gx-0"> <div class="col-12 col-md-6"> <div class="card bg-dark text-white text-center border-top-0"> <img src="https://via.placeholder.com/670x395.png" class="card-img" alt="Placeholder image"> <div class="card-img-overlay"> <h2 class="card-title"> HEADING ONE</h2> </div> </div> </div> <div class="col-12 col-md-6"> <div class="card bg-dark text-white text-center border-top-0"> <img src="https://via.placeholder.com/670x395.png" class="card-img" alt="Placeholder image"> <div class="card-img-overlay"> <h2 class="card-title">HEADING TWO</h2> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-12 vh-100"> <p>Section to give height to the page.</p> </div> </div> </div>

我用相同大小的占位符图像替换了原始图像。

如何处理移动菜单的单独菜单项来自另一个问题的答案： Bootstrap 4 navbar with brand center and links on the left, center and right

Answer 2

您可以为桌面和移动设备制作单独的导航，如下面的片段。

稍后谢谢我。

 console.clear(); const nav = document.querySelector(".nav-container"); const blob = document.querySelector(".nav-container svg"); gsap.set(blob, {xPercent: -50, x:innerWidth / 2}); nav.addEventListener("mousemove", function(e){ gsap.to(blob, {duration: 0.2, x: e.clientX, overwrite: 'auto'}); }); nav.addEventListener("mouseleave", function(e){ gsap.to(blob, {duration:0.1, x: innerWidth / 2, overwrite: `auto`}); });

 body{font-family: "Open Sans Condensed"; background: black;} h1 {font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600;}.c-hotel h3 {font-size: 1.2em; font-weight: 600;}.logo {max-width: 160px;}.nav-container nav { display: flex; justify-content: space-around; background:white; height:100px; }.nav-container nav a { color: black; text-decoration: none; font-size: 20px; font-family:"Roboto"; font-weight: 600; color: #358E9D; text-transform: uppercase; padding: 10px 20px 20px 20px; line-height: 70px; }.nav-container{position: relative;}.nav-container svg{ position: absolute; top:100%; left:0; height:20px; z-index: 1; }.nav-container path{ fill:white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Roboto:wght@300&display=swap" rel="stylesheet"> <div class="containerx nav-container"> <nav class="d-none d-lg-block"> <a href="#">HOME</a> <a href="#">DINE</a> <a href="#"><img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" /></a> <a href="#">HOTELS</a> <a href="#">CONTACT</a> </nav> <svg viewBox="0 0 200 20"> <path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 120 0 200 0 Z"></path> </svg> </div> <.--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <:[endif]--> <nav class="navbar d-lg-none navbar-expand-lg navbar-light p-5"> <div class="container"> <a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png" alt="Logo"/></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DONE</a> </li> <li class="nav-item"> <a class="nav-link" href="#">HOTELS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav> <div class="container-fluid mb-3 mt-0 p-0"> <div class="row gx-0"> <div class="col-lg-6 col-md-6 mb-sm-4 mb-md-0 mb-lg-0 border-0"> <div class="card bg-dark text-white text-center shadow-sm rounded-0"> <img src="https.//www.arabnews?com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg.itok=CYsgY2Qi" class="card-img" alt=".:."> <div class="card-img-overlay d-flex align-items-center"> <h2 class="card-title text-center w-100 "> HEADING ONE</h2> </div> </div> </div> <div class="col-lg-6 col-md-6"> <div class="card bg-dark text-white text-center shadow-sm rounded-0 border-0"> <img src="https.//www.arabnews?com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg.itok=CYsgY2Qi" class="card-img" alt="..."> <div class="card-img-overlay"> <h2 class="card-title">HEADING TWO</h2> <!-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> --> </div> </div> </div> </div> </div>

Answer 3

也许这可以帮助

• 我在媒体（767px）中添加 jquery 和 css

• 我在点击菜单栏时制作弹出动画菜单。

• 您的导航栏 html 结构不适合使菜单响应，这就是为什么我为移动设备添加额外菜单以使响应。

 console.clear(); const nav = document.querySelector(".nav-container"); const blob = document.querySelector(".nav-container svg"); gsap.set(blob, { xPercent: -50, x: innerWidth / 2 }); nav.addEventListener("mousemove", function (e) { gsap.to(blob, { duration: 0.2, x: e.clientX, overwrite: "auto" }); }); nav.addEventListener("mouseleave", function (e) { gsap.to(blob, { duration: 0.1, x: innerWidth / 2, overwrite: `auto` }); }); window.onresize = function () { gsap.set(blob, { xPercent: -50, x: innerWidth / 2 }); nav.addEventListener("mousemove", function (e) { gsap.to(blob, { duration: 0.2, x: e.clientX, overwrite: "auto" }); }); nav.addEventListener("mouseleave", function (e) { gsap.to(blob, { duration: 0.1, x: innerWidth / 2, overwrite: `auto` }); }); }; /*****For menu open*******/ $(document).ready(function () { $('.menu-btn').click(function(event) { $('.navbar-demo').toggleClass('open-nav'); }); });

 body{font-family: "Open Sans Condensed"; background: black;} h1 {font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600;}.c-hotel h3 {font-size: 1.2em; font-weight: 600;}.logo {max-width: 160px;}.nav-container nav { display: flex; justify-content: space-around; background:white; height:100px; }.nav-container nav a { color: black; text-decoration: none; font-size: 20px; font-family:"Roboto"; font-weight: 600; color: #358E9D; text-transform: uppercase; padding: 10px 20px 20px 20px; line-height: 70px; }.nav-container{position: relative;}.nav-container svg{ position: absolute; top:100%; left:0; height:20px; z-index: 1; }.nav-container path{ fill:white; } /*************************/.navbar-demo button.menu-btn { display:none; } header#header { display: none; } /******responsive menu css*******/ @media only screen and (max-width: 767px){ header#header { display: block; } nav.desktop-menu { display: none; }.navbar-demo button.menu-btn { position: absolute; top: 0; right: 0; background-color: unset; border: 0; font-size: 26px; display:block; padding: 15px; color: #000; outline: none; }.navbar-demo{ height:100%; z-index: 999; }.navbar-demo.nav-bar { background-color: #ffff; transition: 1s; height: 100%; position: fixed; height: 100vh; width: 100%; flex-direction: column; clip-path: circle(100px at 138% -20%); -webkit-clip-path: circle(100px at 138% -20%); transition: all 1s ease-out; pointer-events: none; }.navbar-demo.open-nav.nav-bar{ clip-path: circle(1100px at 190% -10%); -webkit-clip-path: circle(1100px at 90% -10%); pointer-events: all; }.navbar-demo { display: table; width: 100%; position: fixed; z-index: 99; }.navbar-demo.nav-bar ul li { display: block; }.navbar-demo.nav-bar ul { padding: 0; display: table; text-align: center; display:flex; flex-wrap:wrap; justify-content:center; align-items: center; margin: 0; padding: 0; }.navbar-demo.nav-bar ul li a { font-size: 18px; display: inline-block; text-align: center; text-decoration: none; color: #fff; padding: 18px; text-transform: uppercase; }.nav-bar { text-align: center; display:flex; flex-wrap:wrap; justify-content:center; align-items: center; position: relative; }.navbar-demo.nav-bar ul li a { display: block; color: #000; }.navbar-demo.open-nav button.menu-btn i:before { content: '\f00d '; }.nav-container svg { display: none; }.logo-main { background-color: white; }.container-fluid.mb-3.mt-0.p-0 { padding-top: 57px;important; } }

 <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Roboto:wght@300&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="containerx nav-container"> <nav class="desktop-menu"> <a href="#">HOME</a> <a href="#">DINE</a> <a href="#"><img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" /></a> <a href="#">HOTELS</a> <a href="#">CONTACT</a> </nav> <header id="header" class="navbar-demo"> <div class="logo-main"> <a href="#"><img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" /></a> </div> <div class="nav-bar"> <ul> <li> <a href="#">HOME</a> <a href="#">DINE</a> <a href="#">HOTELS</a> <a href="#">CONTACT</a> </li> </ul> </div> <button type="" class="menu-btn"><i class="fa fa-bars" aria-hidden="true"></i></button> </header> <svg viewBox="0 0 200 20"> <path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 120 0 200 0 Z"></path> </svg> </div> <div class="container-fluid mb-3 mt-0 p-0"> <div class="row gx-0"> <div class="col-lg-6 col-md-6 mb-sm-4 mb-md-0 mb-lg-0 border-0"> <div class="card bg-dark text-white text-center shadow-sm rounded-0"> <img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="..."> <div class="card-img-overlay d-flex align-items-center"> <h2 class="card-title text-center w-100 "> HEADING ONE</h2> </div> </div> </div> <div class="col-lg-6 col-md-6"> <div class="card bg-dark text-white text-center shadow-sm rounded-0 border-0"> <img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="..."> <div class="card-img-overlay"> <h2 class="card-title">HEADING TWO</h2> <.-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> --> </div> </div> </div> </div> </div>