Collapse

Contrast Bootstrap Collapse is a component which toggles content. Useful for grouping great amount of texts and/or graphics into expanding and collapsing items.

Contrast Bootstrap Collapse is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0.

Examples

Default Collapse example.

######html

Opened Collapse

######html

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" class="d-block w-100" alt="first slide">
          </div>
          <div class="carousel-item">
            <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" class="d-block w-100" alt="second slide">
          </div>
          <div class="carousel-item">
            <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" class="d-block w-100" alt="third slide">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>

Mask

DatePicker