Bootstrap Images and Icon

Images and Icon are very common in modern web design. So styling images and placing it properly on the web pages is very important for improving the user experience.

Using the Bootstrap built-in classes you can easily style images such as making the round cornered or circular images, or give them effect like thumbnails.

  • .img-thumbnail: adds a bit of padding and a gray border:
  • Bootstrap provides three classes that can be used to apply some simple styles to images:
  • .img-circle: makes the entire image round by adding border-radius:500px.

Example

<img src="125x125.jpg" class="img-rounded" alt="Rounded Image">
<img src="125x125.jpg" class="img-circle" alt="Circular Image">
<img src="125x125.jpg" class="img-thumbnail" alt="Thumbnail Image">

Output of the above example will look something like this


Bootstrap includes 200 Glyphicons. As opposed to previous sprite version these icons are available in font format for better usability and scalability.
Since these Glyphicons are font based now you can create icons of any color just applying the CSS color property on the specific element.
Twitter Bootstrap Thumbnails
Twitter Bootstrap thumbnails component is very useful for creating grids of images or videos, lists of products, portfolios, and much more. The following example will show you how to create thumbnails to showcase linked images
Example

<div class="container">
        <div class="row">
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="125x125.jpg" alt="125x125">
                </a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="125x125.jpg" alt="125x125">
                </a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="125x125.jpg" alt="125x125">
                </a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="125x125.jpg" alt="125x125">
                </a>
            </div>
        </div>
    </div>

The output of the above example will look something like this:

Twitter Bootstrap Media Objects
Sometimes you may want to create a layout that contains left- or right-aligned image along with the textual content like blog comments. You can do this easily through the newly introduced Bootstrap media component, like this
Example

<div class="media">
        <a href="#" class="pull-left">
            <img src="avatar-tiny.jpg" class="media-object" alt="Sample Image">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Brandam Maucclum<small><i>Posted on January 01, 2013</i></small></h4>
            <p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I Will let you know once I do.</p>
        </div>
 </div>

The output of the above example will look something like this:


Sample Image

Brandam MaucclumPosted on January 01, 2013

Excellent feature! I love it. One day I’m definitely going to put this Bootstrap component into use and I Will let you know once I do.

Twitter Bootstrap Icons
Twitter Bootstrap includes 200 Glyphicons. As opposed to previous sprite version these icons are available in font format for better usability and scalability.

Since these Glyphicons are font based now you can create icons of any color just applying the CSS color property on the specific element.

How to Use Icons in Your Code
To use the Bootstrap icons you will require an <span>tag along with a base class glyphicon and an individual icon class glyphicon-*. The general syntax for using Bootstrap icons is:

<span class="glyphicon glyphicon-class-name"></span>

Where “glyphicon-class-name” is the name of the particular icon class (e.g. glyphicon-search, glyphicon-user, glyphicon-star etc.) defined in bootstrap.css.
For example, to use search icon you can place the following code just about anywhere:
Example

<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search</button>

The output of the above example will look something like this:

cartoon porn

Admin has written 171 articles