Is there a way to style my wrapped H2 text with a border that fits the width of the text without creating custom classes?
While using the correct bootstrap classes, I noticed that adding the class "flex-grow-0" to my H2 element didn't work as expected. However, when I used the inline style "flex: 0 0;", it achieved the desired effect. Check out the snippet provided. Any ideas on how to accomplish this without manually creating classes would be appreciated. Thank you!
:root {
/* Customize colors here to modify site-wide color scheme */
--color1:#F39207; /* Orange */
--color2:#951B81; /* Purple */
--color3:#ffffff; /* White */
--color4:#e6e6e6; /* Grey */
}
/* GRID Styling
------------------------------------------------------ */
.grid article div div {
height:20em;
}
.grid article div div {
overflow: hidden;
position: relative;
}
.grid article div div figure div {
position: absolute;
top: 0;
left: 0;
background-position: center;
background-size: cover;
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
-o-transition: all 1.5s;
transition: all 1.5s;
}
.grid article div div figure div:hover {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
/* GRID Text Styling */
.grid figcaption {
z-index: 2;
}
.grid figcaption .grid-title-band {
font-family: sans-serif;
color: var(--color3);
text-transform: uppercase;
letter-spacing: 0.3em;
border:0.4em solid var(--color3);
clip-path: polygon(
calc(0% + 5px) calc(0% + 5px), /* top left */
calc(100% - 5px) calc(0% + 5px), /* top right */
calc(100% - 5px) calc(100% - 5px), /* bottom right */
calc(0% + 5px) calc(100% - 5px) /* bottom left */
);
transition: clip-path 0.4s linear;
}
.grid figcaption:hover .grid-title-band {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<section class="grid">
<article class="row bg-white pt-2 pb-2">
<!-- Item // NOT GOOD -->
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-4 p-2">
<div>
<a href="" class="text-decoration-none">
<figure class="d-flex h-100 align-items-center justify-content-center p-5">
<div class="w-100" style="background-image:url(http://www.cactusfestival.be/test-2/pics/bands/het_zesde_metaal.jpg);"></div>
<figcaption class="d-flex flex-wrap justify-content-around"><h2 class="flex-grow-0 grid-title-band p-3 m-0">This Example Is Wrong - Original</h2></figcaption>
</figure>
</a>
</div>
</div>
<!-- / Item -->
<!-- Item // NOT GOOD -->
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-4 p-2">
<div>
<a href="" class="text-decoration-none">
<figure class="d-flex h-100 align-items-center justify-content-center p-5">
<div class="w-100" style="background-image:url(http://www.cactusfestival.be/test-2/pics/bands/het_zesde_metaal.jpg);"></div>
<figcaption class="d-flex flex-wrap justify-content-around"><h2 class="flex-shrink-0 flex-grow-0 grid-title-band p-3 m-0">This Example Is Wrong - Edits</h2></figcaption>
</figure>
</a>
</div>
</div>
<!-- / Item -->
<!-- Item // GOOD -->
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-4 p-2">
<div>
<a href="" class="text-decoration-none">
<figure class="d-flex h-100 align-items-center justify-content-center p-5">
<div class="w-100" style="background-image:url(http://www.cactusfestival.be/test-2/pics/bands/het_zesde_metaal.jpg);"></div>
<figcaption class="d-flex flex-wrap justify-content-around"><h2 class="grid-title-band p-3 m-0" style="flex:0 0;">This Example Is Good</h2></figcaption>
</figure>
</a>
</div>
</div>
<!-- / Item -->
</article>
</section>
</body>
</html>