<!-- Default Card style -->
		<div class="card">
		  <div class="card_img">
			<a href="javascript:void(0)"><img class="img-full" src="..." alt="Card image"></a>
		  </div>
		  <div class="card-block">
			<a href="#"><h3 class="card-title">Card title</h3></a>
			<span>tagline</span>
			<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
			<a href="javascript:void(0)" class="btn btn-primary">Read more</a>
		  </div>
		</div>

		<!-- image in the middle -->
		<div class="card img-mid">
		  <div class="card-block">
			<a href="#"><h3 class="card-title">Card title</h3></a>
			<span>card tagline</span>
			<div class="card_img">
				<a href="javascript:void(0)"><img class="img-full" src="..." alt="Card image"></a>
			</div>
			<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
			<a href="javascript:void(0)" class="btn btn-primary">Read more</a>
		  </div>
		</div>

		<!-- image at the bottom -->
		<div class="card img-bottom">
		  <div class="card-block">
			<a href="#"><h3 class="card-title">Card title</h3></a>
			<span>card tagline</span>
			<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
			<a href="javascript:void(0)" class="btn btn-primary">Read more</a>
		  </div>
		  <div class="card_img">
			<a href="javascript:void(0)"><img class="img-full" src="..." alt="Card image"></a>
		  </div>
		</div>

		<!-- Overlay contents on image -->
		<div class="card card-inverse">
		  <img class="card-img" src="assets/img/blog/card.jpg" alt="Card image">
		  <div class="card-img-overlay">
			<h3 class="card-title">Card with overlay</h3>
			<p class="card-text">Lorem ipsum dolor sit amet, consec tetur adipisicing elit sed.</p>
		  </div>
		</div>
	
						

How to use

Card is a super content container in bootstrap 4. Here’s how to use it:

• Wrap all content in the .card wrapper
• Use .card_img as image wrapper
• By default card image are top aligned. For middle and bottom aligned image use .img-mid and .img-bottom with .card
• The .card-inverse sets an overlay on image. The contents should be wrapped into .card-img-overlay

	<div class="row row-cols-1 row-cols-md-3 g-4">
		<div class="col">
			<div class="card">
				<div class="card_img">
					<a href="javascript:void(0)">
						<img class="card-img-top" src="assets/img/about-us/people-01.jpg" alt="card img">
					</a>
				</div>
				<div class="card-block">
					<a href="javascript:void(0)"><h3 class="card-title">Card title</h3></a>
					<span>Sub-title</span>
					<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
					<a href="javascript:void(0)" class="btn btn-primary">Read more</a>
				</div>
			</div>
		</div>

		<div class="col">
			<div class="card">
				<div class="card_img">
					<a href="javascript:void(0)">
						<img class="card-img-top" src="assets/img/about-us/people-03.jpg" alt="card img">
					</a>
				</div>
				<div class="card-block">
					<a href="javascript:void(0)"><h3 class="card-title">Card title</h3></a>
					<span>Sub-title</span>
					<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
					<a href="javascript:void(0)" class="btn btn-primary">Read more</a>
				</div>
			</div>
		</div>

		<div class="col">
			<div class="card">
				<div class="card_img">
					<a href="javascript:void(0)">
						<img class="card-img-top" src="assets/img/about-us/people-04.jpg" alt="card img">
					</a>
				</div>
				<div class="card-block">
					<a href="javascript:void(0)"><h3 class="card-title">Card title</h3></a>
					<span>Sub-title</span>
					<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
					<a href="javascript:void(0)" class="btn btn-primary">Read more</a>
				</div>
			</div>
		</div>
	</div>




						

How to use

• Wrap all card contents in .card-grid wrapper. Each of the cards in card grid uses base card styles

	
	<div class="card card-body text-center">
      <div class="card-ribbon card-ribbon-top card-ribbon-left bg-primary text-white">Popular</div>
      <h4 class="card-title">
        Ribbon
      </h4>
      <p class="card-text text-dark">With supporting text below as a natural lead-in to additional content.</p>
      <a href="javascript:void(0)" class="btn btn-sm mt-3 btn-primary">Go somewhere</a> 
    </div>
	
	<!-- top right -->
    <div class="card-ribbon card-ribbon-top card-ribbon-right bg-success ">Best Value</div>

    <!-- bottom left -->
    <div class="card-ribbon card-ribbon-bottom card-ribbon-left bg-warning text-white">popular</div>
      
    <!-- bottom right -->
	<div class="card-ribbon card-ribbon-bottom card-ribbon-right bg-danger text-white">Best Value</div>
     

						

How to use

• use the .card-ribbon wrapper inside the .card and use the following classes for proper positioning

	<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
	  <div class="card-header">Header</div>
	  <div class="card-body">
	    <h4 class="card-title text-white">Primary card title</h4>
	    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
	  </div>
	</div>

						

How to use

• Use any background color to .card or color classes with it. Examples uses the contextual classes.