<!-- Default Card style -->
		<div class="card">
		  <div class="card_img">
			<a href=""><img class="img-full" src="..." alt="Card image"></a>
		  </div>
		  <div class="card-body">
			<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="" class="btn btn-primary">Read more</a>
		  </div>
		</div>

		<!-- image in the middle -->
		<div class="card img-mid">
		  <div class="card-body">
			<a href="#"><h3 class="card-title">Card title</h3></a>
			<span>card tagline</span>
			<div class="card_img">
				<a href=""><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="" class="btn btn-primary">Read more</a>
		  </div>
		</div>

		<!-- image at the bottom -->
		<div class="card img-bottom">
		  <div class="card-body">
			<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="" class="btn btn-primary">Read more</a>
		  </div>
		  <div class="card_img">
			<a href=""><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="card-deck">
	  <div class="card">
		<div class="card_img">
			<a href=""><img class="img-full" src="assets/img/blog/blog1.jpg" alt="Card image"></a>
		</div>
		<div class="card-body">
		  <a href="#"><h3 class="card-title">Card title</h3></a>
		  <span>by <span><a href="" class="text-primary" >Admin</a> </span></span> | <span><a href="">0  Comts</a></span>
		  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
		  <a href="" class="btn btn-primary">Read more</a>
		</div>
	  </div>
	 <div class="card">
	   <div class="card_img">
		<a href=""><img class="img-full" src="assets/img/blog/blog1.jpg" alt="Card image"></a>
	   </div>
	   <div class="card-body">
		 <a href="#"><h3 class="card-title">Card title</h3></a>
		 <span>by <span><a href="" class="text-primary" >Admin</a> </span></span> | <span><a href="">0  Comts</a></span>
		 <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
		 <a href="" class="btn btn-primary">Read more</a>
	   </div>
	 </div>
	  <div class="card">
		<div class="card_img">
			<a href=""><img class="img-full" src="assets/img/blog/blog1.jpg" alt="Card image"></a>
		</div>
		<div class="card-body">
		  <a href="#"><h3 class="card-title">Card title</h3></a>
		  <span>by <span><a href="" class="text-primary" >Admin</a> </span></span> | <span><a href="">0  Comts</a></span>
		  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
		  <a href="" class="btn btn-primary">Read more</a>
		</div>
	  </div>
	</div>

						

How to use

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