Header

Samen met deze headers zijn ook twee voorbeeld modals toegevoegd. Wanneer je op Registreer of Login klikt, verschijnt er een modal. De standaard modal is uitgevoerd welke uitvoerig staat beschreven in de modals documentatie van Bootstrap 5.

<nav class="navbar-light p-3">
  <div class="d-flex d-xl-none">
    <div class="flex-grow-1">
      <a class="navbar-brand d-block" href="/">
        <svg viewBox="0 0 314.04 66.55" class="w-100">
          <path d="M306.65 6.73H299V12c0 3.12-1.67 5.51-5.43 5.51h-1.77V25h6.51v17.73c0 6.59 4.06 10.5 10.58 10.5a13 13 0 0 0 5.14-.8v-7a18.87 18.87 0 0 1-2.9.29c-3.11 0-4.49-1.3-4.49-4.42V25H314v-7.47h-7.32Zm-19.19 10.58a12.06 12.06 0 0 0-2.24-.22c-4.64 0-8.55 2.25-10.21 6.08v-5.64h-8.19v35.26h8.4V36c0-6.59 3-10.35 9.49-10.35a18.09 18.09 0 0 1 2.75.21Zm-74.73 17.81c0 6.74-3.91 11.08-9.49 11.08s-9.49-4.34-9.49-11.08c0-6.59 4-10.93 9.49-10.93 5.65 0 9.49 4.34 9.49 10.93m-18.9 31.43V48.81c1.81 2.68 5.65 4.85 10.71 4.85 10.14 0 16.59-8 16.59-18.54s-5.87-18.39-16.3-18.39c-5.43 0-9.48 2.53-11.22 5.57v-4.77h-8.11v49Zm-43.09-23.32c.43 4 4.34 10.65 14.55 10.65 9 0 13.33-5.94 13.33-11.3s-3.48-9.27-10.14-10.72l-5.36-1.08c-2.17-.44-3.55-1.81-3.55-3.7 0-2.17 2.1-4 5.07-4 4.71 0 6.23 3.26 6.52 5.29l7.1-2c-.58-3.48-3.77-9.85-13.62-9.85-7.31 0-13 5.21-13 11.37 0 4.85 3.26 8.91 9.49 10.28l5.21 1.16c2.83.58 4.13 2 4.13 3.91 0 2.17-1.81 4.06-5.29 4.06-4.49 0-6.88-2.83-7.17-6Zm-33.1 0c.44 4 4.35 10.65 14.56 10.65 9 0 13.33-5.94 13.33-11.3s-3.53-9.27-10.14-10.72L130 30.78c-2.17-.44-3.55-1.81-3.55-3.7 0-2.17 2.1-4 5.07-4 4.71 0 6.23 3.26 6.52 5.29l7.09-2c-.58-3.48-3.76-9.85-13.61-9.85-7.32 0-13 5.21-13 11.37 0 4.85 3.25 8.91 9.48 10.28l5.22 1.16c2.82.58 4.12 2 4.12 3.91 0 2.17-1.81 4.06-5.28 4.06-4.49 0-6.88-2.83-7.17-6Zm-44.78-2.75C71.7 44 69.09 46.64 64 46.64a9.46 9.46 0 0 1-9.63-9.2h25.8a12.66 12.66 0 0 0 .22-2.68c0-11.15-6.38-18.32-17.24-18.32C54.24 16.44 46 23.83 46 35c0 12 8.47 18.9 18 18.9 8.47 0 14-5 15.93-11.15Zm-18.25-9.2a8.46 8.46 0 0 1 8.61-7.82c5.8 0 8.55 3.7 8.69 7.82ZM39.33 17.53H31v35.26h8.33Zm-19.48-10a10.86 10.86 0 0 1 3 .36V.73A11.69 11.69 0 0 0 18.47 0C11.23 0 6.16 4.78 6.16 12.67v4.86H0v7.31h6.16v28h8.47v-28h8.19v-7.31h-8.19v-4.64c0-4.34 3-5.36 5.22-5.36"/>
          <path fill="#00b9f0" class="b" d="M242.77 52.28a17.91 17.91 0 1 0-17.91-17.91 17.91 17.91 0 0 0 17.91 17.91M115.79 19.5V28h-12.82v12.82h-8.51V28H81.65v-8.5h12.81V6.68h8.51V19.5h12.82z"/>
          <path d="M35.16 12.1a4.52 4.52 0 1 0-4.51-4.53 4.53 4.53 0 0 0 4.51 4.52"/>
        </svg>
      </a>
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
  <div class="collapse d-xl-block" id="navbar-toggle">
    <div class="row g-3">
      <div class="col-xl-4">
        <a class="navbar-brand d-none d-xl-block" href="/">
          <svg viewBox="0 0 314.04 66.55" class="w-100">
            <path d="M306.65 6.73H299V12c0 3.12-1.67 5.51-5.43 5.51h-1.77V25h6.51v17.73c0 6.59 4.06 10.5 10.58 10.5a13 13 0 0 0 5.14-.8v-7a18.87 18.87 0 0 1-2.9.29c-3.11 0-4.49-1.3-4.49-4.42V25H314v-7.47h-7.32Zm-19.19 10.58a12.06 12.06 0 0 0-2.24-.22c-4.64 0-8.55 2.25-10.21 6.08v-5.64h-8.19v35.26h8.4V36c0-6.59 3-10.35 9.49-10.35a18.09 18.09 0 0 1 2.75.21Zm-74.73 17.81c0 6.74-3.91 11.08-9.49 11.08s-9.49-4.34-9.49-11.08c0-6.59 4-10.93 9.49-10.93 5.65 0 9.49 4.34 9.49 10.93m-18.9 31.43V48.81c1.81 2.68 5.65 4.85 10.71 4.85 10.14 0 16.59-8 16.59-18.54s-5.87-18.39-16.3-18.39c-5.43 0-9.48 2.53-11.22 5.57v-4.77h-8.11v49Zm-43.09-23.32c.43 4 4.34 10.65 14.55 10.65 9 0 13.33-5.94 13.33-11.3s-3.48-9.27-10.14-10.72l-5.36-1.08c-2.17-.44-3.55-1.81-3.55-3.7 0-2.17 2.1-4 5.07-4 4.71 0 6.23 3.26 6.52 5.29l7.1-2c-.58-3.48-3.77-9.85-13.62-9.85-7.31 0-13 5.21-13 11.37 0 4.85 3.26 8.91 9.49 10.28l5.21 1.16c2.83.58 4.13 2 4.13 3.91 0 2.17-1.81 4.06-5.29 4.06-4.49 0-6.88-2.83-7.17-6Zm-33.1 0c.44 4 4.35 10.65 14.56 10.65 9 0 13.33-5.94 13.33-11.3s-3.53-9.27-10.14-10.72L130 30.78c-2.17-.44-3.55-1.81-3.55-3.7 0-2.17 2.1-4 5.07-4 4.71 0 6.23 3.26 6.52 5.29l7.09-2c-.58-3.48-3.76-9.85-13.61-9.85-7.32 0-13 5.21-13 11.37 0 4.85 3.25 8.91 9.48 10.28l5.22 1.16c2.82.58 4.12 2 4.12 3.91 0 2.17-1.81 4.06-5.28 4.06-4.49 0-6.88-2.83-7.17-6Zm-44.78-2.75C71.7 44 69.09 46.64 64 46.64a9.46 9.46 0 0 1-9.63-9.2h25.8a12.66 12.66 0 0 0 .22-2.68c0-11.15-6.38-18.32-17.24-18.32C54.24 16.44 46 23.83 46 35c0 12 8.47 18.9 18 18.9 8.47 0 14-5 15.93-11.15Zm-18.25-9.2a8.46 8.46 0 0 1 8.61-7.82c5.8 0 8.55 3.7 8.69 7.82ZM39.33 17.53H31v35.26h8.33Zm-19.48-10a10.86 10.86 0 0 1 3 .36V.73A11.69 11.69 0 0 0 18.47 0C11.23 0 6.16 4.78 6.16 12.67v4.86H0v7.31h6.16v28h8.47v-28h8.19v-7.31h-8.19v-4.64c0-4.34 3-5.36 5.22-5.36"/>
            <path fill="#00b9f0" class="b" d="M242.77 52.28a17.91 17.91 0 1 0-17.91-17.91 17.91 17.91 0 0 0 17.91 17.91M115.79 19.5V28h-12.82v12.82h-8.51V28H81.65v-8.5h12.81V6.68h8.51V19.5h12.82z"/>
            <path d="M35.16 12.1a4.52 4.52 0 1 0-4.51-4.53 4.53 4.53 0 0 0 4.51 4.52"/>
          </svg>
        </a>
      </div>
      <div class="col-xl-4">
        <ul class="navbar-nav text-center flex-xl-row gap-xl-3 justify-content-xl-center">
          <li class="nav-item">
            <a class="nav-link" href="#">Toertochten</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Routes</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Magazine</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Clubs</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">FAQ</a>
          </li>
        </ul>
      </div>
      <div class="col-xl-4">
        <ul class="navbar-nav flex-row justify-content-center justify-content-xl-end">
          <li class="nav-item">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#register">
              Registreer
            </button>
          </li>
          <li class="nav-item">
            <button class="btn btn-link link-dark text-decoration-none" type="button" data-bs-toggle="modal" data-bs-target="#login">Login</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div class="modal fade" id="register" tabindex="-1" aria-labelledby="register" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Aanmelden bij Fietssport</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-2">
            <label for="register-email" class="form-label">Wat is je e-mailadres?</label>
            <input type="email" class="form-control" id="register-email">
          </div>
          <div class="mb-2">
            <button type="submit" class="btn btn-primary">Volgende</button>
          </div>
        </form>
      </div>
      <div class="modal-footer d-block">
        <p>Stap 1/6</p>
        <div class="progress">
          <div class="progress-bar" role="progressbar" style="width: 16%" aria-valuenow="16" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="login" tabindex="-1" aria-labelledby="register" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Login</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Maak gebruik van je account en alle andere voordelen van Fietssport.</p>
        <form>
          <div class="mb-2">
            <label for="email" class="form-label">Email-adress</label>
            <input type="email" class="form-control" id="email">
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">Wachtwoord</label>
            <input type="password" class="form-control" id="password">
          </div>
          <div class="mb-2">
            <button type="submit" class="btn btn-primary">Inloggen</button>
            <button type="button" class="btn btn-link link-dark text-decoration-none">Wachtwoord vergeten</button>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <p class="d-inline-block">Heb je nog geen account?</p>
        <button class="btn btn-outline-dark" data-bs-target="#register" data-bs-toggle="modal" data-bs-dismiss="modal">Registreer dan nu direct</button>
      </div>
    </div>
  </div>
