code.makery

Learning how to code.

Subscribe to Updates
Edit on GitHub
More HTML & CSS

Images with Bootstrap

Achtung: Diese Seite wird gerade aktualisiert auf Bootstrap 4, beinhaltet aber noch Informationen zu Bootstrap 3. Bitte verwenden Sie in der Zwischenzeit die Originaldokumentation von Bootstrap.

In this part we will learn some tricks on how to use images with Bootstrap.

If you haven't yet integrated Bootstrap in your project, please read how to use the Bootstrap Framework in the HTML & CSS Tutorial.

The easiest way to include images in a website is as follows.

Insert Images
<img src="my-image.png" alt="My Image">

Optimal Image Size

The image above has a fixed size. Although, you can shrink or enlarge the image with a CSS rule like width: 200px;, this is often not what you want. You should always try to optimize the download size of your web page. If you let the user download a 400px wide image and display it at 200px it might be a waste of bandwidth.

Side Note: There are instances where larger images are desired, for example for high-resolution “retina” displays. If you want to go that extra mile for such devices you should use a JavaScript library like retina.js.

Responsive Images

When a web page is displayed on different screens you will have to shrink images on smaller screens.

Bootstrap 3 provides a CSS class img-responsive that will automatically adjusts images to fit the screen size (read about responsive images in the Bootstrap documentation).

Insert a responsive image
<img src="my-image.png" alt="My Image" class="img-responsive" >

Positioning Images

Center

With the CSS class center-block you can center images in Bootstrap (see center content blocks in the Bootstrap documentation):

Center an image
<img src="..." alt="..." class="center-block">
**Note:** The class `center-block` can also be used to center any HTML elements. But for text and other inline elements you must use `text-center` instead (see alignment classes in the Bootstrap documentation).

Left and Right Align

Images can be aligned to the left or to the right. The text will then flow around the image. To do this we use the so-called floats (read about floats in the Bootstrap documentation).

Float left
<img src="..." alt="..." class="pull-left">

Left Align

Float right
<img src="..." alt="..." class="pull-right">

Right Align

New Line after Float (Clearfix)

When floating to the left or right all following elements are displayed next to the image. If you want to start on a new line, you have to use the clearfix class. This class is usually added on a parent <div> element (more info about clearfix in the Bootstrap documentation).

<div class="clearfix">
  <img src="..." alt="..." class="pull-left">
  <p>This text appears next to the image.</p>
</div>
<p>This text appears below the image.</p>

Clearfix

Margin Around Image

Usually you will want some margin between the image and text or other content. A simple way to do this is to define margins in CSS.

If we created a rule for img elements in CSS this would be applied to all images on our entire website. This is usually not desired.

For the gap to the right of an image we therefore introduce a new CSS class called gap-right.

HTML for gap right
<img src="..." alt="..." class="pull-left gap-right">

Im CSS definieren wir jetzt den Abstand.

CSS for gap right
.gap-right {
  margin-right: 10px; 
}

Gap

There are also margin-top, margin-bottom, and margin-left if you need a gap in any other direction.

Image Shapes

Bootstrap 3 provides ways for some simple images styles. You can round the corners, cut out a circle or add a subtle frame.

Image Shapes

You can add the following three CSS classes to your images (see image shapes in the Bootstrap documentation).

Image Shapes with Bootstrap
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

The following articles about images might also be interesting to you:

Comments