Bootstrap 4 Media Objects

Bootstrap 4 Media Objects : Basics

Bootstrap 4 gives a set of Media Object Classes to create repetitious components like a series of tweets , blog comment threads.Additional Classes are provided to align the objects at left or right, you can even nest multiple objects to display a complex comment thread.

Bootstrap 4 Media Object : Default Media

To Create Default Media Object use class .media within main container and class .media-object within element. Class .media-body creates the body and .media-heading creates the header of Media Object.

Example: Bootstrap 4 Media Object Default Media

<div class="media">  <!-- .media container -->
  <a class="media-left" href="#">  <!-- aligned left using .media-left -->
    <img class="media-object" src="male.png" alt="Male User">  <!-- .media-object -->
  </a>
  
  <div class="media-body">  <!-- .media-body -->
    <h4 class="media-heading">Punter</h4>  <!-- .media-heading -->
    Hello I am Punter from Australia.I play cricket for the National Team.
	Ranked one of the Best Player in the World.
  </div>
  
</div>

Note:Image in Media Object is Custom, no default image

Example: Nested Media

<div class="media">   <!-- Media Object 1 -->
  <a class="media-left" href="#"> 
    <img class="media-object" src="male.png" alt="Male User"> 
  </a>
  
  <div class="media-body"> 
    <h4 class="media-heading">Punter</h4> 
    Hello I am Punter from Australia.I play cricket for the National Team.
    Ranked one of the Best Player in the World.
     
  <div class="media">  <!-- Media Object 2 (Nested) -->
   <a class="media-left" href="#">  
    <img class="media-object" src="matureman.png" alt="Male Mature">  
   </a>
   <div class="media-body">  
    <h4 class="media-heading">Vijay</h4>  
    Hello I am Vijay from India.I play Hockey for the National Team. Ranked No 1 in the world
   </div>
 </div> <!-- .media (nested object)-->
  
  </div>
</div>  <!-- .media -->

Example : Aligned Top Left

 <div class="media">  
  <a class="media-left" href="#">  <!-- aligned at top-left , default  -->
    <img class="media-object" src="girl.png" alt="girl User"> 
  </a>
  <div class="media-body">  
    <h4 class="media-heading">Sharapova</h4> 
  ...
  ...
  </div>
</div>
 

Example : Middle Aligned

 

 <div class="media">  
  <a class="media-left media-middle" href="#">  <!-- aligned at middle on left end  -->
    <img class="media-object" src="girl.png" alt="girl User"> 
  </a>
  <div class="media-body">  
    <h4 class="media-heading">Sharapova</h4> 
     ...
     ...
  </div>
</div>
 

Example: Aligned Bottom

 <div class="media">  
  <a class="media-left media-bottom" href="#">  <!-- aligned at bottom on left end  -->
    <img class="media-object" src="girl.png" alt="girl User"> 
  </a>
  <div class="media-body">  
    <h4 class="media-heading">Sharapova</h4> 
    ...
    ...
  </div>
</div>
 
Thank You for visit Webriceter.com Design & Develop by Abdur Rahaman