</div>

Swiper

Dit component maakt gebruik van de Swiper plugin. De items in swiper-slide kunnen vervangen worden met elk soort component. De pijltjes voor navigatie zijn alleen te zien vanaf breakpoint lg. De titel, beschrijving, subnavigatie en link eronder zijn optioneel

Routes

Download de mooiste routes van onze ervaren routemeesters.

Card title 01

Card title 02

Card title 03

Card title 04

Card title 05

Bekijk hier alle routes

<section class="swiper-container">
  <div class="mb-3 d-flex">
    <div>
      <h2 class="swiper-container-title m-0">Routes</h2>
      <p class="m-0">Download de mooiste routes van onze ervaren routemeesters.</p>
    </div>
    <div class="d-none d-lg-flex flex-grow-1 justify-content-end align-items-end">
      <ul class="list-inline mb-1">
        <li class="list-inline-item">
          <a href="#">
            <svg class="icon icon-bike-race"><use xlink:href="/assets/img/sprite.svg#bike-race"></use></svg>
          </a>
        </li>
        <li class="list-inline-item">
          <a href="#">
            <svg class="icon icon-bike-mtb"><use xlink:href="/assets/img/sprite.svg#bike-mtb"></use></svg>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="swiper js-swiper">
    <div class="swiper-wrapper">
      <a href="#" class="swiper-slide swiper-slide-disabled">
        <div class="card">
          <img src="https://picsum.photos/300/150" alt="">
          <div class="card-body bg-light">
            <h5 class="card-title">Card title 01</h5>
          </div>
        </div>
      </a>
      <a href="#" class="swiper-slide">
        <div class="card">
          <img src="https://picsum.photos/300/150" alt="">
          <div class="card-body bg-light">
            <h5 class="card-title">Card title 02</h5>
          </div>
        </div>
      </a>
      <a href="#" class="swiper-slide">
        <div class="card">
          <img src="https://picsum.photos/300/150" alt="">
          <div class="card-body bg-light">
            <h5 class="card-title">Card title 03</h5>
          </div>
        </div>
      </a>
      <a href="#" class="swiper-slide">
        <div class="card">
          <img src="https://picsum.photos/300/150" alt="">
          <div class="card-body bg-light">
            <h5 class="card-title">Card title 04</h5>
          </div>
        </div>
      </a>
      <a href="#" class="swiper-slide">
        <div class="card">
          <img src="https://picsum.photos/300/150" alt="">
          <div class="card-body bg-light">
            <h5 class="card-title">Card title 05</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="swiper-button-prev js-swiper-button-prev"></div>
    <div class="swiper-button-next js-swiper-button-next"></div>
  </div>
  <a href="#" class="mt-3 d-none d-lg-block link-dark">Bekijk hier alle routes</a>
