< Bootstrap Tutorial

Bootstrap images and icons

← Previous Next →


Bootstrap Images

Images 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 we can easily style images such as making the round cornered or circular images, or give them effect like thumbnails.

Bootstrap provides three classes that can be used to apply some simple styles to images:

  • .img-rounded - adds border-radius:6px to give the image rounded corners.
  • .img-circle - makes the entire image round by adding border-radius:500px.
  • .img-thumbnail - adds a bit of padding and a gray border

The following code demonstrates this:

<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">

Thumbnails

The Bootstrap thumbnail component is very useful for creating grids of images or videos, lists of products, portfolios, and much more.

The following code shows how to work with thumbnails:

<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>

Bootstrap Icons

Bootstrap includes more than 260 Glyphicons. These icons are available in font format for better usability and scalability.
Since these Glyphicons are font based, so we can create icons of any color just through applying the CSS color property on the specific element.

To use the Bootstrap icons you will require an <span> tag along with a base class glyphicon and an individual icon class glyphicon-*. The glyphicon-class-name is the name of the particular icon class (e.g. glyphicon-search, glyphicon-user, glyphicon-star etc.) defined in bootstrap.css. The general syntax for using Bootstrap icons is:

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

The following code demonstrates how to do this:

<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 above code produces the following output:

← Previous Next →