How to expand the 'container' size of a link

Bootstrap Studio Help
#1

Hi, I'm just getting starting with Bootstrap Studio.

I've got a div, sized 130px wide and 35px high and with a green background colour. It then has a link within it with black text saying, say, "Jobs".

Although I have created a class for the link and specified that it should have the same width and height as the div, when I hover over it you can see that the container is only sized for the text within it. The appearance window shows the width is set to 130px but it's not.

This means that when I add a hover effect to the link, it only changes the background colour of the text to purple, not the whole div.

I can add a hover effect to the div too which changes the whole thing to purple, but I also want the text to change to white at the same time. Since the text colour seems attached to the link, it therefore only changes to white when I hover directly over the link.

This results in me hovering over the green div with black text, the div changes to purple and the text stays black, then when I continue moving over the link itself, the text finally changes to white. It's a bit messy.

What am I doing wrong?!

HTML

 <div class="area"> 
      <a href="#">Jobs</a>
    </div>

CSS

.area, .link {
  margin: 0;
  padding: 0;
  width: 13rem;
  line-height: 3.5rem;
  height: 3.5rem;
  background-color: #93C65D;
  text-align: center;
  font-weight: 300;
  font-size: 1.8rem;
}
.area:hover, .link:hover {
  color: white;
  background-color: #8D64AF;
}

Michelle

#2
#3

I'd use SCSS and nest the anchor tag inside the div like I've done here

#4

The other option is to do it the correct way and use a col system which will allow it to be the size of the col rather than giving it specific size specification which totally dismisses the use of Flexbox which is built in to the system now to help with placing of items inside blocks such as col. You can do it the SCSS way as well, but either way, adding size constraints is negating your site's ability to resize the item with the specific size.

#5

Another way Bootstrap 4 provides is the stretched-link class which allows any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS. You would want to make sure the div is set to position relative before adding the class stretched-link to the link.

.area {
  width: 130px;
  height: 35px;
  position: relative;
}

.area, .link {
  margin: 0;
  padding: 0;
  width: 13rem;
  line-height: 3.5rem;
  height: 3.5rem;
  background-color: #93C65D;
  text-align: center;
  font-weight: 300;
  font-size: 1.8rem;
}

.area:hover, .link:hover {
  color: white;
  background-color: #8D64AF;
  text-decoration: none;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0,0,0,0);
}

https://getbootstrap.com/docs/4.4/utilities/stretched-link/

#6

And you can also do the Stretched Link setup via the Options pane as well (or might be Appearance, not sure which tab that's on lol).

#7

Thanks everyone. I don't want these to be flexible in size so I'll look into SCSS and the Stretched Link option.

#8

Ah, all I needed to do was swap the and

<

div> tags around so that the link wrapped the container :-)