Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Bootstrap Media Objects

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 644
    Comment on it

    The media object is a theoretical component and easy way to align media objects utilized as the reason for building more complex and repetitive components(like blog comments, Tweets, and so forth). 

    There are two structures to the media object − 

    .media − This class permits to float a media object (images, video, and audio) to the left or right of a content block.

    <div class = "media">
       <a class = "pull-left" href = "#">
          <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
       </a>
       
       <div class = "media-body">
          <h4 class = "media-heading">Media heading</h4>
          This is some sample text. This is some sample text. 
          This is some sample text. This is some sample text.
          This is some sample text. This is some sample text. 
          This is some sample text. This is some sample text.
       </div>
    	
    </div>
    
    <div class = "media">
       <a class = "pull-left" href = "#">
          <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
       </a>
       
       <div class = "media-body">
          <h4 class = "media-heading">Media heading</h4>
          This is some sample text. This is some sample text. 
          This is some sample text. This is some sample text.
          This is some sample text. This is some sample text. 
          This is some sample text. This is some sample text.
          
          <div class = "media">
             <a class = "pull-left" href = "#">
                <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
             </a>
             
             <div class = "media-body">
                <h4 class = "media-heading">Media heading</h4>
                This is some sample text. This is some sample text. 
                This is some sample text. This is some sample text.
                This is some sample text. This is some sample text. 
                This is some sample text. This is some sample text.
             </div>
    			
          </div>
       </div>
       
    </div>

    https://jsfiddle.net/2dno5bf6/3/

    .media-list − If you are setting up a list where the items will be a part of an unordered list, utilize this class. 

    <ul class = "media-list">
       <li class = "media">
          <a class = "pull-left" href = "#">
             <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image">
          </a>
          
          <div class = "media-body">
             <h4 class = "media-heading">Media heading</h4>
    			
             <p>
                This is some sample text. This is some sample text. 
                This is some sample text. This is some sample text.
                This is some sample text. This is some sample text. 
                This is some sample text. This is some sample text.
             </p>
             
             <!-- Nested media object -->
             <div class = "media">
                <a class = "pull-left" href = "#">
                   <img class = "media-object" src = "/bootstrap/images/64.jpg" 
                      alt = "Generic placeholder image">
                </a>
                
                <div class = "media-body">
                   <h4 class = "media-heading">Nested media heading</h4>
                   This is some sample text. This is some sample text. 
                   This is some sample text. This is some sample text.
                   This is some sample text. This is some sample text. 
                   This is some sample text. This is some sample text.
                   
                   <!-- Nested media object -->
                   <div class = "media">
                      <a class = "pull-left" href = "#">
                         <img class = "media-object" src = "/bootstrap/images/64.jpg" 
                            alt = "Generic placeholder image">
                      </a>
                      
                      <div class = "media-body">
                         <h4 class = "media-heading">Nested media heading</h4>
                         This is some sample text. This is some sample text. 
                         This is some sample text. This is some sample text.
                         This is some sample text. This is some sample text. 
                         This is some sample text. This is some sample text.
                      </div>
                      
                   </div>
                </div>
                
             </div>
             
             <!-- Nested media object -->
             <div class = "media">
                <a class = "pull-left" href = "#">
                   <img class = "media-object" src = "/bootstrap/images/64.jpg"
                      alt = "Generic placeholder image">
                </a>
                
                <div class = "media-body">
                   <h4 class = "media-heading">Nested media heading</h4>
                   This is some sample text. This is some sample text. 
                   This is some sample text. This is some sample text.
                   This is some sample text. This is some sample text. 
                   This is some sample text. This is some sample text.
                </div>
                
             </div>
          </div>
       </li>
       
       <li class = "media">
          <a class = "pull-right" href = "#">
             <img class = "media-object" src = "/bootstrap/images/64.jpg" 
                alt = "Generic placeholder image">
          </a>
          
          <div class = "media-body">
             <h4 class = "media-heading">Media heading</h4>
             This is some sample text. This is some sample text. 
             This is some sample text. This is some sample text.
             This is some sample text. This is some sample text. 
             This is some sample text. This is some sample text.
          </div>
          
       </li>
    </ul>

    https://jsfiddle.net/2dno5bf6/5/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: