I want to remove Underline in Bootstrap Link

user_13959139 0
Viewed 2186

I have seen similar questions but solution suggests to change it through css. I tried but unable to reproduce the solution for my code. Currently link is looking like this I also explored react-bootstrap docs but hey haven't mentioned any specific tag to remove that styling

enter image description here

I want to remove that Blue Under Line.

Code :

                      <ListGroup.Item>
                        <Link to={`/panelmember/${item._id}`}>
                          <Card.Title as="h2">
                            <strong>{item.name}</strong>
                          </Card.Title>
                        </Link>
                      </ListGroup.Item>

Is there Any way to add Short code inside the <Link> tag ? Or if we have to customize it in index.css then can you suggest any solution.

react-bootstrap reactjs hyperlink css
2 Answers

.links {
  text-decoration: none;
}
<Link className={`links`} to={`/panelmember/${item._id}`}>
  <Card.Title as="h2">
    <strong>{item.name}</strong>
  </Card.Title>
</Link>

Like this

user_33153330

Bootstrap 4 makes use of Sass for its styling (Sass is a pre-processor scripting language that is interpreted or compiled into Cascading Style Sheets - see https://sass-lang.com/). See https://getbootstrap.com/docs/4.0/getting-started/theming/ for details on Bootstrap theming.

If you are using Sass to compile your CSS file, you can override the default Bootstrap styling for links (which is underline) by adding the following to the scss file (before importing bootstrap):

$link-decoration: none;

user_55501420
Related