CODEWITHSUNDEEP
cssbootstrap-4flexbox
Jeroen Pede
Jeroen Pede

Reputation: 13

Bootstrap solution for flex 0 0

I want my H2 text (child element), which is wrapped, have a nice border that suites the width of the wrapped text.

Almost getting there using the correct bootstrap classes, however when I give my H2 the class "flex-grow-0" it doesn't work. If I use the inline style "flex: 0 0;", it does exactly do what I want. See snippet. I really want to avoid creating classes myself. Thank you!

:root {
	/* Change colors here to affect the whole site + change manually the colors in the .gradient tag + navigation etc */
    --color1:#F39207; /* Oranje */
    --color2:#951B81; /* Paars */
    --color3:#ffffff; /* White */
	--color4:#e6e6e6; /* grey */	
}

/* GRID
------------------------------------------------------ */

.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 */
.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>

Upvotes: 0

Views: 775

Answers (1)

Temani Afif
Temani Afif

Reputation: 273640

You can consider .col (where there is flex-basis:0) combined with flex-grow-0 flex-shrink-0

:root {
	/* Change colors here to affect the whole site + change manually the colors in the .gradient tag + navigation etc */
    --color1:#F39207; /* Oranje */
    --color2:#951B81; /* Paars */
    --color3:#ffffff; /* White */
	--color4:#e6e6e6; /* grey */	
}

/* GRID
------------------------------------------------------ */

.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 */
.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 flex-shrink-0 col wid grid-title-band p-3 m-0">This Example Is Good</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>

Upvotes: 1

Related Questions