Post
Ask Question

Twitter Bootstrap 3 Layout and Buttons

Introduction

Bootstrap is a free collection of tools for creating websites and web applications. It is a front-end framework having CSS based design templates for typography, forms, buttons, navigation and others, also JavaScript files. It was developed by Mark Otto and Jacob Thornton. Before Bootstrap we use various libraries in our website or web application that sometimes create a burden for maintenance. Bootstrap is compatible with all the latest browsers. And also with Internet Explorer 8.

In this article we will see:

  • Buttons
  • Layout

Buttons

Twitter Bootstrap 3 buttons have many varieties, we will see every button class with examples.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Button</title>  
  5.     <link href="bootstrap/bootstrap/css/bootstrap.min.css" rel="stylesheet" />  
  6.     <link href="bootstrap/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />  
  7.     <script src="bootstrap/bootstrap/js/bootstrap.min.js"></script>  
  8.    </head>  
  9. <body>  
  10.    <button class="btn">Default</button>  
  11.     <button class="btn btn-primary">Primary</button>   
  12.    
  13.     <button type="button" class="btn btn-success">Success</button>  
  14.     <button type="button" class="btn btn-info">Info</button>  
  15.    
  16.     <button type="button" class="btn btn-warning">Warning</button>  
  17.    
  18.     <button type="button" class="btn btn-danger">Danger</button>  
  19.    
  20.     <button type="button" class="btn btn-link">Link</button>   
  21.   </body>  
  22. </html>  

ButtonImg

Different size of the box

There are the following three flavors of the size for the button:

  • btn-large  
  • btn-mini
  • btn-small

  1. <p>  
  2.         <button type="button" class="btn  btn-sm">small button</button>  
  3.         <button type="button" class="btn  btn-large">Large button</button>  
  4.         <button type="button" class="btn  btn-mini">Mini button</button>  
  5.     </p>  
  6.     <p>  
  7.         <button type="button" class="btn btn-primary btn-small">Small  button</button>  
  8.         <button type="button" class="btn btn-primary btn-large">Large button</button>  
  9.         <button type="button" class="btn btn-primary btn-mini">Mini button</button>  
  10.     </p>  
  11.     <p>  
  12.         <button type="button" class="btn btn-success btn-small">Small  Button</button>  
  13.         <button type="button" class="btn btn-success btn-large">Large  Button</button>  
  14.         <button type="button" class="btn btn-success btn-mini">Mini Button</button>  
  15.     </p>  
  16.     <p>  
  17.         <button type="button" class="btn btn-info btn-small">Small Button</button>  
  18.         <button type="button" class="btn btn-info btn-large">Large  Button</button>  
  19.         <button type="button" class="btn btn-info btn-mini">Mini  Button</button>  
  20.     </p>  
  21.     <p>  
  22.         <button type="button" class="btn btn-warning btn-small">Small Button</button>  
  23.         <button type="button" class="btn btn-warning btn-large">Large Button</button>  
  24.         <button type="button" class="btn btn-warning btn-mini">Mini  Button</button>  
  25.     </p>  
  26.     <p>  
  27.         <button type="button" class="btn btn-danger btn-small">Small Button</button>  
  28.         <button type="button" class="btn btn-danger btn-large">Large  Button</button>  
  29.         <button type="button" class="btn btn-danger btn-mini">Mini  Button</button>  
  30.     </p>  
  31.     <p>  
  32.         <button type="button" class="btn btn-inverse btn-small">Small Button</button>  
  33.         <button type="button" class="btn btn-inverse btn-large">Large Button</button>  
  34.         <button type="button" class="btn btn-inverse btn-mini">Mini Button</button>  
  35.     </p>  
buttonSize

Active/ Disabled  

  1. <div>  
  2.         <button class="btn">Default</button>  
  3.         <button class="btn btn-primary active">Primary</button>  
  4.    
  5.         <button type="button" class="btn btn-success active">Success</button>  
  6.         <button type="button" class="btn btn-info active">Info</button>  
  7.    
  8.         <button type="button" class="btn btn-warning active">Warning</button>  
  9.    
  10.         <button type="button" class="btn btn-danger active">Danger</button>  
  11.    
  12.         <button type="button" class="btn btn-link active">Link</button>  
  13.     </div>  
  14.     <div>  
  15.         <button class="btn">Default</button>  
  16.         <button class="btn btn-primary active" disabled="disabled">Primary</button>  
  17.    
  18.         <button type="button" class="btn btn-success active" disabled="disabled">Success</button>  
  19.         <button type="button" class="btn btn-info active" disabled="disabled">Info</button>  
  20.    
  21.         <button type="button" class="btn btn-warning active" disabled="disabled">Warning</button>  
  22.    
  23.         <button type="button" class="btn btn-danger active" disabled="disabled">Danger</button>  
  24.    
  25.         <button type="button" class="btn btn-link active" disabled="disabled">Link</button>  
  26.             </div>  
Active

Layout

Twitter Bootstrap Layout has two different layouts. The first is fixed layout and the second is fluid layout. Bootstrap has added the responsive features for phone, tablets and websites, that are a perfect view for large-screen desktops to small-screen desktops.

Fixed/ Grid Layout

If we are looking for a webpage or app layout on a fixed number of size (pixels), then we choose fixed layout. 

  1. <body>  
  2.    <div class="container">  
  3.        <p> Hello World !</p>  
  4.        <p> Hello World !</p>  
  5.        <p> Hello World !</p>  
  6.        <p> Hello World !</p>  
  7.        <p> Hello World !</p>  
  8.        <p> Hello World !</p>  
  9.        <p> Hello World !</p>  
  10.        <p> Hello World !</p>  
  11.    </div>  
  12.  </body>  

GridLayout1

Fluid Layout

If we  want to create a layout that is not fixed, not on the basis of percentage to keep it flexible then we choose fluid layout.

  1. <div class="container-fluid">  
  2.         <div class="row-fluid">  
  3.             <div class="span2" >  
  4.                <p>Hello </p>  
  5.                 <p>Hello </p>  
  6.                 <p>Hello </p>  
  7.                 <p>Hello </p>  
  8.                 <p>Hello </p>  
  9.             </div>  
  10.             <div class="span10" >  
  11.                 <p>World !</p>  
  12.                 <p>World !</p>  
  13.                 <p>World !</p>  
  14.                 <p>World !</p>  
  15.                 <p>World !</p>  
  16.    
  17.             </div>  
  18.         </div>  
  19.     </div>  

fluidLayout1

Summary

In this article we saw various styles of buttons and layout in Twitter Bootstrap. We also saw how to use all classes of buttons and layouts.


Similar Articles