How to override Bootstrap's CSS forcing underlines on link text?-CodePudding

I am using Bootstrap 5 and have a <div> that is wrapped in an <a>. It contains a title, a thumbnail image, and some description text. In other words, the entire block of content is a link.

I have been able to override most of Bootstrap's CSS, but when it comes to this link text it's really persistent.

If I specify display: inline-block the underlines disappear. But I want that for inline text here as well. text-decoration: none is not taking effect.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Underline</title>
        <!-- Bootstrap core CSS -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

    </head>
    <body >

<main>

    <div >
        <div >
            
            <a href="/">
                <div>
                    <div>
                        <h5>
                            <span>This is a Title</span>
                        </h5>
                    </div>
                    <div >
                        <div ><img src="https://via.placeholder.com/160x90"></div>
                        <div ><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
                    </div>
                </div>
            </a>

        </div>
    </div>

</main>

</body>
</html>

CodePudding user response：

You can add the text-decoration-none class in your <a> tag, and that will remove your forcing underlines on link text. and refer the below link : https://getbootstrap.com/docs/5.0/utilities/text/#text-decoration

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Underline</title>
  <!-- Bootstrap core CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body >
  <main>
    <div >
      <div >
        <a href="/" >
          <div>
            <div>
              <h5>
                <span>This is a Title</span>
              </h5>
            </div>
            <div >
              <div ><img src="https://via.placeholder.com/160x90"></div>
              <div >
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </main>
</body>

</html>

CodePudding user response：

Simple! Just add class(text-decoration-none) to your link tag.

Example:

<a href="#" >Non-underlined link</a>

For more details: https://getbootstrap.com/docs/4.2/utilities/text

CodePudding user response：

I just added text-decoration:none; in your <a> tag as an inline-CSS and it worked like a charm.

    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Underline</title>
            <!-- Bootstrap core CSS -->
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

        </head>
        <body >

    <main>

        <div >
            <div >
                
                <a href="/" style="text-decoration: none;">
                    <div>
                        <div>
                            <h5>
                                <span>This is a Title</span>
                            </h5>
                        </div>
                        <div >
                            <div ><img src="https://via.placeholder.com/160x90"></div>
                            <div ><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
                        </div>
                    </div>
                </a>

            </div>
        </div>

    </main>

    </body>
    </html>

CodePudding user response：

Use bootstrap Property text-decoration-none in <a> tag

 <!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Underline</title>
            <!-- Bootstrap core CSS -->
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

        </head>
        <body >

          <main>

              <div >
                  <div >

                      <a href="/" >
                          <div>
                              <div>
                                  <h5>
                                      <span>This is a Title</span>
                                  </h5>
                              </div>
                              <div >
                                  <div ><img src="https://via.placeholder.com/160x90"></div>
                                  <div ><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
                              </div>
                          </div>
                      </a>

                  </div>
              </div>

          </main>

    </body>
    </html>