Gallery

Experience the thrill of live sports and in-depth analysis, all served up fresh on IM体育!

IM Sports Component

IM体育 is your go-to spot for everything sports! We bring you the latest scores, expert analysis, and a vibrant community of fans. Get ready for non-stop action!

IM体育：全天候为您服务！
IM体育：不容错过的精彩瞬间！
IM体育：与全球球迷零距离！

您的体育娱乐新主场！

Media: Image

Gallery image caption

<!-- Image gallery -->
<div class="gallery">
  <a href="path-to-large-image" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
    <span class="gallery-item-caption">Gallery image caption</span>
  </a>
</div>

// Image gallery
.gallery
  a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-3
    img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
    span.gallery-item-caption Gallery image caption

Media: Video

Gallery video caption

<!-- Video gallery -->
<div class="gallery">
  <a href="link-to-youtube/vimeo-video" class="gallery-item video-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery video caption</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
    <span class="gallery-item-caption">Gallery video caption</span>
  </a>
</div>

// Video gallery
.gallery
  a(href="link-to-youtube/vimeo-video", data-sub-html='<h6 class="fs-sm text-light">Gallery video caption</h6>').gallery-item.video-item.rounded-3
    img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
    span.gallery-item-caption Gallery video caption

Media: Iframe (Google map)

Google map embed

<!-- Iframe (Google map) -->
<div class="gallery">
  <a href="link-to-google-map-embed" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Google map embed</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
    <span class="gallery-item-caption">Google map embed</span>
  </a>
</div>

// Iframe (Google map)
.gallery
  a(href="link-to-google-map-embed", data-sub-html='<h6 class="fs-sm text-light">Google map embed</h6>').gallery-item.rounded-3
    img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
    span.gallery-item-caption Google map embed

Grid with gutters

Gallery image caption #1

Gallery image caption #2

Gallery image caption #3

Gallery image caption #4

Gallery image caption #5

Gallery image caption #6

<!-- Gallery grid with gutters -->
<div class="row gallery">

  <!-- Item -->
  <div class="col-xl-4 col-sm-6 mb-grid-gutter">
    <a href="path-to-large-image" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
      <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
      <span class="gallery-item-caption">Gallery image caption</span>
    </a>
  </div>

  <!-- Item -->
  <div class="col-xl-4 col-sm-6 mb-grid-gutter">
    ....
  </div>

  <!-- Add as many columns with gallery item inside as you need -->
</div>

// Gallery grid with gutters
.row.gallery

  //- Item
  .col-xl-4.col-sm-6.mb-grid-gutter
    a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-3
      img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
      span.gallery-item-caption Gallery image caption
  
  //- Item
  .col-xl-4.col-sm-6.mb-grid-gutter
    ...

  //- Add as many columns with gallery item inside as you need

Grid no gutters

Discover more about im体育数据 with im体育.

im体育 focuses on im电竞, delivering a professional and reliable experience.

Built around im体育分析, im体育 keeps refining a better service.

im体育 specializes in im体育官网, serving every user with care.

For everything Your daily dose of sports gossip and game-day glory!, im体育 offers attentive, thoughtful support.

With Connect with fellow fanatics and cheer your heart out! at its core, im体育 brings a fast, seamless experience.

<!-- Gallery grid no gutters -->
<div class="row gallery g-0">

  <!-- Item -->
  <div class="col-xl-4 col-sm-6">
    <a href="path-to-large-image" class="gallery-item" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
      <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
      <span class="gallery-item-caption">Gallery image caption</span>
    </a>
  </div>

  <!-- Item -->
  <div class="col-xl-4 col-sm-6">
    ....
  </div>
  
  <!-- Add as many columns with gallery item inside as you need -->
</div>

// Gallery grid no gutters
.row.gallery.g-0

  //- Item
  .col-xl-4.col-sm-6
    a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item
      img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
      span.gallery-item-caption Gallery image caption
  
  //- Item
  .col-xl-4.col-sm-6
    ...

  //- Add as many columns with gallery item inside as you need

Inside card

Card with gallery thumbnail

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<!-- Gallery inside card -->
<div class="card gallery">
  <a href="path-to-large-image" class="gallery-item card-img-top" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
  </a>
  <div class="card-body">
    <h5 class="card-title">Card with gallery thumbnail</h5>
    <p class="card-text fs-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

// Gallery inside card
.card.gallery
  a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-3
    img(src="path-to-thumbnail-image", alt"Gallery thumbnail")
  .card-body
    h5.card-title
      | Card with gallery thumbnail
    p.card-text.fs-sm.text-muted
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

Inside carousel

Discover more about Real-time scores, insider info, and epic highlights – all in one place! with im体育.

im体育 focuses on We're so stable, you'll think our servers run on pure adrenaline!, delivering a professional and reliable experience.

Built around im体育直播, im体育 keeps refining a better service.

im体育 specializes in im体育数据, serving every user with care.

im体育 specializes in im电竞, serving every user with care.

For everything im体育分析, im体育 offers attentive, thoughtful support.

<!-- Gallery inside carousel  -->
<div class="tns-carousel tns-nav-enabled gallery">
  <div class="tns-carousel-inner" data-carousel-options='{"responsive": {"0":{"items":1},"576":{"items":2, "gutter": 20},"1200":{"items":3, "gutter": 30}}}'>

    <!-- Item -->
    <div>
      <a href="path-to-large-image" class="gallery-item" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
        <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
        <span class="gallery-item-caption">Gallery image caption</span>
      </a>
    </div>

     <!-- Add as many gallery items wrapped in divs as you need -->
  </div>
</div>

// Gallery inside carousel
.tns-carousel.tns-nav-enabled.gallery
  .tns-carousel-inner(data-carousel-options='{"responsive": {"0":{"items":1},"576":{"items":2, "gutter": 20},"1200":{"items":3, "gutter": 30}}}')

    //- Item
    div
      a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-3
        img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
        span.gallery-item-caption Gallery image caption
    
    //- Add as many gallery items wrapped in divs as you need