bootstrap images

Rounded Corners

The img-rounded class adds rounded corners to an image.

  <img src="images/file.jpg" width="100" height="100" class="img-rounded">

Circle

The img-circle class adds shapes the image as a circle.

  <img src="images/file.jpg" width="100" height="100" class="img-circle">

Thumbnail

The img-thumbnail class shapes the image to the thumbnail by adding some padding between the border and the image.

  <img src="images/file.jpg" width="100" height="100" class="img-thumbnail">

Responsive Image

Add img-responsive class to the image and it will then scale nicely to the parent element. The .img-responsive class applies following css properties display: block; max-width: 100%; and height: auto; to the image:

Responsive Embeds

Responsive Embeds allows videos or slideshows scale properly on any device. Classes can be applied directly to <iframe>, <embed>, <video>, and <object> elements. The following example creates a responsive video by adding an .embed-responsive-item class to an <iframe> tag. The containing <div> defines the aspect ratio of the video:

  <div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>

Media Objects

Bootstrap provides an easy way to align media objects (like images or videos) to the left or to the right of some content. This can be used to display blog comments, tweets and so on.

John Doe

Lorem ipsum...

  <div class="media">
  <div class="media-left">
  <img src="images/file.jpg" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
  <h4 class="media-heading">John Doe</h4>
  <p>Lorem ipsum...</p>
  </div>
  </div>

Use a <div> element with the media class to create a container for media objects. Use the media-left class to align the media object (image) to the left, or the media-right class to align it to the right. Text that should appear next to the image, is placed inside a container with class media-body. Additionally, you can use media-heading for headings. The media object can also be top, middle or bottom aligned with the media-top, media-middle or media-bottom class added along with the media-left or media-right class.

Media objects can also be nested (a media object inside a media object):

  <div class="media">
    <div class="media-left">
      <img src="">
    </div>
    <div class="media-body">
    <!-- Nested media object -->
      <div class="media">
        <div class="media-left">
          <img src="" class="media-object">
        </div>
        <div class="media-body">          
        <!-- Nested media object -->
          <div class="media">
             <div class="media-left">
                <img src="">
             </div>
             <div class="media-body">
             </div>
          </div>          
        </div>
      </div>      
    </div>
  </div>

Jumbotron

A jumbotron indicates a big box for calling extra attention to some special content or information. A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it. Add jumbotron class to any <div> to gt such effect.

Well

The well class adds a rounded border around an element with a gray background color and some padding. You can change the paddings of the well class by adding the well-sm class for small well or well-lg class for large well. By default, wells are medium in size.

1 Like 1 Dislike 0 Comment Share Tweet