Web development basics Web development snippets

Bootstrap carousel animate top to bottom

Bootstrap carousel animate top to bottom instead of left to right:

See the Pen animating top to bottom-bootstrap carousel by scanfcode (@scanfcode) on CodePen.


For creating a Bootstrap carousel, you need to include bootstrap in your website. Bootstrap can either be downloaded from getbootstrap.com or you can use bootstrap CDN. The code is:

For creating a simple carousel which animates from left to right bootstrap provides code snippet that is:

Bootstrap carousel animate top to bottom – the trick

To animate carousel form top to bottom , we add an additional class top-to-bottom

The main function is done by the css transition applied in the new class.

You can also refer to
Bootstrap text carousels