Ejemplo básico

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


<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

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

LArctic Race of Norway

En curso | Termina: 12:45

Únete a la liga que organizamos junto con ASO

Regístrate


<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>

LDeutschland Tour

13:00

Únete a la liga que organizamos junto con ASO

Regístrate


<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>

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>