</section>

Route Card

W3_oliebollentocht

Zoetermeer (ZH) 20,4 km

Racefiets

<article class="card">
  <div class="row g-0">
    <div class="col-md-3 bg-repeat-no-repeat bg-size-cover bg-position-center min-rm-h-10 position-relative" style="background-image: url(/assets/img/map-01.jpg);">
      <svg class="icon icon-mapmarker-track position-absolute top-50 start-50 translate-middle"><use xlink:href="/assets/img/sprite.svg#mapmarker-track"></use></svg>
    </div>
    <div class="col-md-9 bg-secondary">
      <div class="card-body h-100 d-flex flex-column justify-content-between">
        <div class="d-flex gap-2 align-items-start">
          <div class="flex-grow-1">
            <h5 class="card-title">W3_oliebollentocht</h5>
            <p class="card-text">Zoetermeer (ZH) 20,4 km</p>
          </div>
          <button class="border-0 p-0">
            <svg class="icon icon-bookmark"><use xlink:href="/assets/img/sprite.svg#bookmark"></use></svg>
          </button>
        </div>
        <div class="d-flex gap-2">
          <div class="flex-grow-1 d-flex align-items-end">
            <svg class="icon icon-star icon-star-filled"><use xlink:href="/assets/img/sprite.svg#star"></use></svg>
            <svg class="icon icon-star icon-star-filled"><use xlink:href="/assets/img/sprite.svg#star"></use></svg>
            <svg class="icon icon-star icon-star-filled"><use xlink:href="/assets/img/sprite.svg#star"></use></svg>
            <svg class="icon icon-star"><use xlink:href="/assets/img/sprite.svg#star"></use></svg>
            <svg class="icon icon-star"><use xlink:href="/assets/img/sprite.svg#star"></use></svg>
          </div>
          <div class="text-end">
            <svg class="icon icon-bike-race"><use xlink:href="/assets/img/sprite.svg#bike-race"></use></svg>
            <small class="d-block">Racefiets</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

Tour Card

Zondag 23 jan

Toffe wintertocht 2.0, powered by SVDO Tourbuffels

Hellendoorn (OV) 35 • 55 km

Mountainbike

<article class="card h-100">
  <div class="row g-0 h-100">
    <div class="col-md-3 bg-repeat-no-repeat bg-size-cover bg-position-center min-rm-h-10 position-relative" style="background-image: url(/assets/img/map-01.jpg);">
      <svg class="icon icon-mapmarker-track position-absolute top-50 start-50 translate-middle"><use xlink:href="/assets/img/sprite.svg#mapmarker-ride"></use></svg>
    </div>
    <div class="col-md-9 bg-secondary">
      <div class="card-body h-100 d-flex flex-column justify-content-between">
        <div class="d-flex gap-2 align-items-start">
          <div class="flex-grow-1">
            <h5 class="card-title">Zondag 23 jan</h5>
            <p class="card-text">Toffe wintertocht 2.0, powered by SVDO Tourbuffels</p>
          </div>
          <button class="border-0 p-0">
            <svg class="icon icon-bookmark"><use xlink:href="/assets/img/sprite.svg#bookmark"></use></svg>
          </button>
        </div>
        <div class="d-flex mt-2 gap-2">
          <div class="flex-grow-1 d-flex align-items-end">
            <div>
              <small class="d-block">Hellendoorn (OV)</small>
              <small class="d-block">35 • 55 km</small>
            </div>
          </div>
          <div class="text-end">
            <svg class="icon icon-bike-race"><use xlink:href="/assets/img/sprite.svg#bike-mtb"></use></svg>
            <small class="d-block">Mountainbike</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

Maps Card 1

1 van 3

W3_oliebollentocht

Zoetermeer (ZH) 20,4 km

Racefiets

