Preview

Each card has a background and overlay your card's text. Each card will have a title that link to a detail page, and a description text that is truncated to 2 lines.

Code

                
                  <div class="container-fluid">
                  	<div class="row">
                  		<div class="p-2 col-12 col-md-6 col-lg-4">
                  			<div class="card bg-dark text-white">
                  				<img src="../img/Thumbnail.jpg" class="card-img img-responsive" alt="Alt Text">
                  				<div class="card-img-overlay">
                  					<a href="#">
                  						<h5 class="card-title">PROJECT NAME</h5>
                  					</a>
                  					<p class="card-text text-truncate-2-line">This is a wider card with
                  						supporting text below as a natural lead-in to additional content.
                  					</p>
                  				</div>
                  			</div>
                  		</div>
                  	</div>
                  </div>
                
            

Accessibility

To ensure accessibility, always include descriptive and meaningful alt text for card images.