Latest web development tutorials

×

Bootstrap Tutorial

BS HOME BS Get Started BS Grid Basic BS Typography BS Tables BS Images BS Jumbotron BS Wells BS Alerts BS Buttons BS Button Groups BS Glyphicons BS Badges/Labels BS Progress Bars BS Pagination BS Pager BS List Groups BS Panels BS Dropdowns BS Collapse BS Tabs/Pills BS Navbar BS Forms BS Inputs BS Inputs 2 BS Input Sizing BS Carousel BS Modal BS Tooltip BS Popover BS Scrollspy BS Affix

Bootstrap Grid System

BS Grid System BS Stacked/Horizontal BS Grid Small BS Grid Medium BS Grid Large BS Grid Examples

Bootstrap Themes

BS Templates BS Theme "Simply Me" BS Theme "Company" BS Theme "Band"

Bootstrap Exam

Bootstrap CSS Ref

CSS Typography CSS Buttons CSS Forms CSS Helpers CSS Images CSS Tables CSS Dropdowns CSS Navs Glyphicons

Bootstrap JS Ref

JS Affix JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip

Bootstrap CSS Images Reference

❮ Previous Next Reference ❯

Bootstrap Images

Rounded Corners:

Cinque Terre

Circle:

Cinque Terre

Thumbnail:

<img> Classes

The classes below can be used to style any image:

Class	Description	Example
.img-rounded	Adds rounded corners to an image (not available in IE8)	Try it
.img-circle	Shapes the image to a circle (not available in IE8)	Try it
.img-thumbnail	Shapes the image to a thumbnail	Try it
.img-responsive	Makes an image responsive (will scale nicely to the parent element)	Try it

Responsive Images

Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.

The .img-responsive class applies max-width: 100%, height: auto, and display:block to the image:

Example

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">

Try it Yourself »

❮ Previous Next Reference ❯