<article class="card h-100">
  <div class="row g-0 h-100">
    <div class="col bg-secondary">
      <div class="card-body h-100 d-flex flex-column justify-content-between">
        <p class="card-text mb-2">1 van 3</p>
        <div class="d-flex gap-2 align-items-start">
          <div class="flex-grow-1">
            <h5 class="card-title">W3_oliebollentocht</h5>
            <p class="card-text">Zoetermeer (ZH) 20,4 km</p>
          </div>
          <button class="border-0 p-0">
            <svg class="icon icon-bookmark"><use xlink:href="/assets/img/sprite.svg#bookmark"></use></svg>
          </button>
        </div>
        <div class="d-flex gap-2">
          <div class="flex-grow-1 d-flex align-items-end">
            <svg class="icon icon-star icon-star-filled"><use xlink:href="/assets/img/sprite.svg#star"></use></svg>
            <svg class="icon icon-star icon-star-filled"><use xlink:href="/assets/img/sprite.svg#star"></use></svg>
            <svg class="icon icon-star icon-star-filled"><use xlink:href="/assets/img/sprite.svg#star"></use></svg>
            <svg class="icon icon-star"><use xlink:href="/assets/img/sprite.svg#star"></use></svg>
            <svg class="icon icon-star"><use xlink:href="/assets/img/sprite.svg#star"></use></svg>
          </div>
          <div class="text-end">
            <svg class="icon icon-bike-race"><use xlink:href="/assets/img/sprite.svg#bike-race"></use></svg>
            <small class="d-block">Racefiets</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

Maps Card 2

W3_oliebollentocht

Zoetermeer (ZH) 20,4 km

Racefiets

1 van 3

<article class="card h-100">
  <div class="row g-0 h-100">
    <div class="col bg-secondary">
      <div class="card-body h-100 d-flex flex-column justify-content-between">
        <div class="d-flex gap-2 align-items-start">
          <div class="flex-grow-1">
            <h5 class="card-title">W3_oliebollentocht</h5>
            <p class="card-text">Zoetermeer (ZH) 20,4 km</p>
          </div>
          <button class="border-0 p-0">
            <svg class="icon icon-bookmark"><use xlink:href="/assets/img/sprite.svg#bookmark"></use></svg>
          </button>
        </div>
        <div class="d-flex gap-2">
          <div class="flex-grow-1 d-flex align-items-end">
            <svg class="icon icon-star icon-star-filled"><use xlink:href="/assets/img/sprite.svg#star"></use></svg>
            <svg class="icon icon-star icon-star-filled"><use xlink:href="/assets/img/sprite.svg#star"></use></svg>
            <svg class="icon icon-star icon-star-filled"><use xlink:href="/assets/img/sprite.svg#star"></use></svg>
            <svg class="icon icon-star"><use xlink:href="/assets/img/sprite.svg#star"></use></svg>
            <svg class="icon icon-star"><use xlink:href="/assets/img/sprite.svg#star"></use></svg>
          </div>
          <div class="text-end">
            <svg class="icon icon-bike-race"><use xlink:href="/assets/img/sprite.svg#bike-race"></use></svg>
            <small class="d-block">Racefiets</small>
          </div>
        </div>
        <div class="d-flex align-items-center justify-content-between border-top border-dark border-opacity-25 mt-4 mx-n3 px-3 pt-3 pb-0">
          <a href="" class="disabled">
            <svg class="icon icon-arrow icon-arrow-left"><use xlink:href="/assets/img/sprite.svg#arrow"></use></svg>
          </a>
          <span>1 van 3</span>
          <a href="">
            <svg class="icon icon-arrow"><use xlink:href="/assets/img/sprite.svg#arrow"></use></svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</article>

Magazine Card

Overig

Mountainbiken op en over voormalige afvalbergen

Van vuilnisbelt naar mountainbikeparadijs.

<article class="card max-rm-w-30 bg-secondary h-100">
  <div class="row g-0">
    <div class="col-12 bg-repeat-no-repeat bg-size-cover bg-position-center min-rm-h-20 position-relative" style="background-image: url('https://picsum.photos/300/250');">
      <span class="badge rounded-pill bg-dark text-uppercase m-3">Overig</span>
    </div>
    <div class="col-12">
      <div class="card-body h-100 d-flex flex-column justify-content-between">
        <div class="d-flex gap-2 align-items-start">
          <div class="flex-grow-1">
            <h5 class="card-title">Mountainbiken op en over voormalige afvalbergen</h5>
            <p class="card-text">Van vuilnisbelt naar mountainbikeparadijs.</p>
          </div>
          <button class="border-0 p-0">
            <svg class="icon icon-bookmark"><use xlink:href="/assets/img/sprite.svg#bookmark"></use></svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</article>

USP Card

Unieke fietsverzekering

24/7 en in heel Europa verzekerd tegen schade aan je fiets bij een ongeval.

<article class="card max-rm-w-30 h-100 bg-dark">
  <div class="row g-0">
    <div class="col-12 bg-repeat-no-repeat bg-size-cover bg-position-center min-rm-h-22" style="background-image: url('https://picsum.photos/300');"></div>
    <div class="col-12 text-center text-white p-4">
      <h5 class="card-title">Unieke fietsverzekering</h5>
      <p class="card-text">24/7 en in heel Europa verzekerd tegen schade aan je fiets bij een ongeval.</p>
    </div>
  </div>
</article>

Highlight

Uitgelicht

MTB-route Texel

De vaste mountainbikeroute op Texel ligt aan de westkant van het eiland, in het beboste gebied vlak tegen de duinen aan. De ondergrond bestaat voornamelijk uit bosgrond afgewisseld met hier en daar een stukje duinzand.

<a href="/" class="text-decoration-none link-dark">
  <div class="row g-0">
    <div class="col-lg bg-repeat-no-repeat bg-size-cover bg-position-center min-rm-h-20 min-rm-h-lg-32 position-relative" style="background-image: url('https://picsum.photos/800/450');"></div>
    <div class="col-lg mt-n3 mt-lg-0 p-3 pt-0 p-lg-3">
      <div class="max-rm-w-38">
        <span class="badge rounded-pill bg-dark text-uppercase mb-3 position-relative">Uitgelicht</span>
        <h2>MTB-route Texel</h2>
        <p class="m-0">De vaste mountainbikeroute op Texel ligt aan de westkant van het eiland, in het beboste gebied vlak tegen de duinen aan. De ondergrond bestaat voornamelijk uit bosgrond afgewisseld met hier en daar een stukje duinzand.</p>
      </div>
    </div>
  </div>
