YouTip LogoYouTip

Bootstrap Images

# Bootstrap Images In this chapter, we will learn about Bootstrap's support for images. Bootstrap provides three classes that can be applied to images for simple styling: * _.img-rounded_: Adds _border-radius:6px_ to give the image rounded corners. * _.img-circle_: Adds _border-radius:50%_ to make the entire image circular. * _.img-thumbnail_: Adds some padding and a gray border. Please see the example below for a demonstration: ## Example [Try it Β»](#) The result is as follows: ![Image 2: Image](#) ## Classes The following classes can be used on any image. | Class | Description | Example | | --- | --- | --- | | .img-rounded | Adds rounded corners to the image (Not supported in IE8) | (#) | | .img-circle | Makes the image circular (Not supported in IE8) | (#) | | .img-thumbnail | Thumbnail functionality | (#) | | .img-responsive | Responsive image (Will scale nicely to the parent element) | (#) | ## Responsive Images By adding the .img-responsive class to the tag, you can make the image responsive. The image will scale nicely to the parent element. The .img-responsive class applies max-width: 100%; and height: auto; to the image: ## Example Cinque Terre [Try it Β»](#)
← Bootstrap Helper ClassesBootstrap Buttons β†’