Menu
  1. Home 1
  2. Home 2
  3. Home 3
  4. Home 4
  5. Home 5
  6. Home 6
  7. World

    World news

    • All
    • Health
    • Tech
    • Travel
    • World
    More
      Previous Next

      No content

      A problem occurred while loading content.

    1. Life Style

      Life Style

      • All
      • Arts
      • Health
      • Music
      • Travel
      More
        Previous Next

        No content

        A problem occurred while loading content.

      1. Fashion

        Fashion

        • All
        • Fashion
        More
          Previous Next

          No content

          A problem occurred while loading content.

        1. Sport
          Previous Next

          No content

          A problem occurred while loading content.

        2. Events/Calendar
        3. Features
        Search User Login Menu
        Tools
        Close

        Media object

        Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like.

        Example

        The media object helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. Plus, it does this with only two required classes thanks to flexbox.

        Below is an example of a single media object. Only two classes are required—the wrapping .media and the .media-body around your content. Optional padding and margin can be controlled through spacing utilities.

        64x64
        Media heading
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        <div class="media">
        	<img class="mr-3" src="/portals/0/..." alt="Generic placeholder image">
        	<div class="media-body">
        		<h5 class="mt-0">Media heading</h5>
        		Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        	</div>
        </div>
        Flexbug #12: Inline elements aren’t treated as flex items

        Internet Explorer 10-11 do not render inline elements like links or images (or ::before and ::after pseudo-elements) as flex items. The only workaround is to set a non-inline display value (e.g., block, inline-block, or flex). We suggest using .d-flex, one of our display utilities, as an easy fix.

        Source: Flexbugs on GitHub

        Nesting

        Media objects can be infinitely nested, though we suggest you stop at some point. Place nested .media within the .media-body of a parent media object.

        64x64
        Media heading
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis infaucibus.
        64x64
        Media heading
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        <div class="media">
        	<img class="mr-3" src="/portals/0/..." alt="Generic placeholder image">
        	<div class="media-body">
        		<h5 class="mt-0">Media heading</h5>
        		Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        
        		<div class="media mt-3">
        			<a class="pr-3" href="#">
        				<img src="/portals/0/..." alt="Generic placeholder image">
        			</a>
        			<div class="media-body">
        				<h5 class="mt-0">Media heading</h5>
        				Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        			</div>
        		</div>
        	</div>
        </div>

        Alignment

        Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your .media-body content.

        64x64
        Top-aligned media

        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

        Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

        <div class="media">
        	<img class="align-self-start mr-3" src="/portals/0/..." alt="Generic placeholder image">
        	<div class="media-body">
        		<h5 class="mt-0">Top-aligned media</h5>
        		<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
        		<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        	</div>
        </div>
        64x64
        Center-aligned media

        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

        Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

        <div class="media">
        	<img class="align-self-center mr-3" src="/portals/0/..." alt="Generic placeholder image">
        	<div class="media-body">
        		<h5 class="mt-0">Center-aligned media</h5>
        		<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
        		<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        	</div>
        </div>
        64x64
        Bottom-aligned media

        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

        Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

        <div class="media">
        	<img class="align-self-end mr-3" src="/portals/0/..." alt="Generic placeholder image">
        	<div class="media-body">
        		<h5 class="mt-0">Bottom-aligned media</h5>
        		<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
        		<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        	</div>
        </div>

        Order

        Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the order property (to an integer of your choosing).

        Media object
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        64x64
        <div class="media">
        	<div class="media-body">
        		<h5 class="mt-0 mb-1">Media object</h5>
        		Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        	</div>
        	<img class="ml-3" src="/portals/0/..." alt="Generic placeholder image">
        </div>

        Media list

        Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your <ul> or <ol>, add the .list-unstyled to remove any browser default list styles, and then apply .media to your <li>s. As always, use spacing utilities wherever needed to fine tune.

        • 64x64
          List-based media object
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        • 64x64
          List-based media object
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        • 64x64
          List-based media object
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        <ul class="list-unstyled">
        	<li class="media">
        		<img class="mr-3" src="/portals/0/..." alt="Generic placeholder image">
        		<div class="media-body">
        			<h5 class="mt-0 mb-1">List-based media object</h5>
        			Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        		</div>
        	</li>
        	<li class="media my-4">
        		<img class="mr-3" src="/portals/0/..." alt="Generic placeholder image">
        		<div class="media-body">
        			<h5 class="mt-0 mb-1">List-based media object</h5>
        			Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        		</div>
        	</li>
        	<li class="media">
        		<img class="mr-3" src="/portals/0/..." alt="Generic placeholder image">
        		<div class="media-body">
        			<h5 class="mt-0 mb-1">List-based media object</h5>
        			Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        		</div>
        	</li>
        </ul>
        Back To Top