</a>

Comparison List

PLUS Account

Maximaal inzoomen op routes
Routes en toertochten opslaan als favoriet
Snel en makkelijk inschrijven voor toertochten
Vrijblijvend meefietsen bij een club
Unieke fietsverzekering
Vier keer per jaar Fietssport Magazine
Korting op meer dan 2.500 toertochten
Snel van start bij toertochten met Scan & Go
Download alle routes als GPX-bestand
Ondersteun NTFU belangenbehartiging
€ 42,50 per jaar
Ik ga voor PLUS

BASIC Account

Maximaal inzoomen op routes
Routes en toertochten opslaan als favoriet
Snel en makkelijk inschrijven voor toertochten
Vrijblijvend meefietsen bij een club
Unieke fietsverzekering
Vier keer per jaar Fietssport Magazine
Korting op meer dan 2.500 toertochten
Snel van start bij toertochten met Scan & Go
Download alle routes als GPX-bestand
Ondersteun NTFU belangenbehartiging
€ 0,- per jaar
Ik ga voor PLUS

<div class="d-flex flex-no-wrap overflow-auto justify-content-lg-center gap-3">
  <div class="text-nowrap">
    <h2 class="pb-2">PLUS Account</h2>
    <ul class="list-unstyled">
      <li class="py-3 border-top border-dark">Maximaal inzoomen op routes</li>
      <li class="py-3 border-top border-dark">Routes en toertochten opslaan als favoriet</li>
      <li class="py-3 border-top border-dark">Snel en makkelijk inschrijven voor toertochten</li>
      <li class="py-3 border-top border-dark">Vrijblijvend meefietsen bij een club</li>
      <li class="py-3 border-top border-dark">Unieke fietsverzekering</li>
      <li class="py-3 border-top border-dark">Vier keer per jaar Fietssport Magazine</li>
      <li class="py-3 border-top border-dark">Korting op meer dan 2.500 toertochten</li>
      <li class="py-3 border-top border-dark">Snel van start bij toertochten met Scan &amp; Go</li>
      <li class="py-3 border-top border-dark">Download alle routes als GPX-bestand</li>
      <li class="py-3 border-top border-dark">Ondersteun NTFU belangenbehartiging</li>
      <li class="py-4 border-top border-dark border-2 fs-3">&euro; 42,50 per jaar</li>
      <li><a href="/" class="btn btn-primary">Ik ga voor PLUS</a></li>
    </ul>
  </div>
  <div class="text-nowrap">
    <h2 class="pb-2">BASIC Account</h2>
    <ul class="list-unstyled">
      <li class="py-3 border-top border-dark">Maximaal inzoomen op routes</li>
      <li class="py-3 border-top border-dark">Routes en toertochten opslaan als favoriet</li>
      <li class="py-3 border-top border-dark">Snel en makkelijk inschrijven voor toertochten</li>
      <li class="py-3 border-top border-dark">Vrijblijvend meefietsen bij een club</li>
      <li class="py-3 border-top border-dark text-black-50">Unieke fietsverzekering</li>
      <li class="py-3 border-top border-dark text-black-50">Vier keer per jaar Fietssport Magazine</li>
      <li class="py-3 border-top border-dark text-black-50">Korting op meer dan 2.500 toertochten</li>
      <li class="py-3 border-top border-dark text-black-50">Snel van start bij toertochten met Scan &amp; Go</li>
      <li class="py-3 border-top border-dark text-black-50">Download alle routes als GPX-bestand</li>
      <li class="py-3 border-top border-dark text-black-50">Ondersteun NTFU belangenbehartiging</li>
      <li class="py-4 border-top border-dark border-2 fs-3">&euro; 0,- per jaar</li>
      <li><a href="/" class="btn btn-outline-dark">Ik ga voor PLUS</a></li>
    </ul>
  </div>
</div>

Sticky Nav

Er zijn twee variaties mogelijk, om deze sticky nav aan de onderkant te laten plakken moet top-0 vervangen worden door bottom-0. Op mobiel is deze navigatie horizontaal scrollable. De navigatie is op desktop verdeeld in 3 blokken, plaats de content in col col-xl-4.

<div class="position-sticky top-0 z-i-1000 bg-secondary p-3 overflow-auto">
  <div class="row flex-nowrap justify-content-between align-items-center">
    <div class="col col-xl-4 col-auto">
      <form action="" class="d-inline-block">
        <div class="input-group flex-nowrap">
          <input type="text" class="form-control px-3 py-2 fs-6 bg-white" id="search" placeholder="Ronde van Vlaanderen">
          <span class="input-group-text bg-white" id="search-addon">
            <svg class="icon icon-loop"><use xlink:href="/assets/img/sprite.svg#loop"></use></svg>
          </span>
        </div>
      </form>
    </div>
    <div class="col col-xl-4 col-auto max-width-none text-center">
      <ul class="list-inline mb-0 text-nowrap">
        <li class="list-inline-item">
          <a href="#" class="link-dark text-decoration-none">
            <svg class="icon icon-bike-race"><use xlink:href="/assets/img/sprite.svg#bike-race"></use></svg>
            <span>Mountainbike</span>
          </a>
        </li>
        <li class="list-inline-item">
          <a href="#" class="link-dark text-decoration-none">
            <svg class="icon icon-bike-mtb"><use xlink:href="/assets/img/sprite.svg#bike-mtb"></use></svg>
            <span>Racefiets</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="col col-xl-4 text-end">
      <div class="text-nowrap">
        <button type="button" class="btn btn-sm">Afstand</button>
        <button type="button" class="btn btn-sm">Datum</button>
        <button type="button" class="btn btn-sm">Locatie</button>
      </div>
    </div>
  </div>
