CODEWITHSUNDEEP
csstwitter-bootstrapinheritance
Mentalist
Mentalist

Reputation: 1689

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

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 class="py-0">

<main>

    <div class="row mb-3 report-with-img-cont">
        <div class="col-md-8 col-lg-9 report-previews themed-grid-col">
            
            <a href="/">
                <div>
                    <div>
                        <h5>
                            <span>This is a Title</span>
                        </h5>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
                        <div class="col-md-12 col-lg-8 themed-grid-col"><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>

Upvotes: 0

Views: 809

Answers (4)

Sharif Mia
Sharif Mia

Reputation: 9

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

Example:

<a href="#" class="text-decoration-none">Non-underlined link</a>

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

Upvotes: 1

Amit Kumar
Amit Kumar

Reputation: 19

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 class="py-0">

          <main>

              <div class="row mb-3 report-with-img-cont">
                  <div class="col-md-8 col-lg-9 report-previews themed-grid-col">

                      <a href="/" class="text-decoration-none">
                          <div>
                              <div>
                                  <h5>
                                      <span>This is a Title</span>
                                  </h5>
                              </div>
                              <div class="row d-flex">
                                  <div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
                                  <div class="col-md-12 col-lg-8 themed-grid-col"><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>

Upvotes: 0

Ponsiva
Ponsiva

Reputation: 1030

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 class="py-0">
  <main>
    <div class="row mb-3 report-with-img-cont">
      <div class="col-md-8 col-lg-9 report-previews themed-grid-col">
        <a href="/" class="text-decoration-none">
          <div>
            <div>
              <h5>
                <span>This is a Title</span>
              </h5>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
              <div class="col-md-12 col-lg-8 themed-grid-col">
                <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>

Upvotes: 3

Saad1430
Saad1430

Reputation: 66

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 class="py-0">

    <main>

        <div class="row mb-3 report-with-img-cont">
            <div class="col-md-8 col-lg-9 report-previews themed-grid-col">
                
                <a href="/" style="text-decoration: none;">
                    <div>
                        <div>
                            <h5>
                                <span>This is a Title</span>
                            </h5>
                        </div>
                        <div class="row">
                            <div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
                            <div class="col-md-12 col-lg-8 themed-grid-col"><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>

Upvotes: 0

Related Questions