Why is my transform scale not working with Bootstrap? - html

Question

I'm a total beginner to this. I'm just learning bootstrap and I realized that the animation breaks if I apply it (only the scaling bit). It works just fine without Bootstrap. Is there any other alternative?
HTML
<main class="row g-0 align-items-center">
<div class="col-md-6 g-0 ">
<div class="left_side text-center ">
<h1 class="titulo_index">¿Quienes Somos?</h1>
<p class="texto_index">Desde 1933 tostamos nuestro propio café.
Lo cuidamos desde la selección de sus granos, hasta la taza, conservando el amor y el respeto que tenemos por lo que hacemos, desde el primer día. Por eso nuestro café es <strong> ÚNICO.</strong>
</p>
<a id="i_link" class="index_link" href="menu.html">¡Conoce nuestro menu!</a>
</div>
</div>
</main>
CSS
.index_link{
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 40px;
padding: 10px 20px 10px 20px;
width: 400px;
color: black;
background-color: #d99771;
border: #442b0c 2px solid;
border-radius: 25px;
text-align: center;
text-transform: capitalize;
text-decoration: none;
transition: 0.3s;
box-shadow: 3px 5px 3px black;
}
.index_link:hover{
background-color: #dbb098;
scale: 1.2;
box-shadow: 10px 10px 8px black;
}

Answer 1

It does not work because the a has display: inline;.
You can just add .d-block or .d-inline-block to have the scale applied.
<a id="i_link" class="index_link d-inline-block" href="menu.html">¡Conoce nuestro menu!</a>
.index_link {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 40px;
padding: 10px 20px 10px 20px;
width: 400px;
color: black;
background-color: #d99771;
border: #442b0c 2px solid;
border-radius: 25px;
text-align: center;
text-transform: capitalize;
text-decoration: none;
transition: 0.3s;
box-shadow: 3px 5px 3px black;
}
.index_link:hover {
background-color: #dbb098;
scale: 1.2;
box-shadow: 10px 10px 8px black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<main class="row g-0 align-items-center">
<div class="col-md-6 g-0 ">
<div class="left_side text-center ">
<h1 class="titulo_index">¿Quienes Somos?</h1>
<p class="texto_index">Desde 1933 tostamos nuestro propio café. Lo cuidamos desde la selección de sus granos, hasta la taza, conservando el amor y el respeto que tenemos por lo que hacemos, desde el primer día. Por eso nuestro café es <strong> ÚNICO.</strong>
</p>
<a id="i_link" class="index_link d-inline-block" href="menu.html">¡Conoce nuestro menu!</a>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
Alternatively, you can set the display in your CSS.
.index_link {
display: inline-block;
}
.index_link {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 40px;
padding: 10px 20px 10px 20px;
width: 400px;
color: black;
background-color: #d99771;
border: #442b0c 2px solid;
border-radius: 25px;
text-align: center;
text-transform: capitalize;
text-decoration: none;
transition: 0.3s;
box-shadow: 3px 5px 3px black;
}
.index_link:hover {
background-color: #dbb098;
scale: 1.2;
box-shadow: 10px 10px 8px black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<main class="row g-0 align-items-center">
<div class="col-md-6 g-0 ">
<div class="left_side text-center ">
<h1 class="titulo_index">¿Quienes Somos?</h1>
<p class="texto_index">Desde 1933 tostamos nuestro propio café. Lo cuidamos desde la selección de sus granos, hasta la taza, conservando el amor y el respeto que tenemos por lo que hacemos, desde el primer día. Por eso nuestro café es <strong> ÚNICO.</strong>
</p>
<a id="i_link" class="index_link" href="menu.html">¡Conoce nuestro menu!</a>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>