</div>

Data List

Toertocht details 25km
Starttijd: 0800h - 1200h
Deelnemers verwacht: Vrij rustig, geniet van de omgeving op je eigen tempo.
Start locatie: Elektraweg
plan route
Daginschrijving mogelijk: Ja
Kosten deelname: € 0,00 (Basic account)
€ 0,00 (PLUS account)
De online inschrijving is geopend van 28 januari 2022 tot 4 februari 2022.

<dl class="row gy-3 gx-0">
  <dt class="col-sm-12 border-bottom border-dark border-2 py-2">
    <h2 class="h1">Toertocht details 25km</h2>
  </dt>

  <dt class="col-sm-4">Starttijd</dt>
  <dd class="col-sm-8">0800h - 1200h</dd>

  <dt class="col-sm-4">Deelnemers verwacht</dt>
  <dd class="col-sm-8">Vrij rustig, geniet van de omgeving op je eigen tempo.</dd>

  <dt class="col-sm-4">Start locatie</dt>
  <dd class="col-sm-8">Elektraweg <br> <a href="/">plan route</a></dd>

  <dt class="col-sm-4">Daginschrijving mogelijk</dt>
  <dd class="col-sm-8">Ja</dd>

  <dt class="col-sm-4">Kosten deelname</dt>
  <dd class="col-sm-8">
    &euro; 0,00 (Basic account) <br>
    &euro; 0,00 (PLUS account) <br>
    <em>De online inschrijving is geopend van 28 januari 2022 tot 4 februari 2022.</em>
  </dd>
</dl>

Plus List

Gezellig
Groot ledenbestand
Veel parkeerplek
PLUS account voordelen

<ul class="list-unstyled">
  <li class="d-flex align-items-center gap-2">
    <svg class="icon icon-plus"><use xlink:href="/assets/img/sprite.svg#plus"></use></svg>
    <span>Gezellig</span>
  </li>
  <li class="d-flex align-items-center gap-2">
    <svg class="icon icon-plus"><use xlink:href="/assets/img/sprite.svg#plus"></use></svg>
    <span>Groot ledenbestand</span>
  </li>
  <li class="d-flex align-items-center gap-2">
    <svg class="icon icon-plus"><use xlink:href="/assets/img/sprite.svg#plus"></use></svg>
    <span>Veel parkeerplek</span>
  </li>
  <li class="d-flex align-items-center gap-2">
    <svg class="icon icon-plus"><use xlink:href="/assets/img/sprite.svg#plus"></use></svg>
    <a href="" class="text-dark">PLUS account voordelen</a>
  </li>
</ul>

Review Item

Variatie

Mooie uitgestrekte route. Vooral het stuk rond start/finish is uitdagend, ondanks de de weinige hoogte meters blijft het een gaaf parcours.

<div class="row mb-3">
  <div class="col-2">
    <img src="/assets/img/profile-photo.png" alt="Daan" class="rounded-circle w-100">
  </div>
  <div class="col-10">
    <div class="bg-secondary rounded-3 p-4 text-start">
      <h3>Variatie</h3>
      <p class="m-0">Mooie uitgestrekte route. Vooral het stuk rond start/finish is uitdagend, ondanks de de weinige hoogte meters blijft het een gaaf parcours.</p>
    </div>
  </div>
</div>

Ride Detail

: Toertocht
: za 04.06.2022
: 80 - 10 - 150 km
: 0 - 20 - 0 hm

Theo de Rooij (1957) heeft zijn sporen in het wielrennen verdiend. Hij nam onder meer acht keer deel aan de Tour de France en was jarenlang ploegleider bij diverse wielerploegen. Niet verwonderlijk dus dat er een toertocht naar de in Holten woonachtige De Rooij is vernoemd. Welke van de vier afstanden je ook kiest, ze pakken allemaal zoveel mogelijk Sallandse bulten en heuvels mee. Zijn jouw kuiten er klaar voor?

Bekijk deze tocht

<div class="row mb-4">
  <div class="col-5 col-md-4">
    <img src="/assets/img/fietskaart.jpg" alt="Sailandse Heuvelrug" class="w-100">
  </div>
  <div class="col-7 col-md-8">
    <dl class="row align-items-center g-2">
      <dt class="col-3 text-center">
        <svg class="icon icon-bike-race"><use xlink:href="/assets/img/sprite.svg#bike-race"></use></svg>
      </dt>
      <dd class="col-9 mb-0">
        Toertocht
      </dd>
      <dt class="col-3 text-center">
        <svg class="icon icon-calendar"><use xlink:href="/assets/img/sprite.svg#calendar"></use></svg>
      </dt>
      <dd class="col-9 mb-0">
        za 04.06.2022
      </dd>
      <dt class="col-3 text-center">
        <svg class="icon icon-cta-route"><use xlink:href="/assets/img/sprite.svg#cta-route"></use></svg>
      </dt>
      <dd class="col-9 mb-0">
        80 - 10 - 150 km
      </dd>
      <dt class="col-3 text-center">
        <svg class="icon icon-trending-up"><use xlink:href="/assets/img/sprite.svg#trending-up"></use></svg>
      </dt>
      <dd class="col-9 mb-0">
        0 - 20 - 0 hm
      </dd>
    </dl>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <p>Theo de Rooij (1957) heeft zijn sporen in het wielrennen verdiend. Hij nam onder meer acht keer deel aan de Tour de France en was jarenlang ploegleider bij diverse wielerploegen. Niet verwonderlijk dus dat er een toertocht naar de in Holten woonachtige De Rooij is vernoemd. Welke van de vier afstanden je ook kiest, ze pakken allemaal zoveel mogelijk Sallandse bulten en heuvels mee. Zijn jouw kuiten er klaar voor?</p>
    <a href="" class="btn btn-primary">Bekijk deze tocht</a>
  </div>
