Thumbnails & carousels

  1. Home
  2. Pages
  3. Current Page

Thumbnails

Woman in a blazer in an office setting
Woman in a blazer in an office setting
Woman in a blazer in an office setting
Man photographed outdoors in Kampala 

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Custom Content

Schoolchildren in uniform smiling together in Uganda

Thumbnail label

Fees, payment arrangements and any extra costs are confirmed by the admissions office. Ask for the current fee structure for the specific programme and intake.

Button Button

Woman using a laptop in Kampala

Thumbnail label

Learning takes practice, feedback and time. Explore the subjects, practical activities and support available to help you plan your studies.

Button Button

Pupils raising their hands in a Kitgum classroom

Thumbnail label

Parents and learners can contact the office about a visit, programme information or application progress. Include the learner’s name and the programme of interest.

Button Button


<div class="thumbnail"> <a href="#"><img class="img-fullwidth" src="../tfast-assets/uganda/school-sport-300x200.webp alt="..."></a>
  <div class="caption">
    <h3>Thumbnail label</h3>
    <p>..........</p>
    <p><a href="#" class="btn btn-dark btn-flat" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

Thumbnails carousel

Bootstrap carousel


Bootstrap carousel
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class='carousel-indicators'>
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active"> <img src="../tfast-assets/uganda/school-sport-760x350.webp" alt="" /> </div>
    <div class="item"> <img src="../tfast-assets/uganda/office-uganda-760x350.webp" alt="" /> </div>
    <div class="item"> <img src="../tfast-assets/uganda/school-sport-760x350.webp" alt="" /> </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
</div>