BOOTSTRAP Image Shapes and Buttons

PICTURES (Bootstrap Image Shapes)

Rounded Corners

The .img-rounded class adds rounded corners to an image (IE8 does not support rounded corners):


<div class=“container”>

                    <h2>Rounded Corners</h2>        

                    <img src=“img/cinqueterre.jpg” class=“img-rounded” alt=“Cinque Terre” width=“304” height=“236”>




The .img-circle class shapes the image to a circle (IE8 does not support rounded corners):


<div class=“container”>

                    <h2>Rounded Corners</h2>        

                    <img src=“img/cinqueterre.jpg” class= img-circle “ alt=“Cinque Terre” width=“304” height=“236”>



The .img-thumbnail class shapes the image to a thumbnail:


<div class=“container”>

                    <h2>Rounded Corners</h2>        

                    <img src=“img/cinqueterre.jpg” class= img- thumbnail “ alt=“Cinque Terre” width=“304” height=“236”>



Responsive Images

Images come in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen.

Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.

The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image:



<img class=”img-responsive” src=”img_chania.jpg” alt=”Chania”>

Responsive Embeds

Also let 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 video will then scale nicely to the parent element). The containing <div> defines the aspect ratio of the video:



<div class=”embed-responsive embed-responsive-16by9″>
<iframe class=”embed-responsive-item” src=”…”></iframe>

What is aspect ratio?

The aspect ratio of an image describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century), and 16:9 (universal for HD television and European digital television).


You can choose between two aspect ratio classes:


<!– 16:9 aspect ratio –>
<div class=”embed-responsive embed-responsive-16by9″>
<iframe class=”embed-responsive-item” src=”…”></iframe>

<!– 4:3 aspect ratio –>
<div class=”embed-responsive embed-responsive-4by3″>
<iframe class=”embed-responsive-item” src=”…”></iframe>

For incase for any confusion, here is video to help you through diferrent image shapes and sizes in bootstrap

Bootstrap Buttons

Bootstrap provides different styles of bottons:

Button Styles


To achieve the button styles above, Bootstrap has the following classes:

  • .btn
  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

The following example shows the code for the different button styles:


<button type=”button” class=”btn”>Basic</button>
<button type=”button” class=”btn btn-default”>Default</button>
<button type=”button” class=”btn btn-primary”>Primary</button>
<button type=”button” class=”btn btn-success”>Success</button>
<button type=”button” class=”btn btn-info”>Info</button>
<button type=”button” class=”btn btn-warning”>Warning</button>
<button type=”button” class=”btn btn-danger”>Danger</button>
<button type=”button” class=”btn btn-link”>Link</button>


The button classes can be used on an <a><button>, or <input> element:


<a href=”#” class=”btn btn-info” role=”button”>Link Button</a>
<button type=”button” class=”btn btn-info”>Button</button>
<input type=”button” class=”btn btn-info” value=”Input Button”>
<input  type=”submit” class=”btn btn-info” value=”Submit Button”>

Button Sizes

Bootstrap provides four button sizes:

Large Medium Small XSmall

The classes that define the different sizes are:

  • .btn-lg
  • .btn-md
  • .btn-sm
  • .btn-xs

The following example shows the code for different button sizes:


<button type=”button” class=”btn btn-primary btn-lg”>Large</button>
<button type=”button” class=”btn btn-primary btn-md”>Medium</button>
<button type=”button” class=”btn btn-primary btn-sm”>Small</button>
<button type=”button” class=”btn btn-primary btn-xs”>XSmall</button>

Block Level Buttons

A block level button spans the entire width of the parent element.

Button 1Button 2

Add class .btn-block to create a block level button:


<button type=”button” class=”btn btn-primary btn-block”>Button 1</button>

Active/Disabled Buttons

A button can be set to an active (appear pressed) or a disabled (unclickable) state:

Active Primary Disabled Primary

The class .active makes a button appear pressed, and the class .disabled makes a button unclickable:



<button type=”button” class=”btn btn-primary active”>Active Primary</button>
<button type=”button” class=”btn btn-primary disabled”>Disabled Primary</button>

A video to guide you through different button styles

Leave a Reply