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.

<!DOCTYPE html>
<html>
<head>
<title>Button</title>
<link href="bootstrap/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<script src="bootstrap/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn">Default</button>
<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>
</body>
</html>

Different size of the box

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

btn-large
btn-mini
btn-small

<p>
<button type="button" class="btn btn-sm">small button</button>
<button type="button" class="btn btn-large">Large button</button>
<button type="button" class="btn btn-mini">Mini button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-small">Small button</button>
<button type="button" class="btn btn-primary btn-large">Large button</button>
<button type="button" class="btn btn-primary btn-mini">Mini button</button>
</p>
<p>
<button type="button" class="btn btn-success btn-small">Small Button</button>
<button type="button" class="btn btn-success btn-large">Large Button</button>
<button type="button" class="btn btn-success btn-mini">Mini Button</button>
</p>
<p>
<button type="button" class="btn btn-info btn-small">Small Button</button>
<button type="button" class="btn btn-info btn-large">Large Button</button>
<button type="button" class="btn btn-info btn-mini">Mini Button</button>
</p>
<p>
<button type="button" class="btn btn-warning btn-small">Small Button</button>
<button type="button" class="btn btn-warning btn-large">Large Button</button>
<button type="button" class="btn btn-warning btn-mini">Mini Button</button>
</p>
<p>
<button type="button" class="btn btn-danger btn-small">Small Button</button>
<button type="button" class="btn btn-danger btn-large">Large Button</button>
<button type="button" class="btn btn-danger btn-mini">Mini Button</button>
</p>
<p>
<button type="button" class="btn btn-inverse btn-small">Small Button</button>
<button type="button" class="btn btn-inverse btn-large">Large Button</button>
<button type="button" class="btn btn-inverse btn-mini">Mini Button</button>
</p>

Active/ Disabled

<div>
<button class="btn">Default</button>
<button class="btn btn-primary active">Primary</button>
<button type="button" class="btn btn-success active">Success</button>
<button type="button" class="btn btn-info active">Info</button>
<button type="button" class="btn btn-warning active">Warning</button>
<button type="button" class="btn btn-danger active">Danger</button>
<button type="button" class="btn btn-link active">Link</button>
</div>
<div>
<button class="btn">Default</button>
<button class="btn btn-primary active" disabled="disabled">Primary</button>
<button type="button" class="btn btn-success active" disabled="disabled">Success</button>
<button type="button" class="btn btn-info active" disabled="disabled">Info</button>
<button type="button" class="btn btn-warning active" disabled="disabled">Warning</button>
<button type="button" class="btn btn-danger active" disabled="disabled">Danger</button>
<button type="button" class="btn btn-link active" disabled="disabled">Link</button>
</div>

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.

<body>
<div class="container">
<p> Hello World !</p>
<p> Hello World !</p>
<p> Hello World !</p>
<p> Hello World !</p>
<p> Hello World !</p>
<p> Hello World !</p>
<p> Hello World !</p>
<p> Hello World !</p>
</div>
</body>

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.

<div class="container-fluid">
<div class="row-fluid">
<div class="span2" >
<p>Hello </p>
<p>Hello </p>
<p>Hello </p>
<p>Hello </p>
<p>Hello </p>
</div>
<div class="span10" >
<p>World !</p>
<p>World !</p>
<p>World !</p>
<p>World !</p>
<p>World !</p>
</div>
</div>
</div>

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.