Demonstration of Bootstrap

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


Rounded Corners

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

HTML5

Circle

The .rounded-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-fluid 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 d-none and d-blok 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).