Demonstration of Bootstrap

This page demonstrate the Jumbotron, the Bootstrap Image incl. Gallery, Carousel, Responsive Image and Embeds.

Rounded Corners

The .img-rounded class adds rounded corners to an image (not available in IE8):

HTML5

Circle

The .img-circle class shapes the image to a circle (not available in IE8):

HTML5

Thumbnail

The .img-thumbnail class creates a thumbnail of the image:

html_css_js_bootstrap

Image

The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):

Roskilde Domkirke

Image Gallery

The .thumbnail class can be used to display an image gallery. Click on the images to see it in full size:


Responsive Embed

Images comes in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen. Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.


Switching images using grid row col and hidden class

The Images exists in 3 cutted versions - only one is visible depending on the screen size.


Switching images using Media Query to change the visibility of the Image.

The Images exists in 3 cutted versions - only one is visible depending on the screen size.


The Carousel Plugin

The Carousel plugin is a component for cycling through elements, like a carousel (slideshow). This plugin is included in "bootstrap.js" (or in the minified "bootstrap.min.js" file).