Learn 'Mobile First' Web Design Using Bootstrap 3 by Rahul A. Sakla - HTML preview

PLEASE NOTE: This is an HTML preview only and some elements such as links or page numbers may be incorrect.
Download the book in PDF, ePub, Kindle for a complete version.

Chapter 7 Images

 

7.1 Responsive Images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

 

img4.pngIn Internet Explorer 8-10, SVG images with .img-responsive are   disproportionately sized. To fix this, add width: 100% \9;where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.

img138.png

 

7.2 Image Shapes

Add classes to an <img> element to easily style images in any project.

img4.pngKeep in mind that 1nternet Explorer 8 lacks support for rounded corners.

 

img139.png

 

img140.png

 

7.3 Helper Classes

 

Contextual Colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

 

img141.png

 

img142.png

 

7.4 Contextual Background

 

img143.png

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, ust like the text classes.

 

img144.png

 

7.5 Close Icon

Use the generic close icon for dismissing content like modals and alerts.

 

img145.png

 

img146.png

 

7.6 Caret Icon

Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

img147.png

 

7.7 Quick Floats

Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins

 

img148.png

img149.png

img150.png

img151.png

 

Not for use in navbars

img4.png    To align components in navbars with utility classes, use .navbar-left or .navbar-right instead.

 

7.8 Center Content Blocks

Set an element to display: block and center via margin. Available as a mixin and class.

img152.png

img153.png

img154.png

 

7.9 Clearfix

Easily clear float by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.

img155.png

img156.png

img157.png

 

7.10 Showing And Hiding Content

Force an element to be shown or hidden tincluding for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available f