Adding link styles to the <a> tag in Bootstrap 4 Alpha 3: A simple guide

Question

Adding link styles to the <a> tag in Bootstrap 4 Alpha 3: A simple guide

The following code is quite simple:

<a>This is a link</a>

In a demonstration of Bootstrap 4 Alpha 2 here, the link appears blue. When you hover over it, it turns dark blue.

However, in a demonstration of Bootstrap 4 Alpha 3 here, it displays as black.

Is there a specific Bootstrap class that can be added to give the <a> tag the link style in Bootstrap 4 Alpha 3?

Perhaps something like this?

<a class="bootstrap-link">This is a link</a>

Is there a more elegant or efficient solution?

Thank you

css twitter-bootstrap twitter-bootstrap-4

Answer 1

Answer №1

Perhaps there was a change in the two versions related to the presence of the href attribute; adding the href attribute to the anchor <a> resolved the issue.

Here is the code snippet with the href attribute included:

<a href>This is a link</a>

Check out the updated JSFiddle: https://jsfiddle.net/s1mvqok0/

Answer 2

Perhaps there was a change in the two versions related to the presence of the href attribute; adding the href attribute to the anchor <a> resolved the issue.

Here is the code snippet with the href attribute included:

<a href>This is a link</a>

Check out the updated JSFiddle: https://jsfiddle.net/s1mvqok0/

Answer 3

Answer №2

When dealing with bootstrap 4 css

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

This means the anchor tag will adopt the color of its parent element if it lacks both an href or tabindex attribute. One solution would be to assign a tabindex to the a element.

Alternatively, there is a class called .text-primary that can be used to give the primary color to the anchor tag.

.text-primary{
   color:#0275d8!important
}
a.text-primary:focus,a.text-primary:hover{
   color:#025aa5
}

Check out this jsfiddle link

Answer 4

When dealing with bootstrap 4 css

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

This means the anchor tag will adopt the color of its parent element if it lacks both an href or tabindex attribute. One solution would be to assign a tabindex to the a element.

Alternatively, there is a class called .text-primary that can be used to give the primary color to the anchor tag.

.text-primary{
   color:#0275d8!important
}
a.text-primary:focus,a.text-primary:hover{
   color:#025aa5
}

Check out this jsfiddle link

Adding link styles to the <a> tag in Bootstrap 4 Alpha 3: A simple guide

Answer №1

Answer №2

Similar questions

Uniform Fixed Width for Material UI Table Cells

The upper border is missing from the middle div in the presence of three divs

Customizing Bootstrap SCSS variables by substituting them with different Bootstrap variables

Chrome does not recognize the 'position: fixed' style attribute

Tips for resolving the issue of "Text stays in original position while image changes in the background when hovering over the text."

User Agent Stylesheets do not take effect

What is causing the action button in my MUI snackbar to occupy an additional line?

Obtaining data from console.log and showcasing it within a div element

CSS slideshow with automatic horizontal image transition that seamlessly restarts

Positioning an element in the center of another using JQuery

Guide on making a color legend with JavaScript hover effects

What could be causing my Bootstrap Carousel to malfunction?

How can I incorporate dynamic moving lines into my website's loading sequence?

Tips for eliminating the bottom border on a nav-tab in Bootstrap 4

What are the best practices for integrating PrimeVue with CustomElements?

Randomly switch out the wordpress header image at designated intervals

Change an ASP page into an image format such as JPEG or PNG

Creating a custom transition rule in Stylus: A step-by-step guide

Trouble with white space on Hero Image? Tackling coding for the first time!

How to Align a Footer to the Bottom of the Page using Bootstrap 5