</div>

CTA Block

Meer weten over fietsmateriaal?

Upgrade naar een PLUS-account. Je ontvangt dan 4x per jaar Fietssport Magazine, het grootste fietsblad van Nederland, boordevol tips, reisinspiratie en productreviews.

Meer info

<div class="bg-secondary p-3">
  <h5>Meer weten over fietsmateriaal?</h5>
  <p>Upgrade naar een PLUS-account. Je ontvangt dan 4x per jaar Fietssport Magazine, het grootste fietsblad van Nederland, boordevol tips, reisinspiratie en productreviews.</p>
  <a href="" class="btn btn-primary">Meer info</a>
</div>

Author

Door Bart van de Vossenberg

Fietsende sportgek. Mountainbiken, wielrennen, triathlon en trailrunning. Altijd op zoek naar nieuwe uitdagingen. Zorgt dat je op Fietssport.nl de leukste artikelen, mooiste tochten en meest uitdagende routes vindt.

<div class="col-12 col-lg-6 border-top border-dark pt-4 text-center">
  <div class="row">
    <div class="col-2">
      <img src="/assets/img/profile-photo.png" alt="Daan" class="rounded-circle w-100">
    </div>
    <div class="col-10 text-start">
      <h5>Door Bart van de Vossenberg</h5>
      <p>Fietsende sportgek. Mountainbiken, wielrennen, triathlon en trailrunning. Altijd op zoek naar nieuwe uitdagingen. Zorgt dat je op Fietssport.nl de leukste artikelen, mooiste tochten en meest uitdagende routes vindt.</p>
    </div>
  </div>
</div>

Footer

<footer class="footer bg-secondary py-5">
  <div class="container">
    <div class="row mb-5">
      <div class="col">
        <h2>Haal meer uit Fietssport en ga voor het PLUS account. <a href="#" class="btn btn-outline-dark">Bekijk de voordelen</a></h3>
      </div>
    </div>
    <div class="row mb-5">
      <div class="col-lg-4 mb-5 mb-lg-0">
        <h5>Fietssport is een initiatief van NTFU.</h5>
        <p class="mt-3">Op Fietssport vind je het meest complete overzicht van toertochten en routes van wielersportbond NTFU.</p>
      </div>
      <div class="col-lg-4 mb-5 mb-lg-0">
        <h5>Volg ons op...</h5>
        <ul class="list-unstyled d-flex mt-3">
          <li>
            <a class="sociallink" href="https://www.instagram.com/fietssport">
              <svg class="instagram" viewBox="0 0 100.46 100.45">
                <path d="M-.46,74V25.21a3.41,3.41,0,0,0,.13-.53A27.32,27.32,0,0,1,5.57,9.9,27,27,0,0,1,19.46.55C21.38,0,23.39-.23,25.37-.61H74.14c.24,0,.47.11.7.13a26.44,26.44,0,0,1,12.9,4.64c8,5.59,12.13,13.3,12.2,23,.1,14.93,0,29.86,0,44.79a27.78,27.78,0,0,1-27.82,27.8c-14.93.07-29.86,0-44.79,0A27.19,27.19,0,0,1,11.1,94.57,27.06,27.06,0,0,1,.62,79.6C.11,77.77-.11,75.86-.46,74ZM49.71,90.9H71.07a29.09,29.09,0,0,0,3-.11,18.5,18.5,0,0,0,14.09-8.63,18.92,18.92,0,0,0,3-10.66q0-21.53,0-43c0-1,0-2-.1-3a18.47,18.47,0,0,0-8.48-14.1,18.9,18.9,0,0,0-10.8-3.05q-21.63,0-43.27,0a24.45,24.45,0,0,0-4.28.31,18.33,18.33,0,0,0-13.57,9.9,19,19,0,0,0-2.1,9.22q0,21.56,0,43.12a27.62,27.62,0,0,0,.11,3,18.42,18.42,0,0,0,8.58,14,18.79,18.79,0,0,0,10.65,3Q38.75,90.89,49.71,90.9Z"></path>
                <path d="M49.76,75.47A25.87,25.87,0,1,1,75.63,49.59,25.94,25.94,0,0,1,49.76,75.47Zm0-42.83a17,17,0,1,0,16.93,17A17,17,0,0,0,49.78,32.64Z"></path>
                <path d="M76.73,29.21a6.51,6.51,0,1,1,6.52-6.48A6.57,6.57,0,0,1,76.73,29.21Z"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="sociallink" href="https://www.facebook.com/fietssport">
              <svg class="facebook" viewBox="0 0 51.96 100.09">
                <path d="M0,54.32V36.57H15.1c.29,0,.29,0,.29-.28V23.49c0-.65,0-1.3,0-1.94A27.51,27.51,0,0,1,16,17a22.5,22.5,0,0,1,3-7.68A19.17,19.17,0,0,1,27.48,2a24.86,24.86,0,0,1,7.68-2A32.61,32.61,0,0,1,39-.09L44.28,0c.9,0,1.8.07,2.7.13l4,.32c.33,0,.66.08,1,.12V16.49H43.11c-.74,0-1.49,0-2.24.08a10.26,10.26,0,0,0-3.14.68,5.66,5.66,0,0,0-3.39,3.44,11.7,11.7,0,0,0-.62,4.07c0,3.82,0,7.64,0,11.46,0,.35-.07.35.36.35H51.33c0,.09,0,.15,0,.2-.08.67-.17,1.34-.26,2l-.33,2.64c-.12.88-.23,1.76-.35,2.63L50,46.68c-.12.9-.23,1.8-.35,2.69l-.3,2.3L49.09,54c0,.3,0,.3-.33.3H34.07c-.39,0-.35,0-.35.36v45c0,.31,0,.31-.32.31H15.7c-.37,0-.31,0-.31-.31V54.63c0-.31,0-.32-.31-.32H0Z"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="sociallink" href="https://twitter.com/fietssportmag">
              <svg class="twitter" viewBox="0 0 99.53 81.19">
                <path d="M67.51,0h3.71a.93.93,0,0,0,.27.12A19.89,19.89,0,0,1,84,6.11a1.28,1.28,0,0,0,1,.19A38.43,38.43,0,0,0,96.2,2.15c.29-.16.61-.29,1.07-.5A16.81,16.81,0,0,1,93.91,8c-1.54,1.71-3.3,3.21-4.91,4.76a41.74,41.74,0,0,0,11-3,42.14,42.14,0,0,1-9.46,10,1.69,1.69,0,0,0-.69,1.47c-.14,3.34-.14,6.71-.59,10a56.19,56.19,0,0,1-6.51,19.6A58.29,58.29,0,0,1,66.11,70.31C53.18,79.73,38.57,82.62,22.89,80.57A53.83,53.83,0,0,1,4.11,74.35c-1.24-.66-2.43-1.41-3.64-2.12a49,49,0,0,0,15.75-1.45,40.17,40.17,0,0,0,14.23-7.27,20.26,20.26,0,0,1-11.8-4,20,20,0,0,1-7.27-10.14,22.7,22.7,0,0,0,9.12-.42A20.4,20.4,0,0,1,8.67,41.63a19.75,19.75,0,0,1-4.46-13A19.11,19.11,0,0,0,13.05,31a20.71,20.71,0,0,1-8.22-12.4A20,20,0,0,1,7.09,3.84c11.16,13,25.13,20.23,42.18,21.38-.13-1.43-.32-2.72-.34-4a25.23,25.23,0,0,1,.2-3.89A20.4,20.4,0,0,1,64,.71C65.15.42,66.33.24,67.51,0Z" transform="translate(-0.47)"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="sociallink" href="https://www.strava.com/clubs/fietssport">
              <svg class="strava" viewBox="0 0 71.11 100">
                <path d="M58.1,57.52c1.55,0,3.11.07,4.67.08h8.34L49.66,100C42.49,85.83,35.39,71.82,28.23,57.66H41c-4-7.84-7.85-15.51-11.82-23.34-.23.42-.42.72-.59,1q-5.4,10.71-10.8,21.42a1.26,1.26,0,0,1-1.31.84c-5.43,0-10.87,0-16.48,0L29.13,0c.25.46.42.76.58,1.07q14,27.71,28.07,55.42a8.59,8.59,0,0,1,.34,1c-.36,0-.71.06-1.07.06H41c2.92,5.77,5.78,11.39,8.7,17.16,2.87-5.67,5.64-11.15,8.4-16.63A1.75,1.75,0,0,0,58.1,57.52Z"></path>
              </svg>
          </a>
          </li>
        </ul>
      </div>
      <div class="col-lg-4">
        <h5>Schrijf je in voor de Fietssport nieuwsbrief.</h5>
        <form class="mt-3" data-soort="register" novalidate="novalidate">
          <input type="email" class="form-control bg-white mb-2" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Je e-mailadres">
          <button type="submit" class="btn btn-primary my-1">Inschrijven</button>
        </form>
        <p class="fs-6 fw-light fst-italic text-muted mt-2">
          Door op 'Inschrijven' te klikken ga je akkoord met de <a href="#">gebruiksvoorwaarden</a> en het <a href="#">privacybeleid</a> van Fietssport.
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <h4>Snel naar...</h4>
        <ul class="list-unstyled d-inline-flex flex-wrap gap-3 mt-2">
          <li><a href="#" class="text-decoration-none text-dark">Voordelen Fietssport</a></li>
          <li><a href="#" class="text-decoration-none text-dark">Schadeformulier</a></li>
          <li><a href="#" class="text-decoration-none text-dark">Over Fietssport</a></li>
          <li><a href="#" class="text-decoration-none text-dark">Contact</a></li>
          <li><a href="#" class="text-decoration-none text-dark">Help</a></li>
          <li><a href="#" class="text-decoration-none text-dark">Feedback</a></li>
          <li><a href="#" class="text-decoration-none text-dark">Privacy</a></li>
          <li><a href="#" class="text-decoration-none text-dark">Disclaimer</a></li>
          <li><a href="#" class="text-decoration-none text-dark">Voorwaarden</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Box

Dit betreft een voorbeeld component welke voorzien is van enige uitleg.

Dit is een box

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, optio.

<div class="box bg-primary p-4 border-dark rounded">
  <h1>Dit is een box</h1>
  <p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, optio.</p>
</div>

Accordion

Documentation

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Alerts

Documentation

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Badge

Documentation

Example heading New

Primary Secondary Success Danger Warning Info Light Dark

Buttons

Documentation

Dropdowns

Documentation

Progress

Documentation

25%

50%

75%

100%

Header

Swiper

Routes

Card title 01

Card title 02

Card title 03

Card title 04

Card title 05

Route Card

W3_oliebollentocht

Tour Card

Zondag 23 jan

Maps Card 1

W3_oliebollentocht

Maps Card 2

W3_oliebollentocht

Magazine Card

Mountainbiken op en over voormalige afvalbergen

USP Card

Unieke fietsverzekering

Highlight

MTB-route Texel

Comparison List

PLUS Account

BASIC Account

Sticky Nav

Data List

Toertocht details 25km

Plus List

Review Item

Variatie

Ride Detail

CTA Block

Meer weten over fietsmateriaal?

Author

Door Bart van de Vossenberg

Footer

Box

Dit is een box

Accordion

Accordion Item #1

Accordion Item #2

Accordion Item #3

Alerts

Well done!

Badge

Buttons

Dropdowns

Dropdown header

Dropdown header

Dropdown header

Dropdown header

Dropdown header

Dropdown header

Dropdown header

Progress