Media object

Ejemplo básico

Media object
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 src="images/components/media-object/bkool-media-content.jpg" class="mr-3 rounded-circle" alt="Media object">
<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>

Anidación

Media object
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.
Media object
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 src="images/components/media-object/bkool-media-content.jpg" class="mr-3 rounded-circle" alt="Media object">
<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">
<img src="images/components/media-object/bkool-media-content.jpg" class="mr-3 rounded-circle" alt="Media object">
<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>

Alineación

Alineación arriba
Media object
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.

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 src="images/components/media-object/bkool-media-content.jpg" class="align-self-start mr-3 rounded-circle" alt="Media object">
<div class="media-body">
<h5 class="mt-0">Media heading</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>
Alineación al centro
Media object
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.

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 src="images/components/media-object/bkool-media-content.jpg" class="align-self-center mr-3 rounded-circle" alt="Media object">
<div class="media-body">
<h5 class="mt-0">Media heading</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>
Alineación abajo
Media object
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.

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 src="images/components/media-object/bkool-media-content.jpg" class="align-self-end mr-3 rounded-circle" alt="Media object">
<div class="media-body">
<h5 class="mt-0">Media heading</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>

Orden

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.
Media object

<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">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>
<img src="images/components/media-object/bkool-media-content.jpg" class="mr-3 rounded-circle" alt="Media object">
</div>

Listas

  • Media object
    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.
  • Media object
    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.
  • Media object
    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 src="images/components/media-object/bkool-media-content.jpg" class="mr-3 rounded-circle" alt="Media object">
<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 src="images/components/media-object/bkool-media-content.jpg" class="mr-3 rounded-circle" alt="Media object">
<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 src="images/components/media-object/bkool-media-content.jpg" class="mr-3 rounded-circle" alt="Media object">
<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>

Bkool Media Object

Arctic Race of Norway

LArctic Race of Norway

En curso | Termina: 12:45

Únete a la liga que organizamos junto con ASO
Ver más

<div class="media media-event media-event-dark media-event-dark-principal">
<img class="rounded mr-3" src="..." width="96" alt="Arctic Race of Norway">
<div class="media-body">
<div class="event-data mb-6">
<h1 class="event-name mb-2 h3 text-gothic"><span class="badge event-type-marker marker-leagues" data-toggle="tooltip" data-placement="top" title="" data-original-title="Ligas">L</span>Arctic Race of Norway</h1>
<h4 class="event-time"><span class="status-title">En curso</span> | <span class="time-title">Termina:</span> <span class="time-left">12:45</span></h4>
<h5 class="event-description">Únete a la liga que organizamos junto con ASO</h5>
<a href="community/league/artic-race-of-norway" class="btn btn-link text-white btn-text-icon">Ver más <span class="icon-arrow-forward"></span></a>
</div>
<div class="event-actions">
<a href="..." class="btn btn-white mr-2 mb-1">Regístrate</a>
</div>
</div>
</div>
Deutschland Tour

Únete a la liga que organizamos junto con ASO


<div class="media media-event media-event-dark media-event-dark-next">
<img class="rounded mr-3" src="..." width="64" alt="Deutschland Tour">
<div class="media-body">
<div class="event-data mb-2">
<h5 class="event-name mb-2">
<a class="event-link" href="..."><span class="badge event-type-marker marker-leagues" data-toggle="tooltip" data-placement="top" title="" data-original-title="Ligas">L</span>Deutschland Tour <span class="icon-chevron-right"></span></a>
</h5>
<h6 class="event-time"><span class="time">13:00</span></h6>
</div>
<p class="event-description mb-2">Únete a la liga que organizamos junto con ASO</p>
<div class="event-actions">
<a href="..." class="btn btn-white btn-sm">Regístrate</a>
</div>
</div>
</div>
Arctic Race of Norway
L Arctic Race of Norway

12:00 13:00 14:30 15:00 16:45 18:00 19:30 22:00

Únete a la liga que organizamos junto con ASO


<div class="media media-event media-event-light">
<img class="event-avatar rounded mr-3" src="..." width="64" alt="Arctic Race of Norway"> <div class="media-body">
<div class="event-data mb-2">
<h6 class="event-name mb-2">
<a class="event-link" href="community/league/artic-race-of-norway">
<span class="badge event-type-marker marker-leagues" data-toggle="tooltip" data-placement="top" title="" data-original-title="Ligas">L</span>
Arctic Race of Norway <span class="icon-chevron-right"></span>
</a>
</h6>
<p class="event-time mb-1">
<span class="badge badge-pill badge-primary time" data-toggle="tooltip" data-placement="top" title="Nombre de sesión">12:00</span>
<span class="badge badge-pill badge-light time" data-toggle="tooltip" data-placement="top" title="Nombre de sesión">13:00</span>
<span class="badge badge-pill badge-light time" data-toggle="tooltip" data-placement="top" title="Nombre de sesión">14:30</span>
<span class="badge badge-pill badge-light time" data-toggle="tooltip" data-placement="top" title="Nombre de sesión">15:00</span>
<span class="badge badge-pill badge-light time" data-toggle="tooltip" data-placement="top" title="Nombre de sesión">16:45</span>
<span class="badge badge-pill badge-light time" data-toggle="tooltip" data-placement="top" title="Nombre de sesión">18:00</span>
<span class="badge badge-pill badge-light time" data-toggle="tooltip" data-placement="top" title="Nombre de sesión">19:30</span>
<span class="badge badge-pill badge-light time" data-toggle="tooltip" data-placement="top" title="Nombre de sesión">22:00</span>
</p>
</div>
<p class="event-description mb-0">Únete a la liga que organizamos junto con ASO</p>
</div>
</div>