Search
× Search
lundi 24 avril 2017

Responsive Images

Typography

RESPONSIVE IMAGES

<img src="/portals/0/..." class="img-responsive" alt="Responsive image">

Image shapes

  

<img alt="" src="/portals/0/Images/image.png" style="margin-right: 20px;" class="img-rounded" />
  <img alt="" src="/portals/0/Images/image.png" style="margin-right: 20px;" class="img-circle" />
  <img alt="" src="/portals/0/Images/image.png" class="img-thumbnail"  style="margin-right: 20px;" />
  <img alt="" src="/portals/0/Images/image.png" class="img-circle-thumbnail" />

Thumbnails

<a class="thumbnail" href="#"><img alt="" src="/portals/0/Images/image370180.png" class="img-responsive"></a>
<a class="eds_thumbnail" href="#"><img alt="" src="/portals/0/Images/image.png" class="img-responsive"></a>
<a class="eds_thumbnail eds_edsCircleThumbnail" href="#"><img alt="" src="/portals/0/Images/image.png" class="img-responsive"></a>

Custom content

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

View Code
<div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img alt="" src="/portals/0/Images/image370180.png" class="img-responsive">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a role="button" class="btn btn-primary" href="#">Button</a> <a role="button" class="btn btn-default" href="#">Button</a></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img alt="" src="/portals/0/Images/image370180.png" class="img-responsive">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a role="button" class="btn btn-primary" href="#">Button</a> <a role="button" class="btn btn-default" href="#">Button</a></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img alt="" src="/portals/0/Images/image370180.png" class="img-responsive">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a role="button" class="btn btn-primary" href="#">Button</a> <a role="button" class="btn btn-default" href="#">Button</a></p>
          </div>
        </div>
      </div>
    </div>

Ils nous soutiennent

get social

>Qui sommes-nous ?
>La formation
>Être stagiaire
>Espace entreprises partenaires
>Nous rejoindre